@charset "UTF-8";
/*! 
Theme Name: Boilerplate Starter
Author: 1p21

--------------

for future friendly editing and to avoid possibility of change overrides, DO:
- For smaller and or quick fixes, put css changes in post-live.css 
OR
- For complex and or elaborate rebuilds/ Site build, modify sass files locally with a compiler and output as the style.css
*/
/* ================================================================================
* Resets.css
================================================================================ */
/***
    The new CSS reset - version 1.8.3 (last updated 21.1.2023)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
*:where(:not(html,
iframe, canvas,
img, svg, video, audio,
input, textarea, select, button,
table, caption, tbody, tfoot, thead, tr, th, td):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

/* Reset form elements while keeping essential ui styles */
:where(input, textarea, select, option, button, optgroup) {
  all: revert;
  margin: unset;
  appearance: auto;
}

/* resets table styles nicely so html attribute features are still preserved */
:where(table, caption, tbody, tfoot, thead, tr, th, td) {
  margin: unset;
  padding: unset;
  border: unset;
  background: unset;
  border-collapse: collapse;
  border-spacing: 0;
}

/* Reapply the pointer cursor for anchor tags */
a, button {
  cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu {
  list-style: none;
}

/* For images to not be able to exceed their container */
img {
  max-inline-size: 100%;
  max-block-size: 100%;
}

/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
  -webkit-user-select: auto;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
  white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
  -webkit-appearance: revert;
  appearance: revert;
}

/* preformatted text - use only for this feature */
:where(pre) {
  all: revert;
}

/* reset default text opacity of input placeholder */
::placeholder {
  color: unset;
}

/* remove default dot (•) sign */
::marker {
  content: initial;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
  display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly.
   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable=false])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-select: auto;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable=true]) {
  -webkit-user-drag: element;
}

/* Revert Modal native behavior */
:where(dialog:modal) {
  all: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ================================================================================
* Native Custom CSS Properties
================================================================================ */
/* css vars because internet explorer can no longer hold us back <3 */
:root {
  /* Core Vars DO NOT EDIT. */
  /* Design Reference - Breakpoints This will be used by javascript to track media queries on stuff like sliders */
  --br-xxs: 22.4375rem;
  --br-xs: 47.9375rem;
  --br-sm: 74.9375rem;
  --br-md: 87.4375rem;
  --br-lg: 112.4375rem;
  --br-xl: 179.9375rem;
  --br-xxl: 239rem;
  /* Design Reference: Comps/Design Sizes based on given XD Files' artboards */
  --comp: 22.5rem;
  /* unit in case for padding to push to negative margins (ie overlaps). Best to keep as tiny as possible */
  --overlap-buffer: 1px;
  /* Styleguide - Fonts */
  --font-primary: Public Sans, Primary Fallback, Helvetica, Arial, sans-serif;
  --font-secondary: Teko, Secondary Fallback, Arial Narrow, Arial, sans-serif;
  --font-accent: Barlow, Accent Fallback, Helvetica, Arial, sans-serif;
  --font-monospace: monospace;
  /* Styleguide - colors */
  --color-black: #000D1D;
  --color-white: #F5F5F5;
  --color-gray: #D9D9D9;
  --color-navy-100: #001B3B;
  --color-navy-200: #001126;
  --color-blue-100: #93DEFF;
  --color-blue-200: #29AAE2;
  --color-blue-300: #0658C5;
  --color-blue-400: #01316B;
  --color-red-100: #FF373F;
  --color-red-200: #ED1C24;
  --color-yellow-stars: #FFCF3C;
  --color-dark: #000D1D;
  --color-dark-alt: #001126;
  --color-light: #F5F5F5;
  --color-light-alt: #D9D9D9;
  --color-primary: #ED1C24;
  --color-primary-alt: #FF373F;
  --color-primary-gradient-start: var(--color-primary);
  --color-primary-gradient-end: var(--color-primary-alt);
  --color-secondary: #0658C5;
  --color-secondary-alt: #01316B;
  --color-secondary-gradient-start: var(--color-secondary);
  --color-secondary-gradient-end: var(--color-secondary-alt);
  --color-accent: #29AAE2;
  --color-accent-alt: #93DEFF;
  --color-accent-gradient-start: var(--color-accent);
  --color-accent-gradient-end: var(--color-accent-alt);
  --color-neutral: #D9D9D9;
  --color-neutral-light: var(--color-neutral);
  --color-neutral-lighter: var(--color-neutral-light);
  --color-neutral-lightest: var(--color-neutral-lighter);
  --color-neutral-dark: var(--color-neutral);
  --color-neutral-darker: var(--color-neutral-dark);
  --color-neutral-darkest: var(--color-neutral-darker);
  --color-success: #00CC00;
  --color-caution: #FFCF3C;
  --color-error: #ED1C24;
  /* add more native vars as needed */
  --icon-arrow: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="15" viewBox="0 0 20 15" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.5689 7.51555L19.4936 7.4402L19.5003 7.43344L12.0671 0.00023372L10.3764 1.69096L14.8184 6.13301L-0.000237848 5.8715L0.0432853 8.30572L15.01 8.56987L10.5769 13.003L12.3292 14.7553L19.5689 7.51555Z" fill="%2329AAE2"/></svg>');
}
@media only screen and (min-width: 48rem) {
  :root {
    /* Core Vars DO NOT EDIT. */
    --comp: 48rem;
    /* add more native vars as needed */
  }
}
@media only screen and (min-width: 75rem) {
  :root {
    /* Core Vars DO NOT EDIT. */
    --comp: 75rem;
    /* add more native vars as needed */
  }
}
@media only screen and (min-width: 87.5rem) {
  :root {
    /* Core Vars DO NOT EDIT. */
    --comp: 87.5rem;
    /* add more native vars as needed */
  }
}
@media only screen and (min-width: 112.5rem) {
  :root {
    /* Core Vars DO NOT EDIT. */
    --comp: 120rem;
    /* add more native vars as needed */
  }
}

/* ================================================================================
* Global Styles/Normalize:
* Custom reset and global styles for the site html tags
================================================================================ */
/* Custom scaffolding and normalizing styles
--------------------------------------------------------------- */
html,
body {
  /* prevent document from shrinking to window sizes that are too small */
  min-inline-size: 20rem;
  /* cascade global font family, color, and to reduce appearance of broken styles */
  font-family: var(--font-primary);
  font-weight: 400;
  color: var(--scheme-fg, var(--color-dark));
  /* make sure there are no edge case words that overflow the layout or make blocks too wide*/
  word-wrap: break-word;
  /* smoothen scroll */
  scroll-behavior: smooth;
  /* mobile viewport bug fix */
  min-block-size: 100vb;
  min-block-size: -webkit-fill-available;
  /* accent color for form stuff */
  accent-color: var(--color-primary);
  /* trim text boxes. if font is designed with weird baseline to ascender space, this might help??? */
  text-box-trim: trim-both;
}

/* position sticky friendly way to cut off any horizontal scrolls but also allow y to still scroll. Apply only on html element or everything will jiggle for safari ios.
 + overflox fix for chrome's responsive inspector -_-
--------------------------------------------------------------- */
html {
  overflow-inline: hidden;
  overflow-block: scroll;
  container-name: document;
}

body {
  overflow-inline: clip;
  /* container support */
  container-name: document;
  container-type: inline-size;
  /* global background. webkit seems to slow down the page it when it's applied to the root element so isolate it to the body for now */
  background: var(--scheme-bg, var(--color-light));
}

/* Remove scrollbar ONLY on touch devices
--------------------------------------------------------------- */
@media (pointer: coarse) {
  html,
  body {
    scrollbar-width: none;
  }
  ::-webkit-scrollbar {
    display: none;
  }
}
/* disable browser focus default styles: Note: customize focus styles as well for accessibility. recommended to set as the same styles as hovers on elements 
--------------------------------------------------------------- */
:focus {
  outline: none;
}

/* Critical sizing and fonts fixes
--------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  /* fix animation flickering issues for webkit browsers */
  -webkit-backspace-visibility: hidden;
  /* box sizing */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* font fixes */
  -webkit-font-smoothing: antialiased;
  /* Firefox 25*/
  -moz-osx-font-smoothing: grayscale;
}

/* Transition page load so it looks smoother (beta)
--------------------------------------------------------------- */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 380ms;
  animation-timing-function: ease;
}

::view-transition-old(root) {
  animation-name: onep21-template-out;
}

::view-transition-new(root) {
  animation-name: onep21-template-in;
}

@keyframes onep21-template-out {
  to {
    opacity: 0;
  }
}
@keyframes onep21-template-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}
/* Form control resets. Note: will not entirely prettify Gravity forms styles for the design... yet. To view the rest of the form control scaffoldings, including gravity forms' go to vendor/_gforms styles
--------------------------------------------------------------- */
input:not(:is([type=checkbox], [type=radio])),
textarea,
select,
button {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0;
  border: none;
  resize: none;
  display: block;
  font: inherit;
  color: inherit;
  margin: 0;
}

input:is([type=checkbox], [type=radio]) {
  -webkit-appearance: auto;
  appearance: auto;
}

input::-webkit-input-placeholder,
select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  /* placeholder stuff. adjust as needed */
  color: inherit;
  opacity: 0.5;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
input::-moz-placeholder,
select::-moz-placeholder,
textarea::-moz-placeholder {
  /* placeholder stuff. adjust as needed */
  color: inherit;
  opacity: 0.5;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
input::-ms-input-placeholder,
select::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  /* placeholder stuff. adjust as needed */
  color: inherit;
  opacity: 0.5;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
input:focus::-webkit-input-placeholder,
select:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
  /* placeholder stuff. adjust as needed */
  opacity: 0.2;
}
input:focus::-moz-placeholder,
select:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
  /* placeholder stuff. adjust as needed */
  opacity: 0.2;
}
input:focus::-ms-input-placeholder,
select:focus::-ms-input-placeholder,
textarea:focus::-ms-input-placeholder {
  /* placeholder stuff. adjust as needed */
  opacity: 0.2;
}

:is(a, button):hover {
  cursor: pointer;
}

button {
  border: none;
}

/* Remove default ugly blue links. NOTE: Make sure to style a tags appropiately for accessibility while maintianing styleguide
--------------------------------------------------------------- */
:where(a) {
  text-decoration: revert;
  color: inherit;
}

/* Monospace elements
--------------------------------------------------------------- */
:where(pre, code, kbd, tt) {
  font-family: var(--font-monospace);
  background: rgba(0, 0, 0, 0.05);
}

:where(code, kbd, tt) {
  padding: 0.125em;
}

:where(pre) {
  padding: 1em;
  max-inline-size: 100%;
  line-height: 1;
  overflow: auto;
}
:where(pre) * {
  border: 0;
  margin: 0;
  padding: 0;
}

/* Other critical element styles
--------------------------------------------------------------- */
:where(strong, b) {
  font-family: inherit;
  font-weight: bolder;
}

:where(em, cite, i, var) {
  font-family: inherit;
  font-style: italic;
}

:where(u) {
  text-decoration: underline;
}

:where(var) {
  font-family: var(--font-secondary);
}

:where(sup, sub, small) {
  font-size: 0.75em;
}

:where(sup) {
  vertical-align: top;
}

:where(sub) {
  vertical-align: bottom;
}

:where(hr) {
  outline: 0;
  border: 0;
  display: block;
}

/* Images
* Note: best practice to let images only expand within available space 
--------------------------------------------------------------- */
:where(img, svg) {
  max-inline-size: 100%;
}

:where(img) {
  block-size: auto;
}

/* Embeds
* Note: best practice to let images only expand within available space 
--------------------------------------------------------------- */
:where(video, audio, iframe, object, embed) {
  max-inline-size: 100%;
}

/* Other custom global scaffolding here....
--------------------------------------------------------------- */
/* Normalize template main and asides' vertical padding. adjust as needed then customize in certain template styles.
You can use classes for other elements that need to share the same padding as well
--------------------------------------------------------------- */
:is(main, .main, aside, .aside) {
  padding-block: 2.125rem 3.125rem;
}
@media only screen and (min-width: 48rem) {
  :is(main, .main, aside, .aside) {
    padding-block: 4rem 5rem;
  }
}
@media only screen and (min-width: 75rem) {
  :is(main, .main, aside, .aside) {
    padding-block: 7rem 7rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(main, .main, aside, .aside) {
    padding-block: 8.75rem 8.75rem;
  }
}
.banner-no-background-image :is(main, .main, aside, .aside) {
  padding-block-start: 0rem;
}
/* ...Or separate normalize template main and asides' vertical padding.
--------------------------------------------------------------- */
/* Catch fancy/weird/whatever positioned elements into custom templates' content area only + prevent clipping issues
--------------------------------------------------------------- */
.template-wrapper {
  position: relative;
}

/* Other scaffolding styles you might need. NOTE: these will apply globaly. use body classes as needed. refer to functions/function-body-class
--------------------------------------------------------------- */
/* global templating classes .section
--------------------------------------------------------------- */
main:has(> :is(.section, section):is(.section-style-margined, .section-style-padded)) {
  padding-block: 0;
}

:where(.section, section):where(.section-style-padded) {
  padding-block: 3.75rem;
}
:where(.section, section):where(.section-style-margined) {
  margin-block: 3.75rem;
}
@media only screen and (min-width: 48rem) {
  :where(.section, section):where(.section-style-padded) {
    padding-block: 4.5rem;
  }
  :where(.section, section):where(.section-style-margined) {
    margin-block: 4.5rem;
  }
}
/* global per section scaffolding - useful when design is consistent per sections
--------------------------------------------------------------- */
.section-block:where(.section-content):where(:has(.columns), .columns) {
  grid-column: 1/-1;
}
.section-block:where(.section-content):is(.columns) {
  justify-content: center;
  justify-items: center;
  max-inline-size: max-content;
  justify-self: center;
}
.section-block:where(.section-content):is(.columns) > .content:only-child {
  grid-column: 1/-1;
}
.section-block:where(.section-content):not(:has(.columns), .columns) > :is(.content:only-child) {
  inline-size: 62.5rem;
  justify-self: center;
}
@media only screen and (min-width: 75rem) {
  .section-block:where(.section-content):is(.columns) {
    --columns-number: 2;
    --columns-gap-x: 3rem;
  }
}
@media only screen and (min-width: 75rem) and (max-height: 800px) {
  :where(.section-block):is(.section-image):is(.section-image-can-sticky) {
    align-self: stretch;
  }
  :where(.section-block):is(.section-image):is(.section-image-can-sticky) .section-image-sticky {
    position: sticky;
    inset-block-start: calc(var(--layout-header-height) + 4vb);
  }
  :where(.section-block):is(.section-image):is(.section-image-can-sticky) .section-image-picture {
    display: block;
    max-block-size: calc(86vb - var(--layout-header-height));
    overflow: clip;
  }
  :where(.section-block):is(.section-image):is(.section-image-can-sticky) .section-image-img {
    object-fit: cover;
    block-size: 100%;
    inline-size: 100%;
  }
}
/* ================================================================================
* Vendor Overrides ( CSS Library/ Plugin related stuff. EG: animated,slick,gravity forms etc. )
================================================================================ */
/* Vendor - Gravity Forms
--------------------------------------------------------------- */
/* Reset, skeletons, and normalize for gravity forms and form control elements. No need to edit.
--------------------------------------------------------------- */
.gform_wrapper.gravity-theme {
  /* If styles are getting overriden by default gforms styles, prepend `.gform_wrapper.gravity-theme` on field selectors -_- */
}
.gform_wrapper.gravity-theme .gfield :is(:is(input, select).large,
textarea) {
  inline-size: 100%;
}
:is(input:not([type=radio]):not([type=checkbox]):not([type=button]):not([type=image]):not([type=file]),
select,
textarea,
[aria-invalid=true]),
:is(.gform_wrapper, .gfield_required) .gfield_required, .gform_wrapper.gravity-theme .gfield_required .gfield_required_custom, .gform_wrapper.gravity-theme .gfield_label, .gform_wrapper.gravity-theme :is(.gfield, .field_description_above) :is(.description,
.gfield_description,
.gsection_description,
.instruction), .gform_wrapper.gravity-theme :is(.gfield_validation_message,
.validation_message) {
  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  overflow: unset;
  block-size: auto;
  max-block-size: none;
  border: 0;
}

.gfield:is(.gfield-custom-box-label-inset, .gfield-custom-box-label-adjacent) .gfield_label,
:is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
select,
textarea,
[aria-invalid=true]) {
  line-height: var(--field-line-height, inherit);
  border-radius: var(--field-border-radius, 0);
  color: var(--color-dark);
  padding-inline: calc(var(--field-padding-x, 1em) - var(--field-border-width, 1px));
  padding-block: calc(var(--field-padding-y, 1em) - var(--field-border-width, 1px));
  background: none;
  background-size: calc(100% + var(--field-border-width, 1px) * 2) calc(100% + var(--field-border-width, 1px) * 2);
  background-position: calc(var(--field-border-width, 1px) * -1) calc(var(--field-border-width, 1px) * -1);
  max-inline-size: 100%;
}

.gfield:is(.gfield-custom-box-label-adjacent) .gfield_label,
:is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
select,
textarea,
[aria-invalid=true]) {
  border-width: var(--field-border-width, 1px);
  border-style: solid;
  min-block-size: 0;
}

.gfield:is(.gfield-custom-box-label-adjacent):is(.focus) .gfield_label,
:is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
select,
textarea,
[aria-invalid=true]):focus {
  border-width: var(--field-border-width, 2px);
}

.gfield:is(.gfield-custom-box-label-inset) .gfield_label,
:is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
select,
textarea,
[aria-invalid=true]) {
  background-color: var(--color-light);
  color: var(--color-dark);
}

.gform_wrapper.gravity-theme :is(.gfield_validation_message, .validation_message) {
  /* reset validation messages enough to make matching design more bearable */
  background: none;
  border: 0;
}
.gform_wrapper.gravity-theme .gfield :is(.description, .gfield_description, .gsection_description, .instruction) {
  margin-block-start: 0.5em;
}
.gform_wrapper.gravity-theme .field_description_above :is(.description, .gfield_description, .gsection_description, .instruction) {
  margin-block-start: 0;
  margin-block-end: 0.5em;
}

/*  .ginput_ scaffolding. No need to edit 
--------------------------------------------------------------- */
.gform_wrapper.gravity-theme .ginput {
  /* If styles are getting overriden by default gforms styles, prepend `.gform_wrapper.gravity-theme` on field selectors -_- */
}
.gform_wrapper.gravity-theme .ginput_container_time {
  min-inline-size: calc(var(--field-padding-x) * 2 + 5ch);
  max-inline-size: calc(var(--field-padding-x) * 2 + 5ch);
}
:is(.field_sublabel_below) .gform_wrapper.gravity-theme .ginput_complex {
  align-items: center;
}
.gform_wrapper.gravity-theme .ginput_container_date input {
  inline-size: 100%;
}

/*  .gfield_ scaffolding. No need to edit
--------------------------------------------------------------- */
.gfield.gfield_error :is(label, legend), .gfield_validation_message,
.gfield .validation_message,
.gfield [aria-invalid=true] + label,
.gfield .gform_wrapper label + [aria-invalid=true] {
  color: var(--field-error-color) !important;
}
.gfield:is(.gfield-custom-box-label-adjacent):is(.gfield_error) .gfield_label,
:is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
select,
textarea):is([aria-invalid=true]) {
  border-color: var(--field-error-color) !important;
  /* box-shadow: inset 0 -4px 0 0 var(--field-error-color); */
}

.gfield .gchoice {
  margin: 0 0 0.5em;
}
.gform_wrapper.gravity-theme .gfield :is(.gfield_radio, .gfield_checkbox) label {
  font: unset;
  line-height: unset;
}

/* gfield customize colors
--------------------------------------------------------------- */
/* Form Customizations: Custom gravity forms and form control elements. Adjust as needed.
--------------------------------------------------------------- */
/* Variables. Will put in the form so non-gravity forms form control elements can utilize too */
:is(form, .gfield) {
  /* height of form field. designers will prefer to design form fields based on their height. this is to better support the wonders they create while being able to use padding to support multi-line/ edge case form fields */
  --field-border-width: 1px;
  /* duh */
  --field-border-radius: 4px;
  /* horizontal padding for the form field */
  --field-padding-x: 1.5em;
  /* color for required indicators */
  --field-padding-y: max(1em,1rem);
  /* color for required indicators */
  --field-required-color: var(--color-primary);
  /* color for errors */
  --field-error-color: var(--color-error);
  /* Note: this value has to be unitless for calc values to work.
  	* modify this value if the font seems a little too high or low in vertical alignment. 1 moves the text to the very top. 0 moves the text to the very bottom. 0.5 will center it based on the fonts' basline alignment */
  --field-line-height: 1.125;
  font-size: 1rem;
  font-family: var(--font-primary);
  color: inherit;
  letter-spacing: 0em;
  text-transform: none;
  font-style: normal;
  font-weight: normal;
  text-align: initial;
  text-decoration: none;
}
:is(form, .gfield) :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
select,
textarea) {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
:is(form, .gfield) select:has(option.gf_placeholder:checked) {
  color: var(--color-neutral) !important;
}
:is(form, .gfield):is(.gfield-custom-box-label-adjacent) .gfield_label,
:is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
select,
textarea) {
  border-color: var(--color-neutral);
}

:is(form, .gfield):is(.focus, .gfield_error), :is(form, .gfield):is(.gfield-custom-box-label-adjacent):is(.gfield_error) .gfield_label,
:is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
select,
textarea):is([aria-invalid=true], :focus) {
  --field-border-width: 2px;
}

:is(form, .gfield):is(.focus):is(.gfield-custom-box-label-adjacent):is(.focus) .gfield_label,
:is(form, .gfield):is(.focus) :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
select,
textarea,
[aria-invalid=true]):is(:focus) {
  border-color: var(--color-primary);
}

/*  .gfield - multiline
--------------------------------------------------------------- */
.gform_wrapper.gravity-theme .gfield:is(.gfield--type-textarea, .gfield--type-multiselect) :is(textarea, select) {
  /* If styles are getting overriden by default gforms styles, prepend `.gform_wrapper.gravity-theme` on field selectors -_- */
}
.gform_wrapper.gravity-theme .gfield:is(.gfield--type-textarea, .gfield--type-multiselect) :is(textarea, select).large {
  block-size: 8rem;
}
.gform_wrapper.gravity-theme .gfield:is(.gfield--type-textarea, .gfield--type-multiselect) :is(textarea, select).medium {
  block-size: 7rem;
}
.gform_wrapper.gravity-theme .gfield:is(.gfield--type-textarea, .gfield--type-multiselect) :is(textarea, select).small {
  block-size: 6rem;
}
/*  .gfield - label
--------------------------------------------------------------- */
.gform_wrapper.gravity-theme .gfield_label {
  /* If styles are getting overriden by default gforms styles, prepend `.gform_wrapper.gravity-theme` on field selectors -_- */
  /* customize type for .gfield and scaffolding for descending elements */
  /* custom font styles for gfield_label */
  line-height: var(--field-line-height, inherit);
  font-weight: 700;
  margin-block-end: 1em;
}
/*  .gform_ overrides. Adjust as needed
--------------------------------------------------------------- */
.gform_wrapper.gravity-theme .gform {
  /* If styles are getting overriden by default gforms styles, prepend `.gform_wrapper.gravity-theme` on field selectors -_- */
}
.gform_wrapper.gravity-theme .gform_fields {
  column-gap: 1rem;
  row-gap: 1.375rem;
}

/* .gfield_required / .required-glyph Required Indicator
--------------------------------------------------------------- */
.required-glyph,
.gfield-custom-label-indicator.ginput_container::after,
.gform_wrapper.gravity-theme .gfield_required {
  /* adjust required styles  */
  font-size: 1em;
  line-height: var(--field-line-height, inherit);
  color: var(--field-required-color);
  font-style: normal;
  font-weight: 700;
  align-self: center;
  padding: 0;
  order: 99;
}
/* custom helpers - Required Message
--------------------------------------------------------------- */
.required-message {
  font-size: 0.75rem;
  color: var(--field-required-color);
  text-transform: uppercase;
  font-weight: 700;
}
/* custom helpers - Disclaimer Message
--------------------------------------------------------------- */
.disclaimer-message {
  font-size: 1rem;
}
/* Theme Options custom helpers - label required indicator
--------------------------------------------------------------- */
/* required and custom label indicator */
.gfield-custom-label-indicator:is(.ginput_container::before,
.ginput_container::after,
.gfield_label::after,
.gfield_label > .gfield_required) {
  display: block;
  pointer-events: none;
}
.ginput_container {
  position: relative;
}
.ginput_container::before, .ginput_container::after {
  position: absolute;
  inset-inline-end: var(--field-padding-x);
  inset-block-start: calc((var(--field-height) - 1em * var(--field-line-height)) * 0.5);
  z-index: 3;
  pointer-events: none;
}

.gfield_label > .gfield_required, .gfield_label::after {
  margin-inline-start: 0.25em;
}

.gfield_contains_required .gfield-custom-label-indicator[data-required-glyph] {
  /* field ui indicator */
  /* required indicator */
}
.gfield_contains_required .gfield-custom-label-indicator[data-required-glyph]::before {
  inset-inline-end: calc(var(--field-padding-x) + 3em);
}
.gfield_contains_required .gfield-custom-label-indicator[data-required-glyph]::after {
  content: attr(data-required-glyph);
}
.gfield-custom-label-indicator.ginput_container::before {
  color: var(--color-dark-alt);
}
.gfield-custom-label-indicator.ginput_container::after, .gfield-custom-label-indicator.gfield_label > .gfield_required {
  color: var(--field-required-color);
}

.gfield-custom-no-label-indicator.gfield_label > .gfield_required {
  display: none;
}

/* related indicators. Make sure required indicator does not conflict
--------------------------------------------------------------- */
.gfield--type-select select {
  padding-inline-end: calc(var(--field-padding-x) + 1em);
}

/* single line select indicator
--------------------------------------------------------------- */
.gfield--type-select .ginput_container::before {
  display: inline-block;
  order: 9;
  align-self: center;
  margin-inline-start: 0.75em;
  margin-inline-end: var(--field-padding-x);
  transform-origin: center center;
  flex: 0 0 auto;
  content: "";
  font-size: 0.5rem;
  transform-origin: 67% 67%;
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-dark);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
  inset-block: 0;
  margin-block: auto;
}

/* phone indicator
--------------------------------------------------------------- */
.gfield--type-phone.gfield-custom-box-label-inset .gfield_label::after {
  content: "(___) ___-____";
  position: static;
}

/* Theme Options custom helpers - ilawyer custom styles
--------------------------------------------------------------- */
/* custom styles skeletons. No need to edit */
.gform_wrapper.gravity-theme .gfield.gfield-custom-box {
  /* If styles are getting overriden by default gforms styles, prepend `.gform_wrapper.gravity-theme` on field selectors -_- */
  position: relative;
}
.gform_wrapper.gravity-theme .gfield.gfield-custom-box .gfield_label {
  align-self: start;
}
.gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-inset {
  /* Overlay label on the input field NOTE: May soon be deprecated. enable or disable via theme options as needed  */
}
.gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-inset .gfield_label {
  position: absolute;
  inset-block-start: var(--field-border-width);
  inset-inline: var(--field-border-width);
  z-index: 1;
  margin-block-end: 0;
  pointer-events: none;
  /* Take care of edge case overflowing labels */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-inline-size: calc(100% - var(--field-border-width) * 2);
  padding-inline-end: calc(var(--field-padding-x) * 2 - var(--field-border-width));
}
.gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-inset:is(.active, .focus, :focus-within) .gfield_label {
  opacity: 0;
}
.gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-inset :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
select,
textarea,
[aria-invalid=true]):not(:focus)::-webkit-input-placeholder {
  /* fix multiline placeholders from peeking behind the label */
  color: transparent;
}
.gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-inset :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
select,
textarea,
[aria-invalid=true]):not(:focus)::-moz-placeholder {
  /* fix multiline placeholders from peeking behind the label */
  color: transparent;
}
.gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-inset :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
select,
textarea,
[aria-invalid=true]):not(:focus)::-ms-input-placeholder {
  /* fix multiline placeholders from peeking behind the label */
  color: transparent;
}
.gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent {
  /* set label beside input field. not to be confused with left align labels settingf for forms. this is our custom stuff and it's prettier than how gravity forms does it.  */
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: max-content;
}
.gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent .gfield_label,
.gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent .ginput_container {
  /* grid/flex fix */
  min-inline-size: 0;
}
.gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent .gfield_label {
  margin-block-end: 0;
  background-color: var(--color-light-alt);
}
.gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent *:not(.gfield_label):not(.ginput_container) {
  grid-column: 1/-1;
}
@media only screen and (min-width: 48rem) {
  .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent:is(.gfield--type-textarea,
  .gfield--type-multiselect,
  .gfield--type-post_title,
  .gfield--type-post_content,
  .gfield--type-post_excerpt) :is(.gfield_label, .ginput_container) {
    grid-column: 1/-1;
  }
  .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent:is(.gfield--type-textarea,
  .gfield--type-multiselect,
  .gfield--type-post_title,
  .gfield--type-post_content,
  .gfield--type-post_excerpt) .gfield_label {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
  .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent:is(.gfield--type-textarea,
  .gfield--type-multiselect,
  .gfield--type-post_title,
  .gfield--type-post_content,
  .gfield--type-post_excerpt) .ginput_container {
    grid-column: 2;
  }
  .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent:is(.gfield--type-textarea,
  .gfield--type-multiselect,
  .gfield--type-post_title,
  .gfield--type-post_content,
  .gfield--type-post_excerpt) :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
  select,
  textarea) {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    border-block-start: 0;
  }
  .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent:not(.gfield--type-textarea,
  .gfield--type-multiselect,
  .gfield--type-post_title,
  .gfield--type-post_content,
  .gfield--type-post_excerpt) :is(.gfield_label, .ginput_container) {
    grid-row: 1;
  }
  .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent:not(.gfield--type-textarea,
  .gfield--type-multiselect,
  .gfield--type-post_title,
  .gfield--type-post_content,
  .gfield--type-post_excerpt) .gfield_label {
    grid-column: 1;
    max-inline-size: max-content;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }
  .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent:not(.gfield--type-textarea,
  .gfield--type-multiselect,
  .gfield--type-post_title,
  .gfield--type-post_content,
  .gfield--type-post_excerpt) .ginput_container {
    grid-column: 2;
  }
  .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent:not(.gfield--type-textarea,
  .gfield--type-multiselect,
  .gfield--type-post_title,
  .gfield--type-post_content,
  .gfield--type-post_excerpt) :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
  select,
  textarea) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-inline-start: 0;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent :is(.gfield_label, .ginput_container) {
    grid-column: 1/-1;
  }
  .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent .gfield_label {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
  .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent .ginput_container {
    grid-column: 2;
  }
  .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
  select,
  textarea,
  [aria-invalid=true]) {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    border-block-start: 0;
  }
}

/* Inline Choice Form controls
--------------------------------------------------------------- */
.gfield.gfield-custom-inline-choices :is(.gfield_radio) {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
}
.gfield.gfield-custom-inline-choices :is(.gchoice) {
  display: inline-flex;
  gap: 1ch;
}
.gfield.gfield-custom-inline-choices :is(.gfield-choice-input + label) {
  flex: 0 0 auto;
  max-inline-size: none;
}

/* Hidden Gravity Forms Stuff
--------------------------------------------------------------- */
.gform_hidden,
.gform_validation_container,
.gform_validation_errors,
.gform_ajax_spinner,
.gform_required_legend {
  /* must hide elements */
  display: none !important;
}

/* custom styles by type
--------------------------------------------------------------- */
.gfield--type-captcha {
  justify-self: center;
}
/* Vendor - Swiper
--------------------------------------------------------------- */
/* Swiper Customizations
Variable docs: https://oxygen4fun.supadezign.com/tips/swiperjs-tips-and-good-practice/#customcss
--------------------------------------------------------------- */
:root {
  --swiper-theme-color: var(--scheme-sp, var(--color-primary));
  --swiper-navigation-sides-offset: 0px;
  --swiper-pagination-bottom: 1.5rem;
  --swiper-pagination-top: auto;
  --swiper-pagination-right: 1rem;
  --swiper-pagination-left: auto;
  --swiper-pagination-bullet-size: 0.375rem;
  --swiper-pagination-bullet-width: var(--swiper-pagination-bullet-size);
  --swiper-pagination-bullet-height: var(--swiper-pagination-bullet-size);
  --swiper-pagination-bullet-border-radius: 9999em;
  --swiper-pagination-bullet-horizontal-gap: calc(
  	var(--swiper-pagination-bullet-size) * 1.5
  );
  --swiper-pagination-bullet-vertical-gap: var(--swiper-pagination-bullet-size);
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-inactive-color: currentColor;
  --swiper-pagination-progressbar-size: var(--swiper-pagination-bullet-size);
  --swiper-pagination-progressbar-bg-color: var(--color-neutral-lighter);
  --swiper-scrollbar-border-radius: calc(var(--swiper-pagination-bullet-size) * 0.5);
  --swiper-scrollbar-bg-color: var(--swiper-pagination-progressbar-bg-color);
  --swiper-scrollbar-drag-bg-color: var(--color-neutral);
  --swiper-scrollbar-size: 2px;
  --swiper-scrollbar-sides-offset: 1rem;
  --swiper-scrollbar-bottom: 1.5rem;
  --swiper-scrollbar-top: auto;
  /* distance of arrows from the slider. set as a padding  */
  /* distance to compensate the arrow distance against the width of the .carousels and the width of the component's container
  	Tip: setting equal to --swiper-custom-arrow-offset-x will align the slides to the container. so pretty. */
}
:where(.content-palette-dark) :where(.swiper) {
  --swiper-theme-color: var(--scheme-fg, var(--color-primary-alt));
}

/* Swiper Enhancements
--------------------------------------------------------------- */
.swiper {
  opacity: 0;
  padding-inline: var(--swiper-custom-arrow-offset-x, min(var(--container-fallback), var(--container-gutter)));
  margin-inline: calc(var(--swiper-custom-arrow-offset-x-negate, var(--swiper-custom-arrow-offset-x, min(var(--container-fallback), var(--container-gutter)))) * -1);
}
.swiper.swiper-initialized {
  opacity: 1;
}
.swiper:has(.swiper-button-prev.swiper-button-disabled):has(.swiper-button-next.swiper-button-disabled):is(.swiper-button-prev,
.swiper-button-next).swiper-button-disabled {
  display: none;
}
:is(:where(.swiper-horizontal) > .swiper-pagination-bullets, .swiper-pagination-bullets:where(.swiper-pagination-horizontal), .swiper-pagination-custom, .swiper-pagination-fraction):not(.swiper-pagination-lock) {
  inset-block-end: var(--swiper-pagination-bottom);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--swiper-pagination-bullet-horizontal-gap);
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0;
}

.swiper-button-next, .swiper-button-prev {
  /* customize swiper buttons to utilize theme's styles for the button */
  --button-baseline-offset: 0.5 !important;
  --swiper-navigation-size: var(--button-height);
  z-index: 1;
  inline-size: auto;
}
.swiper-button-next::before, .swiper-button-next::after, .swiper-button-prev::before, .swiper-button-prev::after {
  content: none;
}
.swiper-scrollbar-drag {
  block-size: calc(var(--swiper-scrollbar-size) * 2);
  inset-block: -50%;
  margin-block: auto;
}

/* Swiper Custom Helpers
--------------------------------------------------------------- */
.swiper-custom-scrollbar-static .swiper-scrollbar {
  position: static;
  margin-block-start: var(--swiper-scrollbar-bottom);
  margin-block-end: var(--swiper-scrollbar-size);
  margin-inline: auto;
  margin-inline-start: var(--swiper-scrollbar-sides-offset, 1%);
}
.swiper-custom-pagination-static .swiper-pagination {
  position: static;
  margin-block-start: var(--swiper-pagination-bottom);
}
@media only screen and (min-width: 48rem) and (max-width: 74.9375rem) {
  .swiper-custom-pagination-static-sm .swiper-pagination {
    position: static;
    margin-block-start: var(--swiper-pagination-bottom);
  }
}
@media only screen and (max-width: 47.9375rem) {
  .swiper-custom-pagination-static-xs .swiper-pagination {
    position: static;
    margin-block-start: var(--swiper-pagination-bottom);
  }
}
.swiper-custom-buttons-static .swiper-wrapper {
  block-size: auto;
}
.swiper-custom-buttons-static .swiper-custom-buttons {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}
.swiper-custom-buttons-static .swiper-custom-buttons .swiper-button-prev, .swiper-custom-buttons-static .swiper-custom-buttons .swiper-button-next {
  margin-inline: 0;
}
.swiper-custom-buttons-static .swiper-button-next, .swiper-custom-buttons-static .swiper-button-prev {
  position: static;
  transform: none;
  margin: 0;
}
.swiper-custom-buttons-static .swiper-button-next ~ .swiper-pagination, .swiper-custom-buttons-static .swiper-button-prev ~ .swiper-pagination {
  display: inline-flex;
  inline-size: auto;
}
.swiper-custom-buttons-static .swiper-button-prev {
  margin-inline-end: 0.375rem;
}
.swiper-custom-buttons-static .swiper-button-next {
  margin-inline-start: 0.375rem;
}
@media only screen and (min-width: 48rem) and (max-width: 74.9375rem) {
  .swiper-custom-buttons-static-sm .swiper-wrapper {
    block-size: auto;
  }
  .swiper-custom-buttons-static-sm .swiper-custom-buttons {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
  }
  .swiper-custom-buttons-static-sm .swiper-custom-buttons .swiper-button-prev, .swiper-custom-buttons-static-sm .swiper-custom-buttons .swiper-button-next {
    margin-inline: 0;
  }
  .swiper-custom-buttons-static-sm .swiper-button-next, .swiper-custom-buttons-static-sm .swiper-button-prev {
    position: static;
    transform: none;
    margin: 0;
  }
  .swiper-custom-buttons-static-sm .swiper-button-next ~ .swiper-pagination, .swiper-custom-buttons-static-sm .swiper-button-prev ~ .swiper-pagination {
    display: inline-flex;
    inline-size: auto;
  }
  .swiper-custom-buttons-static-sm .swiper-button-prev {
    margin-inline-end: 0.375rem;
  }
  .swiper-custom-buttons-static-sm .swiper-button-next {
    margin-inline-start: 0.375rem;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .swiper-custom-buttons-static-xs .swiper-wrapper {
    block-size: auto;
  }
  .swiper-custom-buttons-static-xs .swiper-custom-buttons {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
  }
  .swiper-custom-buttons-static-xs .swiper-custom-buttons .swiper-button-prev, .swiper-custom-buttons-static-xs .swiper-custom-buttons .swiper-button-next {
    margin-inline: 0;
  }
  .swiper-custom-buttons-static-xs .swiper-button-next, .swiper-custom-buttons-static-xs .swiper-button-prev {
    position: static;
    transform: none;
    margin: 0;
  }
  .swiper-custom-buttons-static-xs .swiper-button-next ~ .swiper-pagination, .swiper-custom-buttons-static-xs .swiper-button-prev ~ .swiper-pagination {
    display: inline-flex;
    inline-size: auto;
  }
  .swiper-custom-buttons-static-xs .swiper-button-prev {
    margin-inline-end: 0.375rem;
  }
  .swiper-custom-buttons-static-xs .swiper-button-next {
    margin-inline-start: 0.375rem;
  }
}
.swiper-custom-hide-slides:is(.swiper-initialized, :has(.swiper-initialized)) .swiper-slide:not(.swiper-slide-visible) {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease-in-out;
}
@media only screen and (min-width: 48rem) and (max-width: 74.9375rem) {
  .swiper-custom-hide-slides-sm:is(.swiper-initialized, :has(.swiper-initialized)) .swiper-slide:not(.swiper-slide-visible) {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease-in-out;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .swiper-custom-hide-slides-xs:is(.swiper-initialized, :has(.swiper-initialized)) .swiper-slide:not(.swiper-slide-visible) {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease-in-out;
  }
}
.swiper-custom-ticker {
  --swiper-wrapper-transition-timing-function: linear;
}
@media only screen and (min-width: 75rem) {
  .swiper-custom-stagger :where(.swiper-slide > :only-child) {
    transition-duration: 0.1s;
    transition-property: transform, opacity;
    opacity: 0;
    transform: translateX(50px);
  }
  .swiper-custom-stagger.visible :where(.swiper-slide > :only-child) {
    transition-duration: 1s;
    transition-delay: calc(1s + 0.25s * var(--swiper-custom-slide-i, 0));
    opacity: 1;
    transform: translateX(0px);
  }
}
.swiper-custom-remove-background .swiper-slide {
  mix-blend-mode: multiply;
}
.swiper-custom-equal-heights .swiper-slide {
  block-size: auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.swiper-custom-equal-heights .swiper-slide > :where(:only-child) {
  flex: 1 1;
}
@media only screen and (min-width: 75rem) {
  .swiper-custom-equal-heights-nontouch .swiper-wrapper {
    height: 100% !important;
  }
  .swiper-custom-equal-heights-nontouch .swiper-slide {
    block-size: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .swiper-custom-equal-heights-nontouch .swiper-slide > :where(:only-child) {
    flex: 1 1;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .swiper-custom-equal-heights-touch .swiper-wrapper {
    height: 100% !important;
  }
  .swiper-custom-equal-heights-touch .swiper-slide {
    block-size: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .swiper-custom-equal-heights-touch .swiper-slide > :where(:only-child) {
    flex: 1 1;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 74.9375rem) {
  .swiper-custom-equal-heights-sm .swiper-wrapper {
    height: 100% !important;
  }
  .swiper-custom-equal-heights-sm .swiper-slide {
    block-size: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .swiper-custom-equal-heights-sm .swiper-slide > :where(:only-child) {
    flex: 1 1;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .swiper-custom-equal-heights-xs .swiper-wrapper {
    height: 100% !important;
  }
  .swiper-custom-equal-heights-xs .swiper-slide-slide {
    block-size: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .swiper-custom-equal-heights-xs .swiper-slide-slide > :where(:only-child) {
    flex: 1 1;
  }
}

/* ================================================================================
* Content Styles
================================================================================ */
/* Schemes https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/schemes.md
--------------------------------------------------------------- */
/* H tag scaffolding
--------------------------------------------------------------- */
:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6) {
  margin-block-end: var(--fancy-border-margin-y, 0);
}

:is(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6),
.content :where(h1, h2, h3, h4, h5, h6)) {
  clear: both;
}
:is(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6),
.content :where(h1, h2, h3, h4, h5, h6)) :where(a) {
  font: inherit;
}
:is(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6),
.content :where(h1, h2, h3, h4, h5, h6)) :where(a):not(:hover, :focus) {
  color: inherit;
  text-decoration: none;
}
:is(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6),
.content :where(h1, h2, h3, h4, h5, h6)):is(.h-palette-inherit) {
  color: inherit;
}
:is(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6),
.content :where(h1, h2, h3, h4, h5, h6)):is(.h-palette-neutral) {
  color: var(--color-neutral);
}
:is(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6),
.content :where(h1, h2, h3, h4, h5, h6)):is(.h-palette-primary) {
  color: var(--color-primary);
}
:is(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6),
.content :where(h1, h2, h3, h4, h5, h6)):is(.h-palette-primary-alt) {
  color: var(--color-primary-alt);
}
:is(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6),
.content :where(h1, h2, h3, h4, h5, h6)):is(.h-palette-secondary) {
  color: var(--color-secondary);
}
:is(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6),
.content :where(h1, h2, h3, h4, h5, h6)):is(.h-palette-secondary-alt) {
  color: var(--color-secondary-alt);
}
:is(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6),
.content :where(h1, h2, h3, h4, h5, h6)):is(.h-palette-accent) {
  color: var(--color-accent);
}
:is(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6),
.content :where(h1, h2, h3, h4, h5, h6)):is(.h-palette-accent-alt) {
  color: var(--color-accent-alt);
}
:is(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6),
.content :where(h1, h2, h3, h4, h5, h6)):is(.h-palette-neutral-light) {
  color: var(--color-neutral-light);
}
:is(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6),
.content :where(h1, h2, h3, h4, h5, h6)):is(.h-palette-neutral-lighter) {
  color: var(--color-neutral-lighter);
}
:is(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6),
.content :where(h1, h2, h3, h4, h5, h6)):is(.h-palette-neutral-lightest) {
  color: var(--color-neutral-lightest);
}
:is(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6),
.content :where(h1, h2, h3, h4, h5, h6)):is(.h-palette-neutral-dark) {
  color: var(--color-neutral-dark);
}
:is(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6),
.content :where(h1, h2, h3, h4, h5, h6)):is(.h-palette-neutral-darker) {
  color: var(--color-neutral-darker);
}
:is(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6),
.content :where(h1, h2, h3, h4, h5, h6)):is(.h-palette-neutral-darkest) {
  color: var(--color-neutral-darkest);
}

/* H1 - can be reused by section titles, primary-heading etc.
--------------------------------------------------------------- */
:where(*.h1, :is(.content, .editor-styles-wrapper) :where(h1)) {
  font-size: 2.625rem;
  line-height: 0.85;
  font-family: var(--font-secondary);
  color: var(--scheme-fg-contrast, var(--color-secondary-alt));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 600;
}
:where(.content-palette-dark) :where(*.h1, :is(.content, .editor-styles-wrapper) :where(h1)) {
  color: var(--scheme-fg, inherit);
}
@media only screen and (min-width: 48rem) {
  :where(*.h1, :is(.content, .editor-styles-wrapper) :where(h1)) {
    font-size: 4.0625rem;
    line-height: 0.85;
  }
}
/* H2 - can be reused by certain titles
--------------------------------------------------------------- */
:where(*.h2, :is(.content, .editor-styles-wrapper) :where(h2)) {
  font-size: 1.5625rem;
  line-height: 1.15;
  font-family: var(--font-accent);
  color: var(--scheme-sp, var(--color-secondary));
  letter-spacing: 0em;
  text-transform: none;
  font-style: normal;
  font-weight: 700;
}
:where(.content-palette-dark) :where(*.h2, :is(.content, .editor-styles-wrapper) :where(h2)) {
  color: var(--scheme-sp, var(--color-accent));
}
/* H3 - can be reused by certain titles
--------------------------------------------------------------- */
:where(*.h3, :is(.content, .editor-styles-wrapper) :where(h3)) {
  font-size: 1.3125rem;
  line-height: 1.15;
  font-family: var(--font-accent);
  color: var(--scheme-sp, var(--color-secondary-alt));
  letter-spacing: 0em;
  text-transform: none;
  font-style: normal;
  font-weight: 700;
}
:where(.content-palette-dark) :where(*.h3, :is(.content, .editor-styles-wrapper) :where(h3)) {
  color: var(--scheme-sp, var(--color-accent));
}
/* H4s - if not in the styleguide, can be repurposed for other smaller headings present in the design. commonly case result types/titles, blog post meta, etc
--------------------------------------------------------------- */
:where(*.h4, :is(.content, .editor-styles-wrapper) :where(h4)),
:where(*.h6, :is(.content, .editor-styles-wrapper) :where(h6)) {
  font-size: 1.125rem;
  line-height: 1.5;
  font-family: var(--font-primary);
  color: var(--scheme-sp, var(--color-secondary-alt));
  letter-spacing: 0em;
  text-transform: none;
  font-style: normal;
  font-weight: 700;
}
/* H5s - if not in the styleguide, can be repurposed for other smaller headings present in the design. commonly testimonial quote sources, contact info titles, etc
--------------------------------------------------------------- */
:where(*.h5, :is(.content, .editor-styles-wrapper) :where(h5)) {
  font-size: 0.875rem;
  line-height: calc(1em + 5px);
  font-family: var(--font-accent);
  color: var(--scheme-fg, inherit);
  letter-spacing: 0em;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 700;
}
/* H6s - if not in the styleguide, can be repurposed for other smaller headings present in the design. commonly contact info titles, etc
--------------------------------------------------------------- */
/* Blockquote -  can be reused in testimonial-highlights, long call to action sections, any general quote, etc.
--------------------------------------------------------------- */
:where(*.blockquote, :is(.content, .editor-styles-wrapper) :where(blockquote)) {
  font-size: 2.8125rem;
  line-height: 0.9;
  font-family: var(--font-secondary);
  color: var(--scheme-sb-contrast, var(--color-secondary-alt));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 600;
  text-wrap: balance;
  margin-block: var(--fancy-border-margin-y, 0);
}
:where(.content-palette-dark) :where(*.blockquote, :is(.content, .editor-styles-wrapper) :where(blockquote)) {
  color: var(--scheme-sb-contrast, inherit);
}
:where(*.blockquote, :is(.content, .editor-styles-wrapper) :where(blockquote)):is(.has-text-align-center,
.has-text-align-center *,
:has([style*="text-align: center"])) {
  border-inline-start: 0;
  padding-inline-start: 0;
  margin-inline: auto;
  text-align: center;
}
:where(*.blockquote, :is(.content, .editor-styles-wrapper) :where(blockquote)):is(.has-text-align-left,
.has-text-align-left *,
:has([style*="text-align: left"])) {
  border-inline-start: 2px;
  padding-inline-start: 1em;
  text-align: left;
}
:where(*.blockquote, :is(.content, .editor-styles-wrapper) :where(blockquote)):is(.has-text-align-right,
.has-text-align-right *,
:has([style*="text-align: right"])) {
  border-inline-start: 0;
  padding-inline-start: 0;
  text-align: right;
}
:where(*.blockquote, :is(.content, .editor-styles-wrapper) :where(blockquote)) > p {
  font: inherit;
  color: inherit;
  margin-block: 0 0.5em;
  padding: 0;
}
:where(*.blockquote, :is(.content, .editor-styles-wrapper) :where(blockquote)) > p:is(:last-child, :has(+ cite)) {
  margin-block-end: 0;
}
@media only screen and (max-width: 47.9375rem) {
  :where(*.blockquote, :is(.content, .editor-styles-wrapper) :where(blockquote)) {
    padding-inline: 0;
  }
}

/* Cite /  Blockquote Source - Optional
Note: Some designs may include a blockquote quote source. suprise, there's an html tag for that (:
can be reused in testimonial-source, any general quote source, etc.
--------------------------------------------------------------- */
:where(*.cite, :is(.content, .editor-styles-wrapper) :where(cite)) {
  font-size: 1rem;
  line-height: calc(1em + 5px);
  font-family: var(--font-accent);
  color: var(--scheme-sp, var(--color-primary));
  text-transform: uppercase;
  font-style: normal;
  font-weight: 800;
  text-align: inherit;
  display: inline-block;
}
:where(.content-palette-dark) :where(*.cite, :is(.content, .editor-styles-wrapper) :where(cite)) {
  color: var(--scheme-sp, var(--color-accent));
}
/* Lead - Optional
Note: Some designs may include another style for a little bit fancier body text that may not be tagged as a normal html element like blockquote or h tag
Use this if it helps
--------------------------------------------------------------- */
*.lead {
  color: var(--scheme-fg, inherit);
}
:where(.content-palette-dark) *.lead {
  color: var(--scheme-sp-contrast, inherit);
}
/* Content - Anchor links
--------------------------------------------------------------- */
:where(:is(.content, .editor-styles-wrapper) :where(a)) {
  color: var(--scheme-sp, var(--color-primary));
  text-decoration: underline;
  transition: color 0.25s ease-in-out;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}
:where(:is(.content, .editor-styles-wrapper) :where(a)):where(:hover, :focus) {
  color: var(--scheme-sp, var(--color-secondary));
  text-decoration: underline;
}
:where(.content-palette-dark) :where(:is(.content, .editor-styles-wrapper) :where(a)):not(:where(:hover, :focus)) {
  color: var(--scheme-sp, var(--color-accent));
  text-decoration: none;
}
:where(.content-palette-dark) :where(:is(.content, .editor-styles-wrapper) :where(a)):where(:hover, :focus) {
  color: var(--scheme-sp, inherit);
  text-decoration: underline;
}

/* The Content - Lists Scaffolding
--------------------------------------------------------------- */
:is(:is(.content, .editor-styles-wrapper) :where(ol, ul, dd)) :is(ol, ul, dd) {
  margin-block-end: 0;
}
:is(:is(.content, .editor-styles-wrapper) :where(ol, ul, dd)) {
  list-style-type: revert;
  padding-inline-start: 27px;
}

/* The Content - List Items
--------------------------------------------------------------- */
:is(:is(.content, .editor-styles-wrapper) :where(li, dd, dt)) {
  list-style: inherit;
  position: relative;
}
/* The Content - List Items Bulleted
--------------------------------------------------------------- */
:is(:is(.content, .editor-styles-wrapper) :where(li))::marker {
  display: inline-block;
  font-size: 1em;
  color: inherit;
}
:where(.content-palette-dark) :is(:is(.content, .editor-styles-wrapper) :where(li))::marker {
  color: inherit;
}

/* The Content - Unordered List
--------------------------------------------------------------- */
:is(:is(.content, .editor-styles-wrapper) :where(ul)) {
  list-style-type: disc;
}
/* The Content - Ordered List
--------------------------------------------------------------- */
:is(:is(.content, .editor-styles-wrapper) :where(ol)) {
  counter-reset: listItem;
}
:is(:is(.content, .editor-styles-wrapper) :where(ol)) > li {
  counter-increment: listItem;
}
/* The Content - Tables Skeletons. Do not edit
--------------------------------------------------------------- */
:where(:is(.content, .editor-styles-wrapper) table) {
  border-collapse: collapse;
  table-layout: fixed;
  hyphens: auto;
  font: inherit;
  border-color: var(--table-border-color);
  border-width: var(--table-border-width-y) var(--table-border-width-x);
}

:where(:is(.content, .editor-styles-wrapper) :where(table, th, td)) {
  border-style: solid;
}

:where(:is(.content, .editor-styles-wrapper) :where(tr):first-child > :where(th, td)) {
  border-block-start-color: var(--table-border-color);
}

:where(:is(.content, .editor-styles-wrapper) :where(th, td)) {
  border-width: var(--table-border-width-y) var(--table-border-width-x) 0;
  border-color: var(--table-cell-border-color-y) var(--table-border-color);
  background-color: var(--table-cell-background);
}
:where(:is(.content, .editor-styles-wrapper) :where(th, td)):nth-last-child(n+2) {
  border-right-color: var(--table-cell-border-color-x);
}
:where(:is(.content, .editor-styles-wrapper) :where(th, td)) > *:last-child {
  margin-block-end: 0;
}

.table-wrapper {
  overflow-inline: auto;
  max-inline-size: 100%;
}
.table-wrapper table {
  margin-block-end: 0;
}

/* The Content - Tables Customizations
--------------------------------------------------------------- */
:where(:is(.content, .editor-styles-wrapper) table) {
  /* left and right border width */
  --table-border-width-x: 1px;
  /* top and bottom border width */
  --table-border-width-y: 1px;
  /* table container color */
  --table-border-color: var(--scheme-md-bg, var(--color-neutral-lighter));
  /* background color for cells */
  --table-cell-background: var(--scheme-bg, transparent);
  /* border color for left and right */
  --table-cell-border-color-x: var(--scheme-bg-contrast, rgba(127, 127, 127, 0.3));
  /* border color fortop and bottom */
  --table-cell-border-color-y: transparent;
  font-size: 0.9em;
}
:where(:is(.content, .editor-styles-wrapper) table) :where(th, td) {
  padding-block: 0.5em;
  padding-inline: 1em;
}
:where(:is(.content, .editor-styles-wrapper) table) :where(th) {
  --table-cell-background: var(--table-border-color);
  --table-cell-border-color-y: var(--table-border-color);
  --table-cell-border-color-x: var(--table-border-color);
  font-size: 0.75em;
  font-family: var(--font-primary);
  color: var(--color-dark-alt);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 700;
  text-align: inherit;
}
:where(:is(.content, .editor-styles-wrapper) table) :where(tr:nth-child(odd) td) {
  --table-cell-background: var(--scheme-bg-contrast, rgba(127, 127, 127, 0.3));
  --table-cell-border-color-y: var(--scheme-bg-contrast, transparent);
  --table-cell-border-color-x: var(--scheme-bg-contrast, rgba(127, 127, 127, 0.3));
  color: var(--scheme-fg, inherit);
}
:where(:is(.content, .editor-styles-wrapper) table) :where(caption) {
  padding: 0.5em;
}

/* The Content - Other Obscure tags in case it can be utilized for design
--------------------------------------------------------------- */
/* images.
- NOTE: DO NOT MANIPULATE THE MARGIN, PADDING, DISPLAY PROPERTIES. THIS WILL BREAK THE CORE CLASSES AND ANY OTHER CONTENT RELATED STYLES 
- USE TO ONLY PIZZAZZ THE IMAGES ACCORDING TO DESIGN
*/
:where(:is(.content, .editor-styles-wrapper) :where(img)) {
  border-radius: 10px;
}
@media only screen and (max-width: 47.9375rem) {
  :where(:is(.content, .editor-styles-wrapper) :where(img)) {
    max-width: 100% !important;
  }
}

/* bold, strong */
/* italic, em */
/* stacked bold, strong + italic, em. design will inevitably add another emphaized text styling in the content. use to leverage if needed */
/* address */
/* abbreviations */
/* acronym */
/* big */
/* code, kbd, pre */
:where(:is(.content, .editor-styles-wrapper) :where(kbd)) {
  padding-inline: 1em;
  border-radius: 0.2em;
  box-shadow: 0 0.2em 0 0 rgba(127, 127, 127, 0.4);
}
/* strike, del */
:where(:is(.content, .editor-styles-wrapper) :where(del, s)) {
  text-decoration: line-through;
}
/* ins */
/* ins */
/* small */
/* sub */
/* sup */
/* tt */
/* var */
/* The Content - Type Settings
--------------------------------------------------------------- */
:where(.content, .editor-styles-wrapper) {
  max-inline-size: 100%;
}
:where(.content, .editor-styles-wrapper) {
  font-size: 1.125rem;
  line-height: 1.5;
  font-family: var(--font-primary);
  color: var(--scheme-fg, var(--color-black));
  font-weight: 400;
}
/* The Content - Margin Block specificities + .content-style-no-block-margins variation
	- Very specific margin block stuff.
--------------------------------------------------------------- */
:where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
.editor-styles-wrapper) :where(p,
ul,
ol,
dl,
address,
input:not([type=checkbox]):not([type=radio]):not([type=submit]),
select,
textarea,
form,
pre,
.wp-block-image,
.table-wrapper,
table,
.wistia_responsive_padding) {
  margin-block-end: 45px;
}
@media only screen and (min-width: 75rem) {
  :where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
  .editor-styles-wrapper) :where(p,
  ul,
  ol,
  dl,
  address,
  input:not([type=checkbox]):not([type=radio]):not([type=submit]),
  select,
  textarea,
  form,
  pre,
  .wp-block-image,
  .table-wrapper,
  table,
  .wistia_responsive_padding) {
    margin-block-end: 40px;
  }
}
:where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
.editor-styles-wrapper) :where(p):has(+ :is(ul, ol)) {
  margin-block-end: 10px;
}
:where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
.editor-styles-wrapper) :where(p):has(+ :is(h3, h4, *.h3, *.h4)) {
  margin-block-end: 20px;
}
:where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
.editor-styles-wrapper) :where(hr:nth-last-child(n+2)) {
  margin-block-end: 2em;
}
:where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
.editor-styles-wrapper) :where(hr:nth-child(n+2)) {
  margin-block-start: 2em;
}
:where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
.editor-styles-wrapper) :where(li, dd, dt) :where(ul, ol, dd), :where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
.editor-styles-wrapper) :where(li, dd, dt):nth-child(n+2) {
  margin-block-start: 0;
}
:where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
.editor-styles-wrapper) :where(li, dd, dt):last-child > *:last-child {
  margin-block-end: 0;
}
:where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
.editor-styles-wrapper) :where(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6, h1, h2, h3, h4, h5, h6, hr):not(:is(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6, *.blockquote, *.cite, h1, h2, h3, h4, h5, h6, blockquote, cite, hr) + *)) {
  margin-block-start: 45px;
}
@media only screen and (min-width: 75rem) {
  :where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
  .editor-styles-wrapper) :where(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6, h1, h2, h3, h4, h5, h6, hr):not(:is(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6, *.blockquote, *.cite, h1, h2, h3, h4, h5, h6, blockquote, cite, hr) + *)) {
    margin-block-start: 40px;
  }
}
:where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
.editor-styles-wrapper) :where(*.h3, h3):not(:is(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6, *.blockquote, *.cite, h1, h2, h3, h4, h5, h6, blockquote, cite, hr) + *) {
  margin-block-start: 20px;
}
:where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
.editor-styles-wrapper) :where(*.h4, h4):not(:is(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6, *.blockquote, *.cite, h1, h2, h3, h4, h5, h6, blockquote, cite, hr) + *) {
  margin-block-start: 20px;
}
:where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
.editor-styles-wrapper) :where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6, h1, h2, h3, h4, h5, h6) {
  margin-block-end: min(1rem, 0.5em);
}
:where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
.editor-styles-wrapper) :where(*.h1, h1) {
  margin-block-end: 20px;
}
:where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
.editor-styles-wrapper) :where(*.h2, h2) {
  margin-block-end: 15px;
}
:where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
.editor-styles-wrapper) :where(*.h3, h3) {
  margin-block-end: 10px;
}
:where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
.editor-styles-wrapper) :where(*.h4, h4) {
  margin-block-end: 10px;
}
:where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
.editor-styles-wrapper) :where(*.blockquote, blockquote) {
  margin-block: 45px;
}
:where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
.editor-styles-wrapper) :where(*.blockquote, blockquote) :where(cite, *.cite) {
  margin-block-start: 1.25em;
}
@media only screen and (min-width: 75rem) {
  :where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
  .editor-styles-wrapper) :where(*.blockquote, blockquote) {
    margin-block: 40px;
  }
}
/* Content/Styleguide Overrides https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/global/content.md#content-utility-classes
Depending on how much versions the designer variates/overrides/customizes the styleguide, you add as much classes here as needed but it WILL bloat and eventully get flagged for performance
--------------------------------------------------------------- */
/* Other Content No Margin Block Variations- Remove first child margin. Note: Do not apply first child margin 0 globally as this causes more unintended issues down the line (content import, post launch, etc.)
* .content-style-no-first-margin - No first margin. Can be also used for specific breakpoints only because some breakdowns forget to take account of these margins eg: .content-style-no-first-margin-[BREAKPOINT]
*/
.content.content-style-no-first-margin > :where(*:first-child) {
  margin-block-start: 0;
}
@media only screen and (max-width: 47.9375rem) {
  .content.content-style-no-first-margin-xs > :where(*:first-child) {
    margin-block-start: 0;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 74.9375rem) {
  .content.content-style-no-first-margin-sm > :where(*:first-child) {
    margin-block-start: 0;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .content.content-style-no-first-margin-md > :where(*:first-child) {
    margin-block-start: 0;
  }
}
@media only screen and (min-width: 87.5rem) and (max-width: 112.4375rem) {
  .content.content-style-no-first-margin-lg > :where(*:first-child) {
    margin-block-start: 0;
  }
}
@media only screen and (min-width: 112.5rem) and (max-width: 179.9375rem) {
  .content.content-style-no-first-margin-xl > :where(*:first-child) {
    margin-block-start: 0;
  }
}

/* .content-style-no-first-margin - No first margin. Can be also used for specific breakpoints only because some breakdowns forget to take account of these margins eg: .content-style-no-first-margin-[BREAKPOINT] */
.content.content-style-no-last-margin > :where(*:last-child) {
  margin-block-end: 0;
}
@media only screen and (max-width: 47.9375rem) {
  .content.content-style-no-last-margin-xs > :where(*:last-child) {
    margin-block-end: 0;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 74.9375rem) {
  .content.content-style-no-last-margin-sm > :where(*:last-child) {
    margin-block-end: 0;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .content.content-style-no-last-margin-md > :where(*:last-child) {
    margin-block-end: 0;
  }
}
@media only screen and (min-width: 87.5rem) and (max-width: 112.4375rem) {
  .content.content-style-no-last-margin-lg > :where(*:last-child) {
    margin-block-end: 0;
  }
}
@media only screen and (min-width: 112.5rem) and (max-width: 179.9375rem) {
  .content.content-style-no-last-margin-xl > :where(*:last-child) {
    margin-block-end: 0;
  }
}

/* Content/Styleguide Overrides https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/global/content.md#content-utility-classes
Depending on how much versions the designer variates/overrides/customizes the styleguide, you add as much classes here as needed but it WILL bloat and eventully get flagged for performance
--------------------------------------------------------------- */
/* Content Color Palette Helpers: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/global/content.md#content-palette-name

support content styles for dark schemes. 
Note: To aply dark mode styles, use @extends to select optional scheme component.
example of styles:

h2 {
	color: something;

	@include inDark &{
		color: somethingelse
	}
}
--------------------------------------------------------------- */
:where(.content-palette-dark) {
  /* inherit white color: NOTE: for this to work, best practice is for a) text color to be modified alongside dark background styles of containing section for accessibility/ and or b) Use and enabling _schemes.scss */
  color: var(--scheme-fg, var(--color-light));
}

.content-palette-dark :where(ol, ul, table) {
  color: var(--scheme-fg, inherit);
}
.content-palette-dark table {
  --table-border-color: var(--color-neutral-darkest);
}

/* Content Size Variations - Sometimes designs will have random font sizes for content styleguide. idk utilize this
--------------------------------------------------------------- */
.content.content-size-micro {
  font-size: 0.625rem;
}
.content.content-size-small {
  font-size: 0.875rem;
}
.content.content-size-large {
  font-size: 1.125rem;
}
/* Content Weight Variations - For when the design needs a different weight for like 10 different sections
--------------------------------------------------------------- */
/* for content with thicker weight than usual. Less specific */
.content.content-weight-thick {
  font-weight: bolder;
}

/* for content with more specific weights because the design says so */
.content.content-weight-thin {
  font-weight: 100;
}

.content.content-weight-light {
  font-weight: 300;
}

.content.content-weight-regular {
  font-weight: 400;
}

.content.content-weight-medium {
  font-weight: 500;
}

.content.content-weight-semibold {
  font-weight: 600;
}

.content.content-weight-bold {
  font-weight: 700;
}

.content.content-weight-extrabold {
  font-weight: 800;
}

/* Content No List Style Variation - Useful for when they want no bullets on certains ections
--------------------------------------------------------------- */
.content.content-style-no-list :is(.content :where(ol, ul, dd)) {
  padding-inline-start: 0;
  list-style: none;
}
.content.content-style-no-list :is(.content :where(li, dd, dt))::before, .content.content-style-no-list :is(.content :where(li, dd, dt))::marker {
  display: none !important;
}

/* Content line height Variation - for instances of content where they want less line height from the already established styleguide :|
--------------------------------------------------------------- */
.content.content-style-compact {
  line-height: 1.29;
}
.content.content-style-compact li, .content.content-style-compact li :where(ul, ol) {
  margin-block: 0;
}

.content.content-style-expanded {
  line-height: 2;
}
.content.content-style-expanded li, .content.content-style-expanded li :where(ul, ol) {
  margin-block: 0;
}

.content.content-style-constricted {
  line-height: 1;
}
.content.content-style-constricted li, .content.content-style-constricted li :where(ul, ol) {
  margin-block: 0;
}

/* Designs with fancy first letters. adjust styles as needed */
.content.content-style-drop-caps > p:first-of-type::first-letter {
  font-size: 2.75rem;
  font-family: var(--font-accent);
  color: var(--color-primary);
  float: inline-start;
  margin: 0 0.1em -0.25em 0;
}
.content.content-style-drop-caps > p:first-of-type + * {
  clear: inline-start;
}
/* ================================================================================
* Supported WP Core Classes/ Styles
================================================================================ */
/* Wordpress Core Classes.
--------------------------------------------------------------- */
/* Align Classes */
*.alignleft,
*.align-left,
*.alignright,
*.align-right,
*.aligncenter,
*.align-center {
  margin-block-end: 1.25em;
  max-inline-size: 100%;
  block-size: auto;
  inline-size: auto;
}
@media only screen and (max-width: 74.9375rem) {
  *.alignleft,
  *.align-left,
  *.alignright,
  *.align-right,
  *.aligncenter,
  *.align-center {
    display: block;
  }
}

@media only screen and (min-width: 75rem) {
  *.alignleft,
  *.align-left {
    display: inline;
    float: inline-start;
    clear: inline-end;
    margin-inline-end: 3em;
    margin-block: 1.5em;
  }
  *.alignright,
  *.align-right {
    display: inline;
    float: inline-end;
    clear: inline-end;
    margin-inline-start: 3em;
    margin-block: 0.5em;
  }
  *.aligncenter,
  *.align-center {
    clear: both;
    display: block;
    margin-inline-start: auto;
    margin-inline-end: auto;
    text-align: center;
  }
}
/* WP Captions */
.wp-caption {
  background: var(--color-light);
  border: 1px solid var(--color-light-alt);
  max-inline-size: 100%;
  padding: 0.5em;
  text-align: center;
}
.wp-caption img {
  border: 0 none;
  block-size: auto;
  margin: 0;
  padding: 0;
  inline-size: auto;
}
.wp-caption p.wp-caption-text {
  font-size: 0.75em;
  line-height: 1.25;
  margin: 0;
}

/* Gutenberg classes */
.has-text-align-center {
  text-align: center;
}

.has-text-align-right {
  text-align: right;
}

.wp-block-cover,
.wp-block-cover-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: center center;
  min-block-size: 26.875rem;
  overflow: clip;
  padding: 1em;
  position: relative;
}

/* ================================================================================
* Global Helpers CSS - These styles are critical to the build and its template parts. They don't usually need edits and will work as is
================================================================================ */
/* Helpers: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/helper.md
Note: Styles already prebuilt in this sass file must not be omitted
--------------------------------------------------------------- */
/* Clearfix stuff
--------------------------------------------------------------- */
.clearfix::after {
  content: "";
  font-size: 0;
  visibility: hidden;
  block-size: 0;
  clear: both;
  display: table;
  inline-size: 100%;
  flex: 0 0 auto;
}

/* hide element while being ADA and SEO friendly
--------------------------------------------------------------- */
.sr-only,
.screen-reader-text {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  block-size: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  inset-block-start: 0 !important;
  inset-inline-start: 0 !important;
  inline-size: 1px !important;
  word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

/* Screen reader */
.screen-reader-text:focus, *:focus-within > .screen-reader-text {
  background-color: var(--color-light-alt);
  clip: auto !important;
  clip-path: none;
  color: var(--color-dark);
  position: fixed;
  display: block;
  font-size: 1em;
  block-size: auto;
  inset-inline-start: 0.25rem;
  inset-block-start: 4rem;
  line-height: normal;
  padding-inline: 0.5rem;
  padding-block: 0.25rem;
  text-decoration: none;
  inline-size: auto;
  z-index: 9999999;
  pointer-events: none;
}

/* emulate background cover on image tags
--------------------------------------------------------------- */
.cover {
  /* containing element */
}
.cover {
  position: relative;
  border-radius: inherit;
  overflow: hidden;
  overflow: clip;
  display: block;
  max-inline-size: 100%;
  inline-size: 100%;
  background: var(--cover-background, var(--color-neutral));
}
.cover:is(.cover-constricted, .cover-contain, .cover-fit) {
  /* constrict element. all children will have to be absolute for this element to maintain its size */
}
@supports not (aspect-ratio: var(--cover-aspect-w, 4)/var(--cover-aspect-l, 3)) {
  .cover:is(.cover-constricted, .cover-contain, .cover-fit)::before {
    content: "";
    display: block;
    padding-block-end: calc(100% * var(--cover-aspect-l, 3) / var(--cover-aspect-w, 4));
  }
}
@supports (aspect-ratio: var(--cover-aspect-w, 4)/var(--cover-aspect-l, 3)) {
  .cover:is(.cover-constricted, .cover-contain, .cover-fit) {
    aspect-ratio: var(--cover-aspect-w, 4)/var(--cover-aspect-l, 3);
  }
}
.cover > :where(*), .cover-child {
  /* element to emulate background-size cover. Add important in case wistia is somehow in this descendancy */
  position: absolute !important;
  inset: 0 !important;
  inline-size: 100% !important;
  block-size: 100% !important;
  display: block;
}
.cover-constricted .cover-child {
  object-fit: cover !important;
}
.cover-contain .cover-child {
  object-fit: contain !important;
}
.cover-fit .cover-child {
  object-fit: fit !important;
}

/* wrap svgs in this helper to control sizing like font glyphs. Sets an svg to align to the bottom left. Set a font size to it to align heights. ie Case Results Icon, Selling Points, Testimonial stars, Social Media, iLawyer Logo, etc.
--------------------------------------------------------------- */
.content-icon {
  height: 1em;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
  text-overflow: ellipsis;
}
.content-icon :where(img, picture, svg, object) {
  max-height: 100%;
  width: auto;
  height: 100%;
  flex: 1 1;
  object-fit: contain;
}

/* clamp blocks of texts to up to a certain height only, NO scroll. complete cut off. NOTE: for this to work there should be no custom line height on the text or any of its block children. if any, they should be passed to --line-height
--------------------------------------------------------------- */
.clamp-text-ellipsis {
  display: -webkit-box;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow: clip;
  -webkit-line-clamp: var(--clamp-text-cap, 3);
  line-clamp: var(--clamp-text-cap, 3);
}

/* clamp blocks of texts to up to a certain height only, with scroll.
--------------------------------------------------------------- */
.clamp-text-scroll {
  overflow-inline: clip;
  overflow-block: scroll;
  max-block-size: calc(var(--clamp-text-cap, 3) * var(--clamp-text-mask-height, 1.5em));
  scrollbar-width: none;
  mask-image: linear-gradient(to top, transparent 0%, white calc(var(--clamp-text-mask-height, 1.5em) * 1.5), white calc(100% - var(--clamp-text-mask-height, 1.5em) * 0.5), transparent 100%);
  padding-block-end: var(--clamp-text-mask-height, 1.5em);
}
.clamp-text-scroll::-webkit-scrollbar {
  display: none;
}

/* nikky's script to fade text to the right for scrolling
--------------------------------------------------------------- */
.fade-text {
  mask-image: linear-gradient(to left, transparent 0em, black var(--fade-text-offset, 2em), black 100%);
  overflow-inline: scroll;
  scrollbar-width: none;
  white-space: nowrap;
  inline-size: 100%;
  padding-inline-end: var(--fade-text-offset, 2em);
}
.fade-text::-webkit-scrollbar {
  display: none;
}

/* like content-icon except friendlier styles for logos to support styleable svg logos while allowing for an img tag for SEO to exist in the same block
--------------------------------------------------------------- */
.logo {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  max-inline-size: max-content;
}
.logo-wrapper {
  position: relative;
  overflow: hidden;
  block-size: 100%;
  inline-size: auto;
}
.logo-wrapper :where(img, picture, svg, object) {
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: 100%;
}
.logo-wrapper :where(svg, object):not(:only-child) {
  pointer-events: none;
  position: absolute;
  margin: auto;
  inset: 0;
  margin: auto;
  inline-size: 100%;
}
.logo-wrapper :is(svg, object) ~ :where(img, picture:not(.inline-svg)) {
  opacity: 0;
}

/* Responsive Global Helpers. Integrated to PHP template parts. Proceed with caution when modifying.
* Note: if the element relies on being set as another display type that's not block (flex, inline-block, inline-flex, etc. ) on  breakpoint/s it is suppose to show, using the *-hide helpers is recommended (eg: instead of xs-only, use sm-hide md-hide lg-hide xl-hide)

* Info to what everything means:
-----------------------------------------------
Tag 	Device		min				max	  
-----------------------------------------------
xs: 	mobile		0				47.9375rem
sm: 	tablet		48rem	74.9375rem
md: 	laptop		75rem	87.4375rem
lg: 	desktop		87.5rem	112.4375rem
xl: 	hd			112.5rem	999999999999+
--------------------------------------------------------------- */
.xl-only,
.lg-only,
.md-only,
.sm-only,
.xs-only,
.home-only,
.internal-only,
.print-only {
  display: none !important;
}

.onep21-template-home .home-only {
  display: block !important;
}
.onep21-template-home .home-hide {
  display: none !important;
}

body:not(.onep21-template-home) .internal-only {
  display: block !important;
}
body:not(.onep21-template-home) .internal-hide {
  display: none !important;
}

@media only print {
  .print-only {
    display: block !important;
  }
  .print-hide {
    display: none !important;
  }
}
@media only screen and (min-width: 112.5rem) {
  .xl-only {
    display: block !important;
  }
  .xl-hide {
    display: none !important;
  }
}
@media only screen and (min-width: 87.5rem) and (max-width: 112.4375rem) {
  .lg-only {
    display: block !important;
  }
  .lg-hide {
    display: none !important;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .md-only {
    display: block !important;
  }
  .md-hide {
    display: none !important;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 74.9375rem) {
  .sm-only {
    display: block !important;
  }
  .sm-hide {
    display: none !important;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .xs-only {
    display: block !important;
  }
  .xs-hide {
    display: none !important;
  }
}
/* Add more helpers as needed */
/* color helpers
--------------------------------------------------------------- */
:where(.content-palette-dark) .color-inherit-ondark, .color-inherit,
.color-inherit-hover:is(:hover, :focus),
.color-inherit-init:not(:is(:hover, :focus)) {
  color: inherit;
}

:where(.content-palette-dark) .color-transparent-ondark, .color-transparent,
.color-transparent-hover:is(:hover, :focus),
.color-transparent-init:not(:is(:hover, :focus)) {
  color: transparent;
}

:where(.content-palette-dark) .color-currentColor-ondark, .color-currentColor,
.color-currentColor-hover:is(:hover, :focus),
.color-currentColor-init:not(:is(:hover, :focus)) {
  color: currentColor;
}

:where(.content-palette-dark) .color-dark-ondark, .color-dark,
.color-dark-hover:is(:hover, :focus),
.color-dark-init:not(:is(:hover, :focus)) {
  color: var(--color-dark);
}

:where(.content-palette-dark) .color-dark-alt-ondark, .color-dark-alt,
.color-dark-alt-hover:is(:hover, :focus),
.color-dark-alt-init:not(:is(:hover, :focus)) {
  color: var(--color-dark-alt);
}

:where(.content-palette-dark) .color-light-ondark, .color-light,
.color-light-hover:is(:hover, :focus),
.color-light-init:not(:is(:hover, :focus)) {
  color: var(--color-light);
}

:where(.content-palette-dark) .color-light-alt-ondark, .color-light-alt,
.color-light-alt-hover:is(:hover, :focus),
.color-light-alt-init:not(:is(:hover, :focus)) {
  color: var(--color-light-alt);
}

:where(.content-palette-dark) .color-neutral-ondark, .color-neutral,
.color-neutral-hover:is(:hover, :focus),
.color-neutral-init:not(:is(:hover, :focus)) {
  color: var(--color-neutral);
}

:where(.content-palette-dark) .color-neutral-light-ondark, .color-neutral-light,
.color-neutral-light-hover:is(:hover, :focus),
.color-neutral-light-init:not(:is(:hover, :focus)) {
  color: var(--color-neutral-light);
}

:where(.content-palette-dark) .color-neutral-lighter-ondark, .color-neutral-lighter,
.color-neutral-lighter-hover:is(:hover, :focus),
.color-neutral-lighter-init:not(:is(:hover, :focus)) {
  color: var(--color-neutral-lighter);
}

:where(.content-palette-dark) .color-neutral-lightest-ondark, .color-neutral-lightest,
.color-neutral-lightest-hover:is(:hover, :focus),
.color-neutral-lightest-init:not(:is(:hover, :focus)) {
  color: var(--color-neutral-lightest);
}

:where(.content-palette-dark) .color-neutral-dark-ondark, .color-neutral-dark,
.color-neutral-dark-hover:is(:hover, :focus),
.color-neutral-dark-init:not(:is(:hover, :focus)) {
  color: var(--color-neutral-dark);
}

:where(.content-palette-dark) .color-neutral-darker-ondark, .color-neutral-darker,
.color-neutral-darker-hover:is(:hover, :focus),
.color-neutral-darker-init:not(:is(:hover, :focus)) {
  color: var(--color-neutral-darker);
}

:where(.content-palette-dark) .color-neutral-darkest-ondark, .color-neutral-darkest,
.color-neutral-darkest-hover:is(:hover, :focus),
.color-neutral-darkest-init:not(:is(:hover, :focus)) {
  color: var(--color-neutral-darkest);
}

:where(.content-palette-dark) .color-primary-ondark, .color-primary,
.color-primary-hover:is(:hover, :focus),
.color-primary-init:not(:is(:hover, :focus)) {
  color: var(--color-primary);
}

:where(.content-palette-dark) .color-primary-alt-ondark, .color-primary-alt,
.color-primary-alt-hover:is(:hover, :focus),
.color-primary-alt-init:not(:is(:hover, :focus)) {
  color: var(--color-primary-alt);
}

:where(.content-palette-dark) .color-primary-gradient-start-ondark, .color-primary-gradient-start,
.color-primary-gradient-start-hover:is(:hover, :focus),
.color-primary-gradient-start-init:not(:is(:hover, :focus)) {
  color: var(--color-primary-gradient-start);
}

:where(.content-palette-dark) .color-primary-gradient-end-ondark, .color-primary-gradient-end,
.color-primary-gradient-end-hover:is(:hover, :focus),
.color-primary-gradient-end-init:not(:is(:hover, :focus)) {
  color: var(--color-primary-gradient-end);
}

:where(.content-palette-dark) .color-secondary-ondark, .color-secondary,
.color-secondary-hover:is(:hover, :focus),
.color-secondary-init:not(:is(:hover, :focus)) {
  color: var(--color-secondary);
}

:where(.content-palette-dark) .color-secondary-alt-ondark, .color-secondary-alt,
.color-secondary-alt-hover:is(:hover, :focus),
.color-secondary-alt-init:not(:is(:hover, :focus)) {
  color: var(--color-secondary-alt);
}

:where(.content-palette-dark) .color-secondary-gradient-start-ondark, .color-secondary-gradient-start,
.color-secondary-gradient-start-hover:is(:hover, :focus),
.color-secondary-gradient-start-init:not(:is(:hover, :focus)) {
  color: var(--color-secondary-gradient-start);
}

:where(.content-palette-dark) .color-secondary-gradient-end-ondark, .color-secondary-gradient-end,
.color-secondary-gradient-end-hover:is(:hover, :focus),
.color-secondary-gradient-end-init:not(:is(:hover, :focus)) {
  color: var(--color-secondary-gradient-end);
}

:where(.content-palette-dark) .color-accent-ondark, .color-accent,
.color-accent-hover:is(:hover, :focus),
.color-accent-init:not(:is(:hover, :focus)) {
  color: var(--color-accent);
}

:where(.content-palette-dark) .color-accent-alt-ondark, .color-accent-alt,
.color-accent-alt-hover:is(:hover, :focus),
.color-accent-alt-init:not(:is(:hover, :focus)) {
  color: var(--color-accent-alt);
}

:where(.content-palette-dark) .color-accent-gradient-start-ondark, .color-accent-gradient-start,
.color-accent-gradient-start-hover:is(:hover, :focus),
.color-accent-gradient-start-init:not(:is(:hover, :focus)) {
  color: var(--color-accent-gradient-start);
}

:where(.content-palette-dark) .color-accent-gradient-end-ondark, .color-accent-gradient-end,
.color-accent-gradient-end-hover:is(:hover, :focus),
.color-accent-gradient-end-init:not(:is(:hover, :focus)) {
  color: var(--color-accent-gradient-end);
}

/* background-color helpers
--------------------------------------------------------------- */
:where(.content-palette-dark) .color-inherit-ondark, .background-color-inherit,
.background-color-inherit-hover:is(:hover, :focus),
.background-color-inherit-init:not(:is(:hover, :focus)) {
  background-color: inherit;
}

:where(.content-palette-dark) .color-transparent-ondark, .background-color-transparent,
.background-color-transparent-hover:is(:hover, :focus),
.background-color-transparent-init:not(:is(:hover, :focus)) {
  background-color: transparent;
}

:where(.content-palette-dark) .color-currentColor-ondark, .background-color-currentColor,
.background-color-currentColor-hover:is(:hover, :focus),
.background-color-currentColor-init:not(:is(:hover, :focus)) {
  background-color: currentColor;
}

:where(.content-palette-dark) .color-dark-ondark, .background-color-dark,
.background-color-dark-hover:is(:hover, :focus),
.background-color-dark-init:not(:is(:hover, :focus)) {
  background-color: var(--color-dark);
}

:where(.content-palette-dark) .color-dark-alt-ondark, .background-color-dark-alt,
.background-color-dark-alt-hover:is(:hover, :focus),
.background-color-dark-alt-init:not(:is(:hover, :focus)) {
  background-color: var(--color-dark-alt);
}

:where(.content-palette-dark) .color-light-ondark, .background-color-light,
.background-color-light-hover:is(:hover, :focus),
.background-color-light-init:not(:is(:hover, :focus)) {
  background-color: var(--color-light);
}

:where(.content-palette-dark) .color-light-alt-ondark, .background-color-light-alt,
.background-color-light-alt-hover:is(:hover, :focus),
.background-color-light-alt-init:not(:is(:hover, :focus)) {
  background-color: var(--color-light-alt);
}

:where(.content-palette-dark) .color-neutral-ondark, .background-color-neutral,
.background-color-neutral-hover:is(:hover, :focus),
.background-color-neutral-init:not(:is(:hover, :focus)) {
  background-color: var(--color-neutral);
}

:where(.content-palette-dark) .color-neutral-light-ondark, .background-color-neutral-light,
.background-color-neutral-light-hover:is(:hover, :focus),
.background-color-neutral-light-init:not(:is(:hover, :focus)) {
  background-color: var(--color-neutral-light);
}

:where(.content-palette-dark) .color-neutral-lighter-ondark, .background-color-neutral-lighter,
.background-color-neutral-lighter-hover:is(:hover, :focus),
.background-color-neutral-lighter-init:not(:is(:hover, :focus)) {
  background-color: var(--color-neutral-lighter);
}

:where(.content-palette-dark) .color-neutral-lightest-ondark, .background-color-neutral-lightest,
.background-color-neutral-lightest-hover:is(:hover, :focus),
.background-color-neutral-lightest-init:not(:is(:hover, :focus)) {
  background-color: var(--color-neutral-lightest);
}

:where(.content-palette-dark) .color-neutral-dark-ondark, .background-color-neutral-dark,
.background-color-neutral-dark-hover:is(:hover, :focus),
.background-color-neutral-dark-init:not(:is(:hover, :focus)) {
  background-color: var(--color-neutral-dark);
}

:where(.content-palette-dark) .color-neutral-darker-ondark, .background-color-neutral-darker,
.background-color-neutral-darker-hover:is(:hover, :focus),
.background-color-neutral-darker-init:not(:is(:hover, :focus)) {
  background-color: var(--color-neutral-darker);
}

:where(.content-palette-dark) .color-neutral-darkest-ondark, .background-color-neutral-darkest,
.background-color-neutral-darkest-hover:is(:hover, :focus),
.background-color-neutral-darkest-init:not(:is(:hover, :focus)) {
  background-color: var(--color-neutral-darkest);
}

:where(.content-palette-dark) .color-primary-ondark, .background-color-primary,
.background-color-primary-hover:is(:hover, :focus),
.background-color-primary-init:not(:is(:hover, :focus)) {
  background-color: var(--color-primary);
}

:where(.content-palette-dark) .color-primary-alt-ondark, .background-color-primary-alt,
.background-color-primary-alt-hover:is(:hover, :focus),
.background-color-primary-alt-init:not(:is(:hover, :focus)) {
  background-color: var(--color-primary-alt);
}

:where(.content-palette-dark) .color-primary-gradient-start-ondark, .background-color-primary-gradient-start,
.background-color-primary-gradient-start-hover:is(:hover, :focus),
.background-color-primary-gradient-start-init:not(:is(:hover, :focus)) {
  background-color: var(--color-primary-gradient-start);
}

:where(.content-palette-dark) .color-primary-gradient-end-ondark, .background-color-primary-gradient-end,
.background-color-primary-gradient-end-hover:is(:hover, :focus),
.background-color-primary-gradient-end-init:not(:is(:hover, :focus)) {
  background-color: var(--color-primary-gradient-end);
}

:where(.content-palette-dark) .color-secondary-ondark, .background-color-secondary,
.background-color-secondary-hover:is(:hover, :focus),
.background-color-secondary-init:not(:is(:hover, :focus)) {
  background-color: var(--color-secondary);
}

:where(.content-palette-dark) .color-secondary-alt-ondark, .background-color-secondary-alt,
.background-color-secondary-alt-hover:is(:hover, :focus),
.background-color-secondary-alt-init:not(:is(:hover, :focus)) {
  background-color: var(--color-secondary-alt);
}

:where(.content-palette-dark) .color-secondary-gradient-start-ondark, .background-color-secondary-gradient-start,
.background-color-secondary-gradient-start-hover:is(:hover, :focus),
.background-color-secondary-gradient-start-init:not(:is(:hover, :focus)) {
  background-color: var(--color-secondary-gradient-start);
}

:where(.content-palette-dark) .color-secondary-gradient-end-ondark, .background-color-secondary-gradient-end,
.background-color-secondary-gradient-end-hover:is(:hover, :focus),
.background-color-secondary-gradient-end-init:not(:is(:hover, :focus)) {
  background-color: var(--color-secondary-gradient-end);
}

:where(.content-palette-dark) .color-accent-ondark, .background-color-accent,
.background-color-accent-hover:is(:hover, :focus),
.background-color-accent-init:not(:is(:hover, :focus)) {
  background-color: var(--color-accent);
}

:where(.content-palette-dark) .color-accent-alt-ondark, .background-color-accent-alt,
.background-color-accent-alt-hover:is(:hover, :focus),
.background-color-accent-alt-init:not(:is(:hover, :focus)) {
  background-color: var(--color-accent-alt);
}

:where(.content-palette-dark) .color-accent-gradient-start-ondark, .background-color-accent-gradient-start,
.background-color-accent-gradient-start-hover:is(:hover, :focus),
.background-color-accent-gradient-start-init:not(:is(:hover, :focus)) {
  background-color: var(--color-accent-gradient-start);
}

:where(.content-palette-dark) .color-accent-gradient-end-ondark, .background-color-accent-gradient-end,
.background-color-accent-gradient-end-hover:is(:hover, :focus),
.background-color-accent-gradient-end-init:not(:is(:hover, :focus)) {
  background-color: var(--color-accent-gradient-end);
}

/* border-color helpers
--------------------------------------------------------------- */
:where(.content-palette-dark) .color-inherit-ondark, .border-color-inherit,
.border-color-inherit-hover:is(:hover, :focus),
.border-color-inherit-init:not(:is(:hover, :focus)) {
  border-color: inherit;
}

:where(.content-palette-dark) .color-transparent-ondark, .border-color-transparent,
.border-color-transparent-hover:is(:hover, :focus),
.border-color-transparent-init:not(:is(:hover, :focus)) {
  border-color: transparent;
}

:where(.content-palette-dark) .color-currentColor-ondark, .border-color-currentColor,
.border-color-currentColor-hover:is(:hover, :focus),
.border-color-currentColor-init:not(:is(:hover, :focus)) {
  border-color: currentColor;
}

:where(.content-palette-dark) .color-dark-ondark, .border-color-dark,
.border-color-dark-hover:is(:hover, :focus),
.border-color-dark-init:not(:is(:hover, :focus)) {
  border-color: var(--color-dark);
}

:where(.content-palette-dark) .color-dark-alt-ondark, .border-color-dark-alt,
.border-color-dark-alt-hover:is(:hover, :focus),
.border-color-dark-alt-init:not(:is(:hover, :focus)) {
  border-color: var(--color-dark-alt);
}

:where(.content-palette-dark) .color-light-ondark, .border-color-light,
.border-color-light-hover:is(:hover, :focus),
.border-color-light-init:not(:is(:hover, :focus)) {
  border-color: var(--color-light);
}

:where(.content-palette-dark) .color-light-alt-ondark, .border-color-light-alt,
.border-color-light-alt-hover:is(:hover, :focus),
.border-color-light-alt-init:not(:is(:hover, :focus)) {
  border-color: var(--color-light-alt);
}

:where(.content-palette-dark) .color-neutral-ondark, .border-color-neutral,
.border-color-neutral-hover:is(:hover, :focus),
.border-color-neutral-init:not(:is(:hover, :focus)) {
  border-color: var(--color-neutral);
}

:where(.content-palette-dark) .color-neutral-light-ondark, .border-color-neutral-light,
.border-color-neutral-light-hover:is(:hover, :focus),
.border-color-neutral-light-init:not(:is(:hover, :focus)) {
  border-color: var(--color-neutral-light);
}

:where(.content-palette-dark) .color-neutral-lighter-ondark, .border-color-neutral-lighter,
.border-color-neutral-lighter-hover:is(:hover, :focus),
.border-color-neutral-lighter-init:not(:is(:hover, :focus)) {
  border-color: var(--color-neutral-lighter);
}

:where(.content-palette-dark) .color-neutral-lightest-ondark, .border-color-neutral-lightest,
.border-color-neutral-lightest-hover:is(:hover, :focus),
.border-color-neutral-lightest-init:not(:is(:hover, :focus)) {
  border-color: var(--color-neutral-lightest);
}

:where(.content-palette-dark) .color-neutral-dark-ondark, .border-color-neutral-dark,
.border-color-neutral-dark-hover:is(:hover, :focus),
.border-color-neutral-dark-init:not(:is(:hover, :focus)) {
  border-color: var(--color-neutral-dark);
}

:where(.content-palette-dark) .color-neutral-darker-ondark, .border-color-neutral-darker,
.border-color-neutral-darker-hover:is(:hover, :focus),
.border-color-neutral-darker-init:not(:is(:hover, :focus)) {
  border-color: var(--color-neutral-darker);
}

:where(.content-palette-dark) .color-neutral-darkest-ondark, .border-color-neutral-darkest,
.border-color-neutral-darkest-hover:is(:hover, :focus),
.border-color-neutral-darkest-init:not(:is(:hover, :focus)) {
  border-color: var(--color-neutral-darkest);
}

:where(.content-palette-dark) .color-primary-ondark, .border-color-primary,
.border-color-primary-hover:is(:hover, :focus),
.border-color-primary-init:not(:is(:hover, :focus)) {
  border-color: var(--color-primary);
}

:where(.content-palette-dark) .color-primary-alt-ondark, .border-color-primary-alt,
.border-color-primary-alt-hover:is(:hover, :focus),
.border-color-primary-alt-init:not(:is(:hover, :focus)) {
  border-color: var(--color-primary-alt);
}

:where(.content-palette-dark) .color-primary-gradient-start-ondark, .border-color-primary-gradient-start,
.border-color-primary-gradient-start-hover:is(:hover, :focus),
.border-color-primary-gradient-start-init:not(:is(:hover, :focus)) {
  border-color: var(--color-primary-gradient-start);
}

:where(.content-palette-dark) .color-primary-gradient-end-ondark, .border-color-primary-gradient-end,
.border-color-primary-gradient-end-hover:is(:hover, :focus),
.border-color-primary-gradient-end-init:not(:is(:hover, :focus)) {
  border-color: var(--color-primary-gradient-end);
}

:where(.content-palette-dark) .color-secondary-ondark, .border-color-secondary,
.border-color-secondary-hover:is(:hover, :focus),
.border-color-secondary-init:not(:is(:hover, :focus)) {
  border-color: var(--color-secondary);
}

:where(.content-palette-dark) .color-secondary-alt-ondark, .border-color-secondary-alt,
.border-color-secondary-alt-hover:is(:hover, :focus),
.border-color-secondary-alt-init:not(:is(:hover, :focus)) {
  border-color: var(--color-secondary-alt);
}

:where(.content-palette-dark) .color-secondary-gradient-start-ondark, .border-color-secondary-gradient-start,
.border-color-secondary-gradient-start-hover:is(:hover, :focus),
.border-color-secondary-gradient-start-init:not(:is(:hover, :focus)) {
  border-color: var(--color-secondary-gradient-start);
}

:where(.content-palette-dark) .color-secondary-gradient-end-ondark, .border-color-secondary-gradient-end,
.border-color-secondary-gradient-end-hover:is(:hover, :focus),
.border-color-secondary-gradient-end-init:not(:is(:hover, :focus)) {
  border-color: var(--color-secondary-gradient-end);
}

:where(.content-palette-dark) .color-accent-ondark, .border-color-accent,
.border-color-accent-hover:is(:hover, :focus),
.border-color-accent-init:not(:is(:hover, :focus)) {
  border-color: var(--color-accent);
}

:where(.content-palette-dark) .color-accent-alt-ondark, .border-color-accent-alt,
.border-color-accent-alt-hover:is(:hover, :focus),
.border-color-accent-alt-init:not(:is(:hover, :focus)) {
  border-color: var(--color-accent-alt);
}

:where(.content-palette-dark) .color-accent-gradient-start-ondark, .border-color-accent-gradient-start,
.border-color-accent-gradient-start-hover:is(:hover, :focus),
.border-color-accent-gradient-start-init:not(:is(:hover, :focus)) {
  border-color: var(--color-accent-gradient-start);
}

:where(.content-palette-dark) .color-accent-gradient-end-ondark, .border-color-accent-gradient-end,
.border-color-accent-gradient-end-hover:is(:hover, :focus),
.border-color-accent-gradient-end-init:not(:is(:hover, :focus)) {
  border-color: var(--color-accent-gradient-end);
}

/* border-block-color helpers
--------------------------------------------------------------- */
:where(.content-palette-dark) .color-inherit-ondark, .border-block-color-inherit,
.border-block-color-inherit-hover:is(:hover, :focus),
.border-block-color-inherit-init:not(:is(:hover, :focus)) {
  border-block-color: inherit;
}

:where(.content-palette-dark) .color-transparent-ondark, .border-block-color-transparent,
.border-block-color-transparent-hover:is(:hover, :focus),
.border-block-color-transparent-init:not(:is(:hover, :focus)) {
  border-block-color: transparent;
}

:where(.content-palette-dark) .color-currentColor-ondark, .border-block-color-currentColor,
.border-block-color-currentColor-hover:is(:hover, :focus),
.border-block-color-currentColor-init:not(:is(:hover, :focus)) {
  border-block-color: currentColor;
}

:where(.content-palette-dark) .color-dark-ondark, .border-block-color-dark,
.border-block-color-dark-hover:is(:hover, :focus),
.border-block-color-dark-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-dark);
}

:where(.content-palette-dark) .color-dark-alt-ondark, .border-block-color-dark-alt,
.border-block-color-dark-alt-hover:is(:hover, :focus),
.border-block-color-dark-alt-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-dark-alt);
}

:where(.content-palette-dark) .color-light-ondark, .border-block-color-light,
.border-block-color-light-hover:is(:hover, :focus),
.border-block-color-light-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-light);
}

:where(.content-palette-dark) .color-light-alt-ondark, .border-block-color-light-alt,
.border-block-color-light-alt-hover:is(:hover, :focus),
.border-block-color-light-alt-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-light-alt);
}

:where(.content-palette-dark) .color-neutral-ondark, .border-block-color-neutral,
.border-block-color-neutral-hover:is(:hover, :focus),
.border-block-color-neutral-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-neutral);
}

:where(.content-palette-dark) .color-neutral-light-ondark, .border-block-color-neutral-light,
.border-block-color-neutral-light-hover:is(:hover, :focus),
.border-block-color-neutral-light-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-neutral-light);
}

:where(.content-palette-dark) .color-neutral-lighter-ondark, .border-block-color-neutral-lighter,
.border-block-color-neutral-lighter-hover:is(:hover, :focus),
.border-block-color-neutral-lighter-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-neutral-lighter);
}

:where(.content-palette-dark) .color-neutral-lightest-ondark, .border-block-color-neutral-lightest,
.border-block-color-neutral-lightest-hover:is(:hover, :focus),
.border-block-color-neutral-lightest-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-neutral-lightest);
}

:where(.content-palette-dark) .color-neutral-dark-ondark, .border-block-color-neutral-dark,
.border-block-color-neutral-dark-hover:is(:hover, :focus),
.border-block-color-neutral-dark-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-neutral-dark);
}

:where(.content-palette-dark) .color-neutral-darker-ondark, .border-block-color-neutral-darker,
.border-block-color-neutral-darker-hover:is(:hover, :focus),
.border-block-color-neutral-darker-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-neutral-darker);
}

:where(.content-palette-dark) .color-neutral-darkest-ondark, .border-block-color-neutral-darkest,
.border-block-color-neutral-darkest-hover:is(:hover, :focus),
.border-block-color-neutral-darkest-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-neutral-darkest);
}

:where(.content-palette-dark) .color-primary-ondark, .border-block-color-primary,
.border-block-color-primary-hover:is(:hover, :focus),
.border-block-color-primary-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-primary);
}

:where(.content-palette-dark) .color-primary-alt-ondark, .border-block-color-primary-alt,
.border-block-color-primary-alt-hover:is(:hover, :focus),
.border-block-color-primary-alt-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-primary-alt);
}

:where(.content-palette-dark) .color-primary-gradient-start-ondark, .border-block-color-primary-gradient-start,
.border-block-color-primary-gradient-start-hover:is(:hover, :focus),
.border-block-color-primary-gradient-start-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-primary-gradient-start);
}

:where(.content-palette-dark) .color-primary-gradient-end-ondark, .border-block-color-primary-gradient-end,
.border-block-color-primary-gradient-end-hover:is(:hover, :focus),
.border-block-color-primary-gradient-end-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-primary-gradient-end);
}

:where(.content-palette-dark) .color-secondary-ondark, .border-block-color-secondary,
.border-block-color-secondary-hover:is(:hover, :focus),
.border-block-color-secondary-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-secondary);
}

:where(.content-palette-dark) .color-secondary-alt-ondark, .border-block-color-secondary-alt,
.border-block-color-secondary-alt-hover:is(:hover, :focus),
.border-block-color-secondary-alt-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-secondary-alt);
}

:where(.content-palette-dark) .color-secondary-gradient-start-ondark, .border-block-color-secondary-gradient-start,
.border-block-color-secondary-gradient-start-hover:is(:hover, :focus),
.border-block-color-secondary-gradient-start-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-secondary-gradient-start);
}

:where(.content-palette-dark) .color-secondary-gradient-end-ondark, .border-block-color-secondary-gradient-end,
.border-block-color-secondary-gradient-end-hover:is(:hover, :focus),
.border-block-color-secondary-gradient-end-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-secondary-gradient-end);
}

:where(.content-palette-dark) .color-accent-ondark, .border-block-color-accent,
.border-block-color-accent-hover:is(:hover, :focus),
.border-block-color-accent-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-accent);
}

:where(.content-palette-dark) .color-accent-alt-ondark, .border-block-color-accent-alt,
.border-block-color-accent-alt-hover:is(:hover, :focus),
.border-block-color-accent-alt-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-accent-alt);
}

:where(.content-palette-dark) .color-accent-gradient-start-ondark, .border-block-color-accent-gradient-start,
.border-block-color-accent-gradient-start-hover:is(:hover, :focus),
.border-block-color-accent-gradient-start-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-accent-gradient-start);
}

:where(.content-palette-dark) .color-accent-gradient-end-ondark, .border-block-color-accent-gradient-end,
.border-block-color-accent-gradient-end-hover:is(:hover, :focus),
.border-block-color-accent-gradient-end-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-accent-gradient-end);
}

/* border-inline-color helpers
--------------------------------------------------------------- */
:where(.content-palette-dark) .color-inherit-ondark, .border-inline-color-inherit,
.border-inline-color-inherit-hover:is(:hover, :focus),
.border-inline-color-inherit-init:not(:is(:hover, :focus)) {
  border-inline-color: inherit;
}

:where(.content-palette-dark) .color-transparent-ondark, .border-inline-color-transparent,
.border-inline-color-transparent-hover:is(:hover, :focus),
.border-inline-color-transparent-init:not(:is(:hover, :focus)) {
  border-inline-color: transparent;
}

:where(.content-palette-dark) .color-currentColor-ondark, .border-inline-color-currentColor,
.border-inline-color-currentColor-hover:is(:hover, :focus),
.border-inline-color-currentColor-init:not(:is(:hover, :focus)) {
  border-inline-color: currentColor;
}

:where(.content-palette-dark) .color-dark-ondark, .border-inline-color-dark,
.border-inline-color-dark-hover:is(:hover, :focus),
.border-inline-color-dark-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-dark);
}

:where(.content-palette-dark) .color-dark-alt-ondark, .border-inline-color-dark-alt,
.border-inline-color-dark-alt-hover:is(:hover, :focus),
.border-inline-color-dark-alt-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-dark-alt);
}

:where(.content-palette-dark) .color-light-ondark, .border-inline-color-light,
.border-inline-color-light-hover:is(:hover, :focus),
.border-inline-color-light-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-light);
}

:where(.content-palette-dark) .color-light-alt-ondark, .border-inline-color-light-alt,
.border-inline-color-light-alt-hover:is(:hover, :focus),
.border-inline-color-light-alt-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-light-alt);
}

:where(.content-palette-dark) .color-neutral-ondark, .border-inline-color-neutral,
.border-inline-color-neutral-hover:is(:hover, :focus),
.border-inline-color-neutral-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-neutral);
}

:where(.content-palette-dark) .color-neutral-light-ondark, .border-inline-color-neutral-light,
.border-inline-color-neutral-light-hover:is(:hover, :focus),
.border-inline-color-neutral-light-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-neutral-light);
}

:where(.content-palette-dark) .color-neutral-lighter-ondark, .border-inline-color-neutral-lighter,
.border-inline-color-neutral-lighter-hover:is(:hover, :focus),
.border-inline-color-neutral-lighter-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-neutral-lighter);
}

:where(.content-palette-dark) .color-neutral-lightest-ondark, .border-inline-color-neutral-lightest,
.border-inline-color-neutral-lightest-hover:is(:hover, :focus),
.border-inline-color-neutral-lightest-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-neutral-lightest);
}

:where(.content-palette-dark) .color-neutral-dark-ondark, .border-inline-color-neutral-dark,
.border-inline-color-neutral-dark-hover:is(:hover, :focus),
.border-inline-color-neutral-dark-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-neutral-dark);
}

:where(.content-palette-dark) .color-neutral-darker-ondark, .border-inline-color-neutral-darker,
.border-inline-color-neutral-darker-hover:is(:hover, :focus),
.border-inline-color-neutral-darker-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-neutral-darker);
}

:where(.content-palette-dark) .color-neutral-darkest-ondark, .border-inline-color-neutral-darkest,
.border-inline-color-neutral-darkest-hover:is(:hover, :focus),
.border-inline-color-neutral-darkest-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-neutral-darkest);
}

:where(.content-palette-dark) .color-primary-ondark, .border-inline-color-primary,
.border-inline-color-primary-hover:is(:hover, :focus),
.border-inline-color-primary-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-primary);
}

:where(.content-palette-dark) .color-primary-alt-ondark, .border-inline-color-primary-alt,
.border-inline-color-primary-alt-hover:is(:hover, :focus),
.border-inline-color-primary-alt-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-primary-alt);
}

:where(.content-palette-dark) .color-primary-gradient-start-ondark, .border-inline-color-primary-gradient-start,
.border-inline-color-primary-gradient-start-hover:is(:hover, :focus),
.border-inline-color-primary-gradient-start-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-primary-gradient-start);
}

:where(.content-palette-dark) .color-primary-gradient-end-ondark, .border-inline-color-primary-gradient-end,
.border-inline-color-primary-gradient-end-hover:is(:hover, :focus),
.border-inline-color-primary-gradient-end-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-primary-gradient-end);
}

:where(.content-palette-dark) .color-secondary-ondark, .border-inline-color-secondary,
.border-inline-color-secondary-hover:is(:hover, :focus),
.border-inline-color-secondary-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-secondary);
}

:where(.content-palette-dark) .color-secondary-alt-ondark, .border-inline-color-secondary-alt,
.border-inline-color-secondary-alt-hover:is(:hover, :focus),
.border-inline-color-secondary-alt-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-secondary-alt);
}

:where(.content-palette-dark) .color-secondary-gradient-start-ondark, .border-inline-color-secondary-gradient-start,
.border-inline-color-secondary-gradient-start-hover:is(:hover, :focus),
.border-inline-color-secondary-gradient-start-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-secondary-gradient-start);
}

:where(.content-palette-dark) .color-secondary-gradient-end-ondark, .border-inline-color-secondary-gradient-end,
.border-inline-color-secondary-gradient-end-hover:is(:hover, :focus),
.border-inline-color-secondary-gradient-end-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-secondary-gradient-end);
}

:where(.content-palette-dark) .color-accent-ondark, .border-inline-color-accent,
.border-inline-color-accent-hover:is(:hover, :focus),
.border-inline-color-accent-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-accent);
}

:where(.content-palette-dark) .color-accent-alt-ondark, .border-inline-color-accent-alt,
.border-inline-color-accent-alt-hover:is(:hover, :focus),
.border-inline-color-accent-alt-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-accent-alt);
}

:where(.content-palette-dark) .color-accent-gradient-start-ondark, .border-inline-color-accent-gradient-start,
.border-inline-color-accent-gradient-start-hover:is(:hover, :focus),
.border-inline-color-accent-gradient-start-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-accent-gradient-start);
}

:where(.content-palette-dark) .color-accent-gradient-end-ondark, .border-inline-color-accent-gradient-end,
.border-inline-color-accent-gradient-end-hover:is(:hover, :focus),
.border-inline-color-accent-gradient-end-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-accent-gradient-end);
}

/* border-block-color helpers
--------------------------------------------------------------- */
:where(.content-palette-dark) .color-inherit-ondark, .border-block-color-inherit,
.border-block-color-inherit-hover:is(:hover, :focus),
.border-block-color-inherit-init:not(:is(:hover, :focus)) {
  border-block-color: inherit;
}

:where(.content-palette-dark) .color-transparent-ondark, .border-block-color-transparent,
.border-block-color-transparent-hover:is(:hover, :focus),
.border-block-color-transparent-init:not(:is(:hover, :focus)) {
  border-block-color: transparent;
}

:where(.content-palette-dark) .color-currentColor-ondark, .border-block-color-currentColor,
.border-block-color-currentColor-hover:is(:hover, :focus),
.border-block-color-currentColor-init:not(:is(:hover, :focus)) {
  border-block-color: currentColor;
}

:where(.content-palette-dark) .color-dark-ondark, .border-block-color-dark,
.border-block-color-dark-hover:is(:hover, :focus),
.border-block-color-dark-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-dark);
}

:where(.content-palette-dark) .color-dark-alt-ondark, .border-block-color-dark-alt,
.border-block-color-dark-alt-hover:is(:hover, :focus),
.border-block-color-dark-alt-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-dark-alt);
}

:where(.content-palette-dark) .color-light-ondark, .border-block-color-light,
.border-block-color-light-hover:is(:hover, :focus),
.border-block-color-light-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-light);
}

:where(.content-palette-dark) .color-light-alt-ondark, .border-block-color-light-alt,
.border-block-color-light-alt-hover:is(:hover, :focus),
.border-block-color-light-alt-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-light-alt);
}

:where(.content-palette-dark) .color-neutral-ondark, .border-block-color-neutral,
.border-block-color-neutral-hover:is(:hover, :focus),
.border-block-color-neutral-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-neutral);
}

:where(.content-palette-dark) .color-neutral-light-ondark, .border-block-color-neutral-light,
.border-block-color-neutral-light-hover:is(:hover, :focus),
.border-block-color-neutral-light-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-neutral-light);
}

:where(.content-palette-dark) .color-neutral-lighter-ondark, .border-block-color-neutral-lighter,
.border-block-color-neutral-lighter-hover:is(:hover, :focus),
.border-block-color-neutral-lighter-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-neutral-lighter);
}

:where(.content-palette-dark) .color-neutral-lightest-ondark, .border-block-color-neutral-lightest,
.border-block-color-neutral-lightest-hover:is(:hover, :focus),
.border-block-color-neutral-lightest-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-neutral-lightest);
}

:where(.content-palette-dark) .color-neutral-dark-ondark, .border-block-color-neutral-dark,
.border-block-color-neutral-dark-hover:is(:hover, :focus),
.border-block-color-neutral-dark-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-neutral-dark);
}

:where(.content-palette-dark) .color-neutral-darker-ondark, .border-block-color-neutral-darker,
.border-block-color-neutral-darker-hover:is(:hover, :focus),
.border-block-color-neutral-darker-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-neutral-darker);
}

:where(.content-palette-dark) .color-neutral-darkest-ondark, .border-block-color-neutral-darkest,
.border-block-color-neutral-darkest-hover:is(:hover, :focus),
.border-block-color-neutral-darkest-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-neutral-darkest);
}

:where(.content-palette-dark) .color-primary-ondark, .border-block-color-primary,
.border-block-color-primary-hover:is(:hover, :focus),
.border-block-color-primary-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-primary);
}

:where(.content-palette-dark) .color-primary-alt-ondark, .border-block-color-primary-alt,
.border-block-color-primary-alt-hover:is(:hover, :focus),
.border-block-color-primary-alt-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-primary-alt);
}

:where(.content-palette-dark) .color-primary-gradient-start-ondark, .border-block-color-primary-gradient-start,
.border-block-color-primary-gradient-start-hover:is(:hover, :focus),
.border-block-color-primary-gradient-start-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-primary-gradient-start);
}

:where(.content-palette-dark) .color-primary-gradient-end-ondark, .border-block-color-primary-gradient-end,
.border-block-color-primary-gradient-end-hover:is(:hover, :focus),
.border-block-color-primary-gradient-end-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-primary-gradient-end);
}

:where(.content-palette-dark) .color-secondary-ondark, .border-block-color-secondary,
.border-block-color-secondary-hover:is(:hover, :focus),
.border-block-color-secondary-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-secondary);
}

:where(.content-palette-dark) .color-secondary-alt-ondark, .border-block-color-secondary-alt,
.border-block-color-secondary-alt-hover:is(:hover, :focus),
.border-block-color-secondary-alt-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-secondary-alt);
}

:where(.content-palette-dark) .color-secondary-gradient-start-ondark, .border-block-color-secondary-gradient-start,
.border-block-color-secondary-gradient-start-hover:is(:hover, :focus),
.border-block-color-secondary-gradient-start-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-secondary-gradient-start);
}

:where(.content-palette-dark) .color-secondary-gradient-end-ondark, .border-block-color-secondary-gradient-end,
.border-block-color-secondary-gradient-end-hover:is(:hover, :focus),
.border-block-color-secondary-gradient-end-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-secondary-gradient-end);
}

:where(.content-palette-dark) .color-accent-ondark, .border-block-color-accent,
.border-block-color-accent-hover:is(:hover, :focus),
.border-block-color-accent-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-accent);
}

:where(.content-palette-dark) .color-accent-alt-ondark, .border-block-color-accent-alt,
.border-block-color-accent-alt-hover:is(:hover, :focus),
.border-block-color-accent-alt-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-accent-alt);
}

:where(.content-palette-dark) .color-accent-gradient-start-ondark, .border-block-color-accent-gradient-start,
.border-block-color-accent-gradient-start-hover:is(:hover, :focus),
.border-block-color-accent-gradient-start-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-accent-gradient-start);
}

:where(.content-palette-dark) .color-accent-gradient-end-ondark, .border-block-color-accent-gradient-end,
.border-block-color-accent-gradient-end-hover:is(:hover, :focus),
.border-block-color-accent-gradient-end-init:not(:is(:hover, :focus)) {
  border-block-color: var(--color-accent-gradient-end);
}

/* border-inline-color helpers
--------------------------------------------------------------- */
:where(.content-palette-dark) .color-inherit-ondark, .border-inline-color-inherit,
.border-inline-color-inherit-hover:is(:hover, :focus),
.border-inline-color-inherit-init:not(:is(:hover, :focus)) {
  border-inline-color: inherit;
}

:where(.content-palette-dark) .color-transparent-ondark, .border-inline-color-transparent,
.border-inline-color-transparent-hover:is(:hover, :focus),
.border-inline-color-transparent-init:not(:is(:hover, :focus)) {
  border-inline-color: transparent;
}

:where(.content-palette-dark) .color-currentColor-ondark, .border-inline-color-currentColor,
.border-inline-color-currentColor-hover:is(:hover, :focus),
.border-inline-color-currentColor-init:not(:is(:hover, :focus)) {
  border-inline-color: currentColor;
}

:where(.content-palette-dark) .color-dark-ondark, .border-inline-color-dark,
.border-inline-color-dark-hover:is(:hover, :focus),
.border-inline-color-dark-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-dark);
}

:where(.content-palette-dark) .color-dark-alt-ondark, .border-inline-color-dark-alt,
.border-inline-color-dark-alt-hover:is(:hover, :focus),
.border-inline-color-dark-alt-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-dark-alt);
}

:where(.content-palette-dark) .color-light-ondark, .border-inline-color-light,
.border-inline-color-light-hover:is(:hover, :focus),
.border-inline-color-light-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-light);
}

:where(.content-palette-dark) .color-light-alt-ondark, .border-inline-color-light-alt,
.border-inline-color-light-alt-hover:is(:hover, :focus),
.border-inline-color-light-alt-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-light-alt);
}

:where(.content-palette-dark) .color-neutral-ondark, .border-inline-color-neutral,
.border-inline-color-neutral-hover:is(:hover, :focus),
.border-inline-color-neutral-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-neutral);
}

:where(.content-palette-dark) .color-neutral-light-ondark, .border-inline-color-neutral-light,
.border-inline-color-neutral-light-hover:is(:hover, :focus),
.border-inline-color-neutral-light-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-neutral-light);
}

:where(.content-palette-dark) .color-neutral-lighter-ondark, .border-inline-color-neutral-lighter,
.border-inline-color-neutral-lighter-hover:is(:hover, :focus),
.border-inline-color-neutral-lighter-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-neutral-lighter);
}

:where(.content-palette-dark) .color-neutral-lightest-ondark, .border-inline-color-neutral-lightest,
.border-inline-color-neutral-lightest-hover:is(:hover, :focus),
.border-inline-color-neutral-lightest-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-neutral-lightest);
}

:where(.content-palette-dark) .color-neutral-dark-ondark, .border-inline-color-neutral-dark,
.border-inline-color-neutral-dark-hover:is(:hover, :focus),
.border-inline-color-neutral-dark-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-neutral-dark);
}

:where(.content-palette-dark) .color-neutral-darker-ondark, .border-inline-color-neutral-darker,
.border-inline-color-neutral-darker-hover:is(:hover, :focus),
.border-inline-color-neutral-darker-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-neutral-darker);
}

:where(.content-palette-dark) .color-neutral-darkest-ondark, .border-inline-color-neutral-darkest,
.border-inline-color-neutral-darkest-hover:is(:hover, :focus),
.border-inline-color-neutral-darkest-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-neutral-darkest);
}

:where(.content-palette-dark) .color-primary-ondark, .border-inline-color-primary,
.border-inline-color-primary-hover:is(:hover, :focus),
.border-inline-color-primary-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-primary);
}

:where(.content-palette-dark) .color-primary-alt-ondark, .border-inline-color-primary-alt,
.border-inline-color-primary-alt-hover:is(:hover, :focus),
.border-inline-color-primary-alt-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-primary-alt);
}

:where(.content-palette-dark) .color-primary-gradient-start-ondark, .border-inline-color-primary-gradient-start,
.border-inline-color-primary-gradient-start-hover:is(:hover, :focus),
.border-inline-color-primary-gradient-start-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-primary-gradient-start);
}

:where(.content-palette-dark) .color-primary-gradient-end-ondark, .border-inline-color-primary-gradient-end,
.border-inline-color-primary-gradient-end-hover:is(:hover, :focus),
.border-inline-color-primary-gradient-end-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-primary-gradient-end);
}

:where(.content-palette-dark) .color-secondary-ondark, .border-inline-color-secondary,
.border-inline-color-secondary-hover:is(:hover, :focus),
.border-inline-color-secondary-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-secondary);
}

:where(.content-palette-dark) .color-secondary-alt-ondark, .border-inline-color-secondary-alt,
.border-inline-color-secondary-alt-hover:is(:hover, :focus),
.border-inline-color-secondary-alt-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-secondary-alt);
}

:where(.content-palette-dark) .color-secondary-gradient-start-ondark, .border-inline-color-secondary-gradient-start,
.border-inline-color-secondary-gradient-start-hover:is(:hover, :focus),
.border-inline-color-secondary-gradient-start-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-secondary-gradient-start);
}

:where(.content-palette-dark) .color-secondary-gradient-end-ondark, .border-inline-color-secondary-gradient-end,
.border-inline-color-secondary-gradient-end-hover:is(:hover, :focus),
.border-inline-color-secondary-gradient-end-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-secondary-gradient-end);
}

:where(.content-palette-dark) .color-accent-ondark, .border-inline-color-accent,
.border-inline-color-accent-hover:is(:hover, :focus),
.border-inline-color-accent-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-accent);
}

:where(.content-palette-dark) .color-accent-alt-ondark, .border-inline-color-accent-alt,
.border-inline-color-accent-alt-hover:is(:hover, :focus),
.border-inline-color-accent-alt-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-accent-alt);
}

:where(.content-palette-dark) .color-accent-gradient-start-ondark, .border-inline-color-accent-gradient-start,
.border-inline-color-accent-gradient-start-hover:is(:hover, :focus),
.border-inline-color-accent-gradient-start-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-accent-gradient-start);
}

:where(.content-palette-dark) .color-accent-gradient-end-ondark, .border-inline-color-accent-gradient-end,
.border-inline-color-accent-gradient-end-hover:is(:hover, :focus),
.border-inline-color-accent-gradient-end-init:not(:is(:hover, :focus)) {
  border-inline-color: var(--color-accent-gradient-end);
}

/* border-block-start-color helpers
--------------------------------------------------------------- */
:where(.content-palette-dark) .color-inherit-ondark, .border-block-start-color-inherit,
.border-block-start-color-inherit-hover:is(:hover, :focus),
.border-block-start-color-inherit-init:not(:is(:hover, :focus)) {
  border-block-start-color: inherit;
}

:where(.content-palette-dark) .color-transparent-ondark, .border-block-start-color-transparent,
.border-block-start-color-transparent-hover:is(:hover, :focus),
.border-block-start-color-transparent-init:not(:is(:hover, :focus)) {
  border-block-start-color: transparent;
}

:where(.content-palette-dark) .color-currentColor-ondark, .border-block-start-color-currentColor,
.border-block-start-color-currentColor-hover:is(:hover, :focus),
.border-block-start-color-currentColor-init:not(:is(:hover, :focus)) {
  border-block-start-color: currentColor;
}

:where(.content-palette-dark) .color-dark-ondark, .border-block-start-color-dark,
.border-block-start-color-dark-hover:is(:hover, :focus),
.border-block-start-color-dark-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-dark);
}

:where(.content-palette-dark) .color-dark-alt-ondark, .border-block-start-color-dark-alt,
.border-block-start-color-dark-alt-hover:is(:hover, :focus),
.border-block-start-color-dark-alt-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-dark-alt);
}

:where(.content-palette-dark) .color-light-ondark, .border-block-start-color-light,
.border-block-start-color-light-hover:is(:hover, :focus),
.border-block-start-color-light-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-light);
}

:where(.content-palette-dark) .color-light-alt-ondark, .border-block-start-color-light-alt,
.border-block-start-color-light-alt-hover:is(:hover, :focus),
.border-block-start-color-light-alt-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-light-alt);
}

:where(.content-palette-dark) .color-neutral-ondark, .border-block-start-color-neutral,
.border-block-start-color-neutral-hover:is(:hover, :focus),
.border-block-start-color-neutral-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-neutral);
}

:where(.content-palette-dark) .color-neutral-light-ondark, .border-block-start-color-neutral-light,
.border-block-start-color-neutral-light-hover:is(:hover, :focus),
.border-block-start-color-neutral-light-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-neutral-light);
}

:where(.content-palette-dark) .color-neutral-lighter-ondark, .border-block-start-color-neutral-lighter,
.border-block-start-color-neutral-lighter-hover:is(:hover, :focus),
.border-block-start-color-neutral-lighter-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-neutral-lighter);
}

:where(.content-palette-dark) .color-neutral-lightest-ondark, .border-block-start-color-neutral-lightest,
.border-block-start-color-neutral-lightest-hover:is(:hover, :focus),
.border-block-start-color-neutral-lightest-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-neutral-lightest);
}

:where(.content-palette-dark) .color-neutral-dark-ondark, .border-block-start-color-neutral-dark,
.border-block-start-color-neutral-dark-hover:is(:hover, :focus),
.border-block-start-color-neutral-dark-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-neutral-dark);
}

:where(.content-palette-dark) .color-neutral-darker-ondark, .border-block-start-color-neutral-darker,
.border-block-start-color-neutral-darker-hover:is(:hover, :focus),
.border-block-start-color-neutral-darker-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-neutral-darker);
}

:where(.content-palette-dark) .color-neutral-darkest-ondark, .border-block-start-color-neutral-darkest,
.border-block-start-color-neutral-darkest-hover:is(:hover, :focus),
.border-block-start-color-neutral-darkest-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-neutral-darkest);
}

:where(.content-palette-dark) .color-primary-ondark, .border-block-start-color-primary,
.border-block-start-color-primary-hover:is(:hover, :focus),
.border-block-start-color-primary-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-primary);
}

:where(.content-palette-dark) .color-primary-alt-ondark, .border-block-start-color-primary-alt,
.border-block-start-color-primary-alt-hover:is(:hover, :focus),
.border-block-start-color-primary-alt-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-primary-alt);
}

:where(.content-palette-dark) .color-primary-gradient-start-ondark, .border-block-start-color-primary-gradient-start,
.border-block-start-color-primary-gradient-start-hover:is(:hover, :focus),
.border-block-start-color-primary-gradient-start-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-primary-gradient-start);
}

:where(.content-palette-dark) .color-primary-gradient-end-ondark, .border-block-start-color-primary-gradient-end,
.border-block-start-color-primary-gradient-end-hover:is(:hover, :focus),
.border-block-start-color-primary-gradient-end-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-primary-gradient-end);
}

:where(.content-palette-dark) .color-secondary-ondark, .border-block-start-color-secondary,
.border-block-start-color-secondary-hover:is(:hover, :focus),
.border-block-start-color-secondary-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-secondary);
}

:where(.content-palette-dark) .color-secondary-alt-ondark, .border-block-start-color-secondary-alt,
.border-block-start-color-secondary-alt-hover:is(:hover, :focus),
.border-block-start-color-secondary-alt-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-secondary-alt);
}

:where(.content-palette-dark) .color-secondary-gradient-start-ondark, .border-block-start-color-secondary-gradient-start,
.border-block-start-color-secondary-gradient-start-hover:is(:hover, :focus),
.border-block-start-color-secondary-gradient-start-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-secondary-gradient-start);
}

:where(.content-palette-dark) .color-secondary-gradient-end-ondark, .border-block-start-color-secondary-gradient-end,
.border-block-start-color-secondary-gradient-end-hover:is(:hover, :focus),
.border-block-start-color-secondary-gradient-end-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-secondary-gradient-end);
}

:where(.content-palette-dark) .color-accent-ondark, .border-block-start-color-accent,
.border-block-start-color-accent-hover:is(:hover, :focus),
.border-block-start-color-accent-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-accent);
}

:where(.content-palette-dark) .color-accent-alt-ondark, .border-block-start-color-accent-alt,
.border-block-start-color-accent-alt-hover:is(:hover, :focus),
.border-block-start-color-accent-alt-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-accent-alt);
}

:where(.content-palette-dark) .color-accent-gradient-start-ondark, .border-block-start-color-accent-gradient-start,
.border-block-start-color-accent-gradient-start-hover:is(:hover, :focus),
.border-block-start-color-accent-gradient-start-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-accent-gradient-start);
}

:where(.content-palette-dark) .color-accent-gradient-end-ondark, .border-block-start-color-accent-gradient-end,
.border-block-start-color-accent-gradient-end-hover:is(:hover, :focus),
.border-block-start-color-accent-gradient-end-init:not(:is(:hover, :focus)) {
  border-block-start-color: var(--color-accent-gradient-end);
}

/* border-block-end-color helpers
--------------------------------------------------------------- */
:where(.content-palette-dark) .color-inherit-ondark, .border-block-end-color-inherit,
.border-block-end-color-inherit-hover:is(:hover, :focus),
.border-block-end-color-inherit-init:not(:is(:hover, :focus)) {
  border-block-end-color: inherit;
}

:where(.content-palette-dark) .color-transparent-ondark, .border-block-end-color-transparent,
.border-block-end-color-transparent-hover:is(:hover, :focus),
.border-block-end-color-transparent-init:not(:is(:hover, :focus)) {
  border-block-end-color: transparent;
}

:where(.content-palette-dark) .color-currentColor-ondark, .border-block-end-color-currentColor,
.border-block-end-color-currentColor-hover:is(:hover, :focus),
.border-block-end-color-currentColor-init:not(:is(:hover, :focus)) {
  border-block-end-color: currentColor;
}

:where(.content-palette-dark) .color-dark-ondark, .border-block-end-color-dark,
.border-block-end-color-dark-hover:is(:hover, :focus),
.border-block-end-color-dark-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-dark);
}

:where(.content-palette-dark) .color-dark-alt-ondark, .border-block-end-color-dark-alt,
.border-block-end-color-dark-alt-hover:is(:hover, :focus),
.border-block-end-color-dark-alt-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-dark-alt);
}

:where(.content-palette-dark) .color-light-ondark, .border-block-end-color-light,
.border-block-end-color-light-hover:is(:hover, :focus),
.border-block-end-color-light-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-light);
}

:where(.content-palette-dark) .color-light-alt-ondark, .border-block-end-color-light-alt,
.border-block-end-color-light-alt-hover:is(:hover, :focus),
.border-block-end-color-light-alt-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-light-alt);
}

:where(.content-palette-dark) .color-neutral-ondark, .border-block-end-color-neutral,
.border-block-end-color-neutral-hover:is(:hover, :focus),
.border-block-end-color-neutral-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-neutral);
}

:where(.content-palette-dark) .color-neutral-light-ondark, .border-block-end-color-neutral-light,
.border-block-end-color-neutral-light-hover:is(:hover, :focus),
.border-block-end-color-neutral-light-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-neutral-light);
}

:where(.content-palette-dark) .color-neutral-lighter-ondark, .border-block-end-color-neutral-lighter,
.border-block-end-color-neutral-lighter-hover:is(:hover, :focus),
.border-block-end-color-neutral-lighter-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-neutral-lighter);
}

:where(.content-palette-dark) .color-neutral-lightest-ondark, .border-block-end-color-neutral-lightest,
.border-block-end-color-neutral-lightest-hover:is(:hover, :focus),
.border-block-end-color-neutral-lightest-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-neutral-lightest);
}

:where(.content-palette-dark) .color-neutral-dark-ondark, .border-block-end-color-neutral-dark,
.border-block-end-color-neutral-dark-hover:is(:hover, :focus),
.border-block-end-color-neutral-dark-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-neutral-dark);
}

:where(.content-palette-dark) .color-neutral-darker-ondark, .border-block-end-color-neutral-darker,
.border-block-end-color-neutral-darker-hover:is(:hover, :focus),
.border-block-end-color-neutral-darker-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-neutral-darker);
}

:where(.content-palette-dark) .color-neutral-darkest-ondark, .border-block-end-color-neutral-darkest,
.border-block-end-color-neutral-darkest-hover:is(:hover, :focus),
.border-block-end-color-neutral-darkest-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-neutral-darkest);
}

:where(.content-palette-dark) .color-primary-ondark, .border-block-end-color-primary,
.border-block-end-color-primary-hover:is(:hover, :focus),
.border-block-end-color-primary-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-primary);
}

:where(.content-palette-dark) .color-primary-alt-ondark, .border-block-end-color-primary-alt,
.border-block-end-color-primary-alt-hover:is(:hover, :focus),
.border-block-end-color-primary-alt-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-primary-alt);
}

:where(.content-palette-dark) .color-primary-gradient-start-ondark, .border-block-end-color-primary-gradient-start,
.border-block-end-color-primary-gradient-start-hover:is(:hover, :focus),
.border-block-end-color-primary-gradient-start-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-primary-gradient-start);
}

:where(.content-palette-dark) .color-primary-gradient-end-ondark, .border-block-end-color-primary-gradient-end,
.border-block-end-color-primary-gradient-end-hover:is(:hover, :focus),
.border-block-end-color-primary-gradient-end-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-primary-gradient-end);
}

:where(.content-palette-dark) .color-secondary-ondark, .border-block-end-color-secondary,
.border-block-end-color-secondary-hover:is(:hover, :focus),
.border-block-end-color-secondary-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-secondary);
}

:where(.content-palette-dark) .color-secondary-alt-ondark, .border-block-end-color-secondary-alt,
.border-block-end-color-secondary-alt-hover:is(:hover, :focus),
.border-block-end-color-secondary-alt-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-secondary-alt);
}

:where(.content-palette-dark) .color-secondary-gradient-start-ondark, .border-block-end-color-secondary-gradient-start,
.border-block-end-color-secondary-gradient-start-hover:is(:hover, :focus),
.border-block-end-color-secondary-gradient-start-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-secondary-gradient-start);
}

:where(.content-palette-dark) .color-secondary-gradient-end-ondark, .border-block-end-color-secondary-gradient-end,
.border-block-end-color-secondary-gradient-end-hover:is(:hover, :focus),
.border-block-end-color-secondary-gradient-end-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-secondary-gradient-end);
}

:where(.content-palette-dark) .color-accent-ondark, .border-block-end-color-accent,
.border-block-end-color-accent-hover:is(:hover, :focus),
.border-block-end-color-accent-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-accent);
}

:where(.content-palette-dark) .color-accent-alt-ondark, .border-block-end-color-accent-alt,
.border-block-end-color-accent-alt-hover:is(:hover, :focus),
.border-block-end-color-accent-alt-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-accent-alt);
}

:where(.content-palette-dark) .color-accent-gradient-start-ondark, .border-block-end-color-accent-gradient-start,
.border-block-end-color-accent-gradient-start-hover:is(:hover, :focus),
.border-block-end-color-accent-gradient-start-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-accent-gradient-start);
}

:where(.content-palette-dark) .color-accent-gradient-end-ondark, .border-block-end-color-accent-gradient-end,
.border-block-end-color-accent-gradient-end-hover:is(:hover, :focus),
.border-block-end-color-accent-gradient-end-init:not(:is(:hover, :focus)) {
  border-block-end-color: var(--color-accent-gradient-end);
}

/* border-inline-start-color helpers
--------------------------------------------------------------- */
:where(.content-palette-dark) .color-inherit-ondark, .border-inline-start-color-inherit,
.border-inline-start-color-inherit-hover:is(:hover, :focus),
.border-inline-start-color-inherit-init:not(:is(:hover, :focus)) {
  border-inline-start-color: inherit;
}

:where(.content-palette-dark) .color-transparent-ondark, .border-inline-start-color-transparent,
.border-inline-start-color-transparent-hover:is(:hover, :focus),
.border-inline-start-color-transparent-init:not(:is(:hover, :focus)) {
  border-inline-start-color: transparent;
}

:where(.content-palette-dark) .color-currentColor-ondark, .border-inline-start-color-currentColor,
.border-inline-start-color-currentColor-hover:is(:hover, :focus),
.border-inline-start-color-currentColor-init:not(:is(:hover, :focus)) {
  border-inline-start-color: currentColor;
}

:where(.content-palette-dark) .color-dark-ondark, .border-inline-start-color-dark,
.border-inline-start-color-dark-hover:is(:hover, :focus),
.border-inline-start-color-dark-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-dark);
}

:where(.content-palette-dark) .color-dark-alt-ondark, .border-inline-start-color-dark-alt,
.border-inline-start-color-dark-alt-hover:is(:hover, :focus),
.border-inline-start-color-dark-alt-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-dark-alt);
}

:where(.content-palette-dark) .color-light-ondark, .border-inline-start-color-light,
.border-inline-start-color-light-hover:is(:hover, :focus),
.border-inline-start-color-light-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-light);
}

:where(.content-palette-dark) .color-light-alt-ondark, .border-inline-start-color-light-alt,
.border-inline-start-color-light-alt-hover:is(:hover, :focus),
.border-inline-start-color-light-alt-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-light-alt);
}

:where(.content-palette-dark) .color-neutral-ondark, .border-inline-start-color-neutral,
.border-inline-start-color-neutral-hover:is(:hover, :focus),
.border-inline-start-color-neutral-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-neutral);
}

:where(.content-palette-dark) .color-neutral-light-ondark, .border-inline-start-color-neutral-light,
.border-inline-start-color-neutral-light-hover:is(:hover, :focus),
.border-inline-start-color-neutral-light-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-neutral-light);
}

:where(.content-palette-dark) .color-neutral-lighter-ondark, .border-inline-start-color-neutral-lighter,
.border-inline-start-color-neutral-lighter-hover:is(:hover, :focus),
.border-inline-start-color-neutral-lighter-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-neutral-lighter);
}

:where(.content-palette-dark) .color-neutral-lightest-ondark, .border-inline-start-color-neutral-lightest,
.border-inline-start-color-neutral-lightest-hover:is(:hover, :focus),
.border-inline-start-color-neutral-lightest-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-neutral-lightest);
}

:where(.content-palette-dark) .color-neutral-dark-ondark, .border-inline-start-color-neutral-dark,
.border-inline-start-color-neutral-dark-hover:is(:hover, :focus),
.border-inline-start-color-neutral-dark-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-neutral-dark);
}

:where(.content-palette-dark) .color-neutral-darker-ondark, .border-inline-start-color-neutral-darker,
.border-inline-start-color-neutral-darker-hover:is(:hover, :focus),
.border-inline-start-color-neutral-darker-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-neutral-darker);
}

:where(.content-palette-dark) .color-neutral-darkest-ondark, .border-inline-start-color-neutral-darkest,
.border-inline-start-color-neutral-darkest-hover:is(:hover, :focus),
.border-inline-start-color-neutral-darkest-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-neutral-darkest);
}

:where(.content-palette-dark) .color-primary-ondark, .border-inline-start-color-primary,
.border-inline-start-color-primary-hover:is(:hover, :focus),
.border-inline-start-color-primary-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-primary);
}

:where(.content-palette-dark) .color-primary-alt-ondark, .border-inline-start-color-primary-alt,
.border-inline-start-color-primary-alt-hover:is(:hover, :focus),
.border-inline-start-color-primary-alt-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-primary-alt);
}

:where(.content-palette-dark) .color-primary-gradient-start-ondark, .border-inline-start-color-primary-gradient-start,
.border-inline-start-color-primary-gradient-start-hover:is(:hover, :focus),
.border-inline-start-color-primary-gradient-start-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-primary-gradient-start);
}

:where(.content-palette-dark) .color-primary-gradient-end-ondark, .border-inline-start-color-primary-gradient-end,
.border-inline-start-color-primary-gradient-end-hover:is(:hover, :focus),
.border-inline-start-color-primary-gradient-end-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-primary-gradient-end);
}

:where(.content-palette-dark) .color-secondary-ondark, .border-inline-start-color-secondary,
.border-inline-start-color-secondary-hover:is(:hover, :focus),
.border-inline-start-color-secondary-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-secondary);
}

:where(.content-palette-dark) .color-secondary-alt-ondark, .border-inline-start-color-secondary-alt,
.border-inline-start-color-secondary-alt-hover:is(:hover, :focus),
.border-inline-start-color-secondary-alt-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-secondary-alt);
}

:where(.content-palette-dark) .color-secondary-gradient-start-ondark, .border-inline-start-color-secondary-gradient-start,
.border-inline-start-color-secondary-gradient-start-hover:is(:hover, :focus),
.border-inline-start-color-secondary-gradient-start-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-secondary-gradient-start);
}

:where(.content-palette-dark) .color-secondary-gradient-end-ondark, .border-inline-start-color-secondary-gradient-end,
.border-inline-start-color-secondary-gradient-end-hover:is(:hover, :focus),
.border-inline-start-color-secondary-gradient-end-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-secondary-gradient-end);
}

:where(.content-palette-dark) .color-accent-ondark, .border-inline-start-color-accent,
.border-inline-start-color-accent-hover:is(:hover, :focus),
.border-inline-start-color-accent-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-accent);
}

:where(.content-palette-dark) .color-accent-alt-ondark, .border-inline-start-color-accent-alt,
.border-inline-start-color-accent-alt-hover:is(:hover, :focus),
.border-inline-start-color-accent-alt-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-accent-alt);
}

:where(.content-palette-dark) .color-accent-gradient-start-ondark, .border-inline-start-color-accent-gradient-start,
.border-inline-start-color-accent-gradient-start-hover:is(:hover, :focus),
.border-inline-start-color-accent-gradient-start-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-accent-gradient-start);
}

:where(.content-palette-dark) .color-accent-gradient-end-ondark, .border-inline-start-color-accent-gradient-end,
.border-inline-start-color-accent-gradient-end-hover:is(:hover, :focus),
.border-inline-start-color-accent-gradient-end-init:not(:is(:hover, :focus)) {
  border-inline-start-color: var(--color-accent-gradient-end);
}

/* border-inline-end-color helpers
--------------------------------------------------------------- */
:where(.content-palette-dark) .color-inherit-ondark, .border-inline-end-color-inherit,
.border-inline-end-color-inherit-hover:is(:hover, :focus),
.border-inline-end-color-inherit-init:not(:is(:hover, :focus)) {
  border-inline-end-color: inherit;
}

:where(.content-palette-dark) .color-transparent-ondark, .border-inline-end-color-transparent,
.border-inline-end-color-transparent-hover:is(:hover, :focus),
.border-inline-end-color-transparent-init:not(:is(:hover, :focus)) {
  border-inline-end-color: transparent;
}

:where(.content-palette-dark) .color-currentColor-ondark, .border-inline-end-color-currentColor,
.border-inline-end-color-currentColor-hover:is(:hover, :focus),
.border-inline-end-color-currentColor-init:not(:is(:hover, :focus)) {
  border-inline-end-color: currentColor;
}

:where(.content-palette-dark) .color-dark-ondark, .border-inline-end-color-dark,
.border-inline-end-color-dark-hover:is(:hover, :focus),
.border-inline-end-color-dark-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-dark);
}

:where(.content-palette-dark) .color-dark-alt-ondark, .border-inline-end-color-dark-alt,
.border-inline-end-color-dark-alt-hover:is(:hover, :focus),
.border-inline-end-color-dark-alt-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-dark-alt);
}

:where(.content-palette-dark) .color-light-ondark, .border-inline-end-color-light,
.border-inline-end-color-light-hover:is(:hover, :focus),
.border-inline-end-color-light-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-light);
}

:where(.content-palette-dark) .color-light-alt-ondark, .border-inline-end-color-light-alt,
.border-inline-end-color-light-alt-hover:is(:hover, :focus),
.border-inline-end-color-light-alt-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-light-alt);
}

:where(.content-palette-dark) .color-neutral-ondark, .border-inline-end-color-neutral,
.border-inline-end-color-neutral-hover:is(:hover, :focus),
.border-inline-end-color-neutral-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-neutral);
}

:where(.content-palette-dark) .color-neutral-light-ondark, .border-inline-end-color-neutral-light,
.border-inline-end-color-neutral-light-hover:is(:hover, :focus),
.border-inline-end-color-neutral-light-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-neutral-light);
}

:where(.content-palette-dark) .color-neutral-lighter-ondark, .border-inline-end-color-neutral-lighter,
.border-inline-end-color-neutral-lighter-hover:is(:hover, :focus),
.border-inline-end-color-neutral-lighter-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-neutral-lighter);
}

:where(.content-palette-dark) .color-neutral-lightest-ondark, .border-inline-end-color-neutral-lightest,
.border-inline-end-color-neutral-lightest-hover:is(:hover, :focus),
.border-inline-end-color-neutral-lightest-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-neutral-lightest);
}

:where(.content-palette-dark) .color-neutral-dark-ondark, .border-inline-end-color-neutral-dark,
.border-inline-end-color-neutral-dark-hover:is(:hover, :focus),
.border-inline-end-color-neutral-dark-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-neutral-dark);
}

:where(.content-palette-dark) .color-neutral-darker-ondark, .border-inline-end-color-neutral-darker,
.border-inline-end-color-neutral-darker-hover:is(:hover, :focus),
.border-inline-end-color-neutral-darker-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-neutral-darker);
}

:where(.content-palette-dark) .color-neutral-darkest-ondark, .border-inline-end-color-neutral-darkest,
.border-inline-end-color-neutral-darkest-hover:is(:hover, :focus),
.border-inline-end-color-neutral-darkest-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-neutral-darkest);
}

:where(.content-palette-dark) .color-primary-ondark, .border-inline-end-color-primary,
.border-inline-end-color-primary-hover:is(:hover, :focus),
.border-inline-end-color-primary-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-primary);
}

:where(.content-palette-dark) .color-primary-alt-ondark, .border-inline-end-color-primary-alt,
.border-inline-end-color-primary-alt-hover:is(:hover, :focus),
.border-inline-end-color-primary-alt-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-primary-alt);
}

:where(.content-palette-dark) .color-primary-gradient-start-ondark, .border-inline-end-color-primary-gradient-start,
.border-inline-end-color-primary-gradient-start-hover:is(:hover, :focus),
.border-inline-end-color-primary-gradient-start-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-primary-gradient-start);
}

:where(.content-palette-dark) .color-primary-gradient-end-ondark, .border-inline-end-color-primary-gradient-end,
.border-inline-end-color-primary-gradient-end-hover:is(:hover, :focus),
.border-inline-end-color-primary-gradient-end-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-primary-gradient-end);
}

:where(.content-palette-dark) .color-secondary-ondark, .border-inline-end-color-secondary,
.border-inline-end-color-secondary-hover:is(:hover, :focus),
.border-inline-end-color-secondary-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-secondary);
}

:where(.content-palette-dark) .color-secondary-alt-ondark, .border-inline-end-color-secondary-alt,
.border-inline-end-color-secondary-alt-hover:is(:hover, :focus),
.border-inline-end-color-secondary-alt-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-secondary-alt);
}

:where(.content-palette-dark) .color-secondary-gradient-start-ondark, .border-inline-end-color-secondary-gradient-start,
.border-inline-end-color-secondary-gradient-start-hover:is(:hover, :focus),
.border-inline-end-color-secondary-gradient-start-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-secondary-gradient-start);
}

:where(.content-palette-dark) .color-secondary-gradient-end-ondark, .border-inline-end-color-secondary-gradient-end,
.border-inline-end-color-secondary-gradient-end-hover:is(:hover, :focus),
.border-inline-end-color-secondary-gradient-end-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-secondary-gradient-end);
}

:where(.content-palette-dark) .color-accent-ondark, .border-inline-end-color-accent,
.border-inline-end-color-accent-hover:is(:hover, :focus),
.border-inline-end-color-accent-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-accent);
}

:where(.content-palette-dark) .color-accent-alt-ondark, .border-inline-end-color-accent-alt,
.border-inline-end-color-accent-alt-hover:is(:hover, :focus),
.border-inline-end-color-accent-alt-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-accent-alt);
}

:where(.content-palette-dark) .color-accent-gradient-start-ondark, .border-inline-end-color-accent-gradient-start,
.border-inline-end-color-accent-gradient-start-hover:is(:hover, :focus),
.border-inline-end-color-accent-gradient-start-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-accent-gradient-start);
}

:where(.content-palette-dark) .color-accent-gradient-end-ondark, .border-inline-end-color-accent-gradient-end,
.border-inline-end-color-accent-gradient-end-hover:is(:hover, :focus),
.border-inline-end-color-accent-gradient-end-init:not(:is(:hover, :focus)) {
  border-inline-end-color: var(--color-accent-gradient-end);
}

/* outline-color helpers
--------------------------------------------------------------- */
:where(.content-palette-dark) .color-inherit-ondark, .outline-color-inherit,
.outline-color-inherit-hover:is(:hover, :focus),
.outline-color-inherit-init:not(:is(:hover, :focus)) {
  outline-color: inherit;
}

:where(.content-palette-dark) .color-transparent-ondark, .outline-color-transparent,
.outline-color-transparent-hover:is(:hover, :focus),
.outline-color-transparent-init:not(:is(:hover, :focus)) {
  outline-color: transparent;
}

:where(.content-palette-dark) .color-currentColor-ondark, .outline-color-currentColor,
.outline-color-currentColor-hover:is(:hover, :focus),
.outline-color-currentColor-init:not(:is(:hover, :focus)) {
  outline-color: currentColor;
}

:where(.content-palette-dark) .color-dark-ondark, .outline-color-dark,
.outline-color-dark-hover:is(:hover, :focus),
.outline-color-dark-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-dark);
}

:where(.content-palette-dark) .color-dark-alt-ondark, .outline-color-dark-alt,
.outline-color-dark-alt-hover:is(:hover, :focus),
.outline-color-dark-alt-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-dark-alt);
}

:where(.content-palette-dark) .color-light-ondark, .outline-color-light,
.outline-color-light-hover:is(:hover, :focus),
.outline-color-light-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-light);
}

:where(.content-palette-dark) .color-light-alt-ondark, .outline-color-light-alt,
.outline-color-light-alt-hover:is(:hover, :focus),
.outline-color-light-alt-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-light-alt);
}

:where(.content-palette-dark) .color-neutral-ondark, .outline-color-neutral,
.outline-color-neutral-hover:is(:hover, :focus),
.outline-color-neutral-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-neutral);
}

:where(.content-palette-dark) .color-neutral-light-ondark, .outline-color-neutral-light,
.outline-color-neutral-light-hover:is(:hover, :focus),
.outline-color-neutral-light-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-neutral-light);
}

:where(.content-palette-dark) .color-neutral-lighter-ondark, .outline-color-neutral-lighter,
.outline-color-neutral-lighter-hover:is(:hover, :focus),
.outline-color-neutral-lighter-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-neutral-lighter);
}

:where(.content-palette-dark) .color-neutral-lightest-ondark, .outline-color-neutral-lightest,
.outline-color-neutral-lightest-hover:is(:hover, :focus),
.outline-color-neutral-lightest-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-neutral-lightest);
}

:where(.content-palette-dark) .color-neutral-dark-ondark, .outline-color-neutral-dark,
.outline-color-neutral-dark-hover:is(:hover, :focus),
.outline-color-neutral-dark-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-neutral-dark);
}

:where(.content-palette-dark) .color-neutral-darker-ondark, .outline-color-neutral-darker,
.outline-color-neutral-darker-hover:is(:hover, :focus),
.outline-color-neutral-darker-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-neutral-darker);
}

:where(.content-palette-dark) .color-neutral-darkest-ondark, .outline-color-neutral-darkest,
.outline-color-neutral-darkest-hover:is(:hover, :focus),
.outline-color-neutral-darkest-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-neutral-darkest);
}

:where(.content-palette-dark) .color-primary-ondark, .outline-color-primary,
.outline-color-primary-hover:is(:hover, :focus),
.outline-color-primary-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-primary);
}

:where(.content-palette-dark) .color-primary-alt-ondark, .outline-color-primary-alt,
.outline-color-primary-alt-hover:is(:hover, :focus),
.outline-color-primary-alt-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-primary-alt);
}

:where(.content-palette-dark) .color-primary-gradient-start-ondark, .outline-color-primary-gradient-start,
.outline-color-primary-gradient-start-hover:is(:hover, :focus),
.outline-color-primary-gradient-start-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-primary-gradient-start);
}

:where(.content-palette-dark) .color-primary-gradient-end-ondark, .outline-color-primary-gradient-end,
.outline-color-primary-gradient-end-hover:is(:hover, :focus),
.outline-color-primary-gradient-end-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-primary-gradient-end);
}

:where(.content-palette-dark) .color-secondary-ondark, .outline-color-secondary,
.outline-color-secondary-hover:is(:hover, :focus),
.outline-color-secondary-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-secondary);
}

:where(.content-palette-dark) .color-secondary-alt-ondark, .outline-color-secondary-alt,
.outline-color-secondary-alt-hover:is(:hover, :focus),
.outline-color-secondary-alt-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-secondary-alt);
}

:where(.content-palette-dark) .color-secondary-gradient-start-ondark, .outline-color-secondary-gradient-start,
.outline-color-secondary-gradient-start-hover:is(:hover, :focus),
.outline-color-secondary-gradient-start-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-secondary-gradient-start);
}

:where(.content-palette-dark) .color-secondary-gradient-end-ondark, .outline-color-secondary-gradient-end,
.outline-color-secondary-gradient-end-hover:is(:hover, :focus),
.outline-color-secondary-gradient-end-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-secondary-gradient-end);
}

:where(.content-palette-dark) .color-accent-ondark, .outline-color-accent,
.outline-color-accent-hover:is(:hover, :focus),
.outline-color-accent-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-accent);
}

:where(.content-palette-dark) .color-accent-alt-ondark, .outline-color-accent-alt,
.outline-color-accent-alt-hover:is(:hover, :focus),
.outline-color-accent-alt-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-accent-alt);
}

:where(.content-palette-dark) .color-accent-gradient-start-ondark, .outline-color-accent-gradient-start,
.outline-color-accent-gradient-start-hover:is(:hover, :focus),
.outline-color-accent-gradient-start-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-accent-gradient-start);
}

:where(.content-palette-dark) .color-accent-gradient-end-ondark, .outline-color-accent-gradient-end,
.outline-color-accent-gradient-end-hover:is(:hover, :focus),
.outline-color-accent-gradient-end-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-accent-gradient-end);
}

/* fill helpers
--------------------------------------------------------------- */
:where(.content-palette-dark) .color-inherit-ondark, .fill-inherit,
.fill-inherit-hover:is(:hover, :focus),
.fill-inherit-init:not(:is(:hover, :focus)) {
  fill: inherit;
}

:where(.content-palette-dark) .color-transparent-ondark, .fill-transparent,
.fill-transparent-hover:is(:hover, :focus),
.fill-transparent-init:not(:is(:hover, :focus)) {
  fill: transparent;
}

:where(.content-palette-dark) .color-currentColor-ondark, .fill-currentColor,
.fill-currentColor-hover:is(:hover, :focus),
.fill-currentColor-init:not(:is(:hover, :focus)) {
  fill: currentColor;
}

:where(.content-palette-dark) .color-dark-ondark, .fill-dark,
.fill-dark-hover:is(:hover, :focus),
.fill-dark-init:not(:is(:hover, :focus)) {
  fill: var(--color-dark);
}

:where(.content-palette-dark) .color-dark-alt-ondark, .fill-dark-alt,
.fill-dark-alt-hover:is(:hover, :focus),
.fill-dark-alt-init:not(:is(:hover, :focus)) {
  fill: var(--color-dark-alt);
}

:where(.content-palette-dark) .color-light-ondark, .fill-light,
.fill-light-hover:is(:hover, :focus),
.fill-light-init:not(:is(:hover, :focus)) {
  fill: var(--color-light);
}

:where(.content-palette-dark) .color-light-alt-ondark, .fill-light-alt,
.fill-light-alt-hover:is(:hover, :focus),
.fill-light-alt-init:not(:is(:hover, :focus)) {
  fill: var(--color-light-alt);
}

:where(.content-palette-dark) .color-neutral-ondark, .fill-neutral,
.fill-neutral-hover:is(:hover, :focus),
.fill-neutral-init:not(:is(:hover, :focus)) {
  fill: var(--color-neutral);
}

:where(.content-palette-dark) .color-neutral-light-ondark, .fill-neutral-light,
.fill-neutral-light-hover:is(:hover, :focus),
.fill-neutral-light-init:not(:is(:hover, :focus)) {
  fill: var(--color-neutral-light);
}

:where(.content-palette-dark) .color-neutral-lighter-ondark, .fill-neutral-lighter,
.fill-neutral-lighter-hover:is(:hover, :focus),
.fill-neutral-lighter-init:not(:is(:hover, :focus)) {
  fill: var(--color-neutral-lighter);
}

:where(.content-palette-dark) .color-neutral-lightest-ondark, .fill-neutral-lightest,
.fill-neutral-lightest-hover:is(:hover, :focus),
.fill-neutral-lightest-init:not(:is(:hover, :focus)) {
  fill: var(--color-neutral-lightest);
}

:where(.content-palette-dark) .color-neutral-dark-ondark, .fill-neutral-dark,
.fill-neutral-dark-hover:is(:hover, :focus),
.fill-neutral-dark-init:not(:is(:hover, :focus)) {
  fill: var(--color-neutral-dark);
}

:where(.content-palette-dark) .color-neutral-darker-ondark, .fill-neutral-darker,
.fill-neutral-darker-hover:is(:hover, :focus),
.fill-neutral-darker-init:not(:is(:hover, :focus)) {
  fill: var(--color-neutral-darker);
}

:where(.content-palette-dark) .color-neutral-darkest-ondark, .fill-neutral-darkest,
.fill-neutral-darkest-hover:is(:hover, :focus),
.fill-neutral-darkest-init:not(:is(:hover, :focus)) {
  fill: var(--color-neutral-darkest);
}

:where(.content-palette-dark) .color-primary-ondark, .fill-primary,
.fill-primary-hover:is(:hover, :focus),
.fill-primary-init:not(:is(:hover, :focus)) {
  fill: var(--color-primary);
}

:where(.content-palette-dark) .color-primary-alt-ondark, .fill-primary-alt,
.fill-primary-alt-hover:is(:hover, :focus),
.fill-primary-alt-init:not(:is(:hover, :focus)) {
  fill: var(--color-primary-alt);
}

:where(.content-palette-dark) .color-primary-gradient-start-ondark, .fill-primary-gradient-start,
.fill-primary-gradient-start-hover:is(:hover, :focus),
.fill-primary-gradient-start-init:not(:is(:hover, :focus)) {
  fill: var(--color-primary-gradient-start);
}

:where(.content-palette-dark) .color-primary-gradient-end-ondark, .fill-primary-gradient-end,
.fill-primary-gradient-end-hover:is(:hover, :focus),
.fill-primary-gradient-end-init:not(:is(:hover, :focus)) {
  fill: var(--color-primary-gradient-end);
}

:where(.content-palette-dark) .color-secondary-ondark, .fill-secondary,
.fill-secondary-hover:is(:hover, :focus),
.fill-secondary-init:not(:is(:hover, :focus)) {
  fill: var(--color-secondary);
}

:where(.content-palette-dark) .color-secondary-alt-ondark, .fill-secondary-alt,
.fill-secondary-alt-hover:is(:hover, :focus),
.fill-secondary-alt-init:not(:is(:hover, :focus)) {
  fill: var(--color-secondary-alt);
}

:where(.content-palette-dark) .color-secondary-gradient-start-ondark, .fill-secondary-gradient-start,
.fill-secondary-gradient-start-hover:is(:hover, :focus),
.fill-secondary-gradient-start-init:not(:is(:hover, :focus)) {
  fill: var(--color-secondary-gradient-start);
}

:where(.content-palette-dark) .color-secondary-gradient-end-ondark, .fill-secondary-gradient-end,
.fill-secondary-gradient-end-hover:is(:hover, :focus),
.fill-secondary-gradient-end-init:not(:is(:hover, :focus)) {
  fill: var(--color-secondary-gradient-end);
}

:where(.content-palette-dark) .color-accent-ondark, .fill-accent,
.fill-accent-hover:is(:hover, :focus),
.fill-accent-init:not(:is(:hover, :focus)) {
  fill: var(--color-accent);
}

:where(.content-palette-dark) .color-accent-alt-ondark, .fill-accent-alt,
.fill-accent-alt-hover:is(:hover, :focus),
.fill-accent-alt-init:not(:is(:hover, :focus)) {
  fill: var(--color-accent-alt);
}

:where(.content-palette-dark) .color-accent-gradient-start-ondark, .fill-accent-gradient-start,
.fill-accent-gradient-start-hover:is(:hover, :focus),
.fill-accent-gradient-start-init:not(:is(:hover, :focus)) {
  fill: var(--color-accent-gradient-start);
}

:where(.content-palette-dark) .color-accent-gradient-end-ondark, .fill-accent-gradient-end,
.fill-accent-gradient-end-hover:is(:hover, :focus),
.fill-accent-gradient-end-init:not(:is(:hover, :focus)) {
  fill: var(--color-accent-gradient-end);
}

/* stroke helpers
--------------------------------------------------------------- */
:where(.content-palette-dark) .color-inherit-ondark, .stroke-inherit,
.stroke-inherit-hover:is(:hover, :focus),
.stroke-inherit-init:not(:is(:hover, :focus)) {
  stroke: inherit;
}

:where(.content-palette-dark) .color-transparent-ondark, .stroke-transparent,
.stroke-transparent-hover:is(:hover, :focus),
.stroke-transparent-init:not(:is(:hover, :focus)) {
  stroke: transparent;
}

:where(.content-palette-dark) .color-currentColor-ondark, .stroke-currentColor,
.stroke-currentColor-hover:is(:hover, :focus),
.stroke-currentColor-init:not(:is(:hover, :focus)) {
  stroke: currentColor;
}

:where(.content-palette-dark) .color-dark-ondark, .stroke-dark,
.stroke-dark-hover:is(:hover, :focus),
.stroke-dark-init:not(:is(:hover, :focus)) {
  stroke: var(--color-dark);
}

:where(.content-palette-dark) .color-dark-alt-ondark, .stroke-dark-alt,
.stroke-dark-alt-hover:is(:hover, :focus),
.stroke-dark-alt-init:not(:is(:hover, :focus)) {
  stroke: var(--color-dark-alt);
}

:where(.content-palette-dark) .color-light-ondark, .stroke-light,
.stroke-light-hover:is(:hover, :focus),
.stroke-light-init:not(:is(:hover, :focus)) {
  stroke: var(--color-light);
}

:where(.content-palette-dark) .color-light-alt-ondark, .stroke-light-alt,
.stroke-light-alt-hover:is(:hover, :focus),
.stroke-light-alt-init:not(:is(:hover, :focus)) {
  stroke: var(--color-light-alt);
}

:where(.content-palette-dark) .color-neutral-ondark, .stroke-neutral,
.stroke-neutral-hover:is(:hover, :focus),
.stroke-neutral-init:not(:is(:hover, :focus)) {
  stroke: var(--color-neutral);
}

:where(.content-palette-dark) .color-neutral-light-ondark, .stroke-neutral-light,
.stroke-neutral-light-hover:is(:hover, :focus),
.stroke-neutral-light-init:not(:is(:hover, :focus)) {
  stroke: var(--color-neutral-light);
}

:where(.content-palette-dark) .color-neutral-lighter-ondark, .stroke-neutral-lighter,
.stroke-neutral-lighter-hover:is(:hover, :focus),
.stroke-neutral-lighter-init:not(:is(:hover, :focus)) {
  stroke: var(--color-neutral-lighter);
}

:where(.content-palette-dark) .color-neutral-lightest-ondark, .stroke-neutral-lightest,
.stroke-neutral-lightest-hover:is(:hover, :focus),
.stroke-neutral-lightest-init:not(:is(:hover, :focus)) {
  stroke: var(--color-neutral-lightest);
}

:where(.content-palette-dark) .color-neutral-dark-ondark, .stroke-neutral-dark,
.stroke-neutral-dark-hover:is(:hover, :focus),
.stroke-neutral-dark-init:not(:is(:hover, :focus)) {
  stroke: var(--color-neutral-dark);
}

:where(.content-palette-dark) .color-neutral-darker-ondark, .stroke-neutral-darker,
.stroke-neutral-darker-hover:is(:hover, :focus),
.stroke-neutral-darker-init:not(:is(:hover, :focus)) {
  stroke: var(--color-neutral-darker);
}

:where(.content-palette-dark) .color-neutral-darkest-ondark, .stroke-neutral-darkest,
.stroke-neutral-darkest-hover:is(:hover, :focus),
.stroke-neutral-darkest-init:not(:is(:hover, :focus)) {
  stroke: var(--color-neutral-darkest);
}

:where(.content-palette-dark) .color-primary-ondark, .stroke-primary,
.stroke-primary-hover:is(:hover, :focus),
.stroke-primary-init:not(:is(:hover, :focus)) {
  stroke: var(--color-primary);
}

:where(.content-palette-dark) .color-primary-alt-ondark, .stroke-primary-alt,
.stroke-primary-alt-hover:is(:hover, :focus),
.stroke-primary-alt-init:not(:is(:hover, :focus)) {
  stroke: var(--color-primary-alt);
}

:where(.content-palette-dark) .color-primary-gradient-start-ondark, .stroke-primary-gradient-start,
.stroke-primary-gradient-start-hover:is(:hover, :focus),
.stroke-primary-gradient-start-init:not(:is(:hover, :focus)) {
  stroke: var(--color-primary-gradient-start);
}

:where(.content-palette-dark) .color-primary-gradient-end-ondark, .stroke-primary-gradient-end,
.stroke-primary-gradient-end-hover:is(:hover, :focus),
.stroke-primary-gradient-end-init:not(:is(:hover, :focus)) {
  stroke: var(--color-primary-gradient-end);
}

:where(.content-palette-dark) .color-secondary-ondark, .stroke-secondary,
.stroke-secondary-hover:is(:hover, :focus),
.stroke-secondary-init:not(:is(:hover, :focus)) {
  stroke: var(--color-secondary);
}

:where(.content-palette-dark) .color-secondary-alt-ondark, .stroke-secondary-alt,
.stroke-secondary-alt-hover:is(:hover, :focus),
.stroke-secondary-alt-init:not(:is(:hover, :focus)) {
  stroke: var(--color-secondary-alt);
}

:where(.content-palette-dark) .color-secondary-gradient-start-ondark, .stroke-secondary-gradient-start,
.stroke-secondary-gradient-start-hover:is(:hover, :focus),
.stroke-secondary-gradient-start-init:not(:is(:hover, :focus)) {
  stroke: var(--color-secondary-gradient-start);
}

:where(.content-palette-dark) .color-secondary-gradient-end-ondark, .stroke-secondary-gradient-end,
.stroke-secondary-gradient-end-hover:is(:hover, :focus),
.stroke-secondary-gradient-end-init:not(:is(:hover, :focus)) {
  stroke: var(--color-secondary-gradient-end);
}

:where(.content-palette-dark) .color-accent-ondark, .stroke-accent,
.stroke-accent-hover:is(:hover, :focus),
.stroke-accent-init:not(:is(:hover, :focus)) {
  stroke: var(--color-accent);
}

:where(.content-palette-dark) .color-accent-alt-ondark, .stroke-accent-alt,
.stroke-accent-alt-hover:is(:hover, :focus),
.stroke-accent-alt-init:not(:is(:hover, :focus)) {
  stroke: var(--color-accent-alt);
}

:where(.content-palette-dark) .color-accent-gradient-start-ondark, .stroke-accent-gradient-start,
.stroke-accent-gradient-start-hover:is(:hover, :focus),
.stroke-accent-gradient-start-init:not(:is(:hover, :focus)) {
  stroke: var(--color-accent-gradient-start);
}

:where(.content-palette-dark) .color-accent-gradient-end-ondark, .stroke-accent-gradient-end,
.stroke-accent-gradient-end-hover:is(:hover, :focus),
.stroke-accent-gradient-end-init:not(:is(:hover, :focus)) {
  stroke: var(--color-accent-gradient-end);
}

/* stop-color helpers
--------------------------------------------------------------- */
:where(.content-palette-dark) .color-inherit-ondark, .stop-color-inherit,
.stop-color-inherit-hover:is(:hover, :focus),
.stop-color-inherit-init:not(:is(:hover, :focus)) {
  stop-color: inherit;
}

:where(.content-palette-dark) .color-transparent-ondark, .stop-color-transparent,
.stop-color-transparent-hover:is(:hover, :focus),
.stop-color-transparent-init:not(:is(:hover, :focus)) {
  stop-color: transparent;
}

:where(.content-palette-dark) .color-currentColor-ondark, .stop-color-currentColor,
.stop-color-currentColor-hover:is(:hover, :focus),
.stop-color-currentColor-init:not(:is(:hover, :focus)) {
  stop-color: currentColor;
}

:where(.content-palette-dark) .color-dark-ondark, .stop-color-dark,
.stop-color-dark-hover:is(:hover, :focus),
.stop-color-dark-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-dark);
}

:where(.content-palette-dark) .color-dark-alt-ondark, .stop-color-dark-alt,
.stop-color-dark-alt-hover:is(:hover, :focus),
.stop-color-dark-alt-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-dark-alt);
}

:where(.content-palette-dark) .color-light-ondark, .stop-color-light,
.stop-color-light-hover:is(:hover, :focus),
.stop-color-light-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-light);
}

:where(.content-palette-dark) .color-light-alt-ondark, .stop-color-light-alt,
.stop-color-light-alt-hover:is(:hover, :focus),
.stop-color-light-alt-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-light-alt);
}

:where(.content-palette-dark) .color-neutral-ondark, .stop-color-neutral,
.stop-color-neutral-hover:is(:hover, :focus),
.stop-color-neutral-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-neutral);
}

:where(.content-palette-dark) .color-neutral-light-ondark, .stop-color-neutral-light,
.stop-color-neutral-light-hover:is(:hover, :focus),
.stop-color-neutral-light-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-neutral-light);
}

:where(.content-palette-dark) .color-neutral-lighter-ondark, .stop-color-neutral-lighter,
.stop-color-neutral-lighter-hover:is(:hover, :focus),
.stop-color-neutral-lighter-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-neutral-lighter);
}

:where(.content-palette-dark) .color-neutral-lightest-ondark, .stop-color-neutral-lightest,
.stop-color-neutral-lightest-hover:is(:hover, :focus),
.stop-color-neutral-lightest-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-neutral-lightest);
}

:where(.content-palette-dark) .color-neutral-dark-ondark, .stop-color-neutral-dark,
.stop-color-neutral-dark-hover:is(:hover, :focus),
.stop-color-neutral-dark-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-neutral-dark);
}

:where(.content-palette-dark) .color-neutral-darker-ondark, .stop-color-neutral-darker,
.stop-color-neutral-darker-hover:is(:hover, :focus),
.stop-color-neutral-darker-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-neutral-darker);
}

:where(.content-palette-dark) .color-neutral-darkest-ondark, .stop-color-neutral-darkest,
.stop-color-neutral-darkest-hover:is(:hover, :focus),
.stop-color-neutral-darkest-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-neutral-darkest);
}

:where(.content-palette-dark) .color-primary-ondark, .stop-color-primary,
.stop-color-primary-hover:is(:hover, :focus),
.stop-color-primary-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-primary);
}

:where(.content-palette-dark) .color-primary-alt-ondark, .stop-color-primary-alt,
.stop-color-primary-alt-hover:is(:hover, :focus),
.stop-color-primary-alt-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-primary-alt);
}

:where(.content-palette-dark) .color-primary-gradient-start-ondark, .stop-color-primary-gradient-start,
.stop-color-primary-gradient-start-hover:is(:hover, :focus),
.stop-color-primary-gradient-start-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-primary-gradient-start);
}

:where(.content-palette-dark) .color-primary-gradient-end-ondark, .stop-color-primary-gradient-end,
.stop-color-primary-gradient-end-hover:is(:hover, :focus),
.stop-color-primary-gradient-end-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-primary-gradient-end);
}

:where(.content-palette-dark) .color-secondary-ondark, .stop-color-secondary,
.stop-color-secondary-hover:is(:hover, :focus),
.stop-color-secondary-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-secondary);
}

:where(.content-palette-dark) .color-secondary-alt-ondark, .stop-color-secondary-alt,
.stop-color-secondary-alt-hover:is(:hover, :focus),
.stop-color-secondary-alt-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-secondary-alt);
}

:where(.content-palette-dark) .color-secondary-gradient-start-ondark, .stop-color-secondary-gradient-start,
.stop-color-secondary-gradient-start-hover:is(:hover, :focus),
.stop-color-secondary-gradient-start-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-secondary-gradient-start);
}

:where(.content-palette-dark) .color-secondary-gradient-end-ondark, .stop-color-secondary-gradient-end,
.stop-color-secondary-gradient-end-hover:is(:hover, :focus),
.stop-color-secondary-gradient-end-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-secondary-gradient-end);
}

:where(.content-palette-dark) .color-accent-ondark, .stop-color-accent,
.stop-color-accent-hover:is(:hover, :focus),
.stop-color-accent-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-accent);
}

:where(.content-palette-dark) .color-accent-alt-ondark, .stop-color-accent-alt,
.stop-color-accent-alt-hover:is(:hover, :focus),
.stop-color-accent-alt-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-accent-alt);
}

:where(.content-palette-dark) .color-accent-gradient-start-ondark, .stop-color-accent-gradient-start,
.stop-color-accent-gradient-start-hover:is(:hover, :focus),
.stop-color-accent-gradient-start-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-accent-gradient-start);
}

:where(.content-palette-dark) .color-accent-gradient-end-ondark, .stop-color-accent-gradient-end,
.stop-color-accent-gradient-end-hover:is(:hover, :focus),
.stop-color-accent-gradient-end-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-accent-gradient-end);
}

/* flood-color helpers
--------------------------------------------------------------- */
:where(.content-palette-dark) .color-inherit-ondark, .flood-color-inherit,
.flood-color-inherit-hover:is(:hover, :focus),
.flood-color-inherit-init:not(:is(:hover, :focus)) {
  flood-color: inherit;
}

:where(.content-palette-dark) .color-transparent-ondark, .flood-color-transparent,
.flood-color-transparent-hover:is(:hover, :focus),
.flood-color-transparent-init:not(:is(:hover, :focus)) {
  flood-color: transparent;
}

:where(.content-palette-dark) .color-currentColor-ondark, .flood-color-currentColor,
.flood-color-currentColor-hover:is(:hover, :focus),
.flood-color-currentColor-init:not(:is(:hover, :focus)) {
  flood-color: currentColor;
}

:where(.content-palette-dark) .color-dark-ondark, .flood-color-dark,
.flood-color-dark-hover:is(:hover, :focus),
.flood-color-dark-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-dark);
}

:where(.content-palette-dark) .color-dark-alt-ondark, .flood-color-dark-alt,
.flood-color-dark-alt-hover:is(:hover, :focus),
.flood-color-dark-alt-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-dark-alt);
}

:where(.content-palette-dark) .color-light-ondark, .flood-color-light,
.flood-color-light-hover:is(:hover, :focus),
.flood-color-light-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-light);
}

:where(.content-palette-dark) .color-light-alt-ondark, .flood-color-light-alt,
.flood-color-light-alt-hover:is(:hover, :focus),
.flood-color-light-alt-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-light-alt);
}

:where(.content-palette-dark) .color-neutral-ondark, .flood-color-neutral,
.flood-color-neutral-hover:is(:hover, :focus),
.flood-color-neutral-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-neutral);
}

:where(.content-palette-dark) .color-neutral-light-ondark, .flood-color-neutral-light,
.flood-color-neutral-light-hover:is(:hover, :focus),
.flood-color-neutral-light-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-neutral-light);
}

:where(.content-palette-dark) .color-neutral-lighter-ondark, .flood-color-neutral-lighter,
.flood-color-neutral-lighter-hover:is(:hover, :focus),
.flood-color-neutral-lighter-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-neutral-lighter);
}

:where(.content-palette-dark) .color-neutral-lightest-ondark, .flood-color-neutral-lightest,
.flood-color-neutral-lightest-hover:is(:hover, :focus),
.flood-color-neutral-lightest-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-neutral-lightest);
}

:where(.content-palette-dark) .color-neutral-dark-ondark, .flood-color-neutral-dark,
.flood-color-neutral-dark-hover:is(:hover, :focus),
.flood-color-neutral-dark-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-neutral-dark);
}

:where(.content-palette-dark) .color-neutral-darker-ondark, .flood-color-neutral-darker,
.flood-color-neutral-darker-hover:is(:hover, :focus),
.flood-color-neutral-darker-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-neutral-darker);
}

:where(.content-palette-dark) .color-neutral-darkest-ondark, .flood-color-neutral-darkest,
.flood-color-neutral-darkest-hover:is(:hover, :focus),
.flood-color-neutral-darkest-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-neutral-darkest);
}

:where(.content-palette-dark) .color-primary-ondark, .flood-color-primary,
.flood-color-primary-hover:is(:hover, :focus),
.flood-color-primary-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-primary);
}

:where(.content-palette-dark) .color-primary-alt-ondark, .flood-color-primary-alt,
.flood-color-primary-alt-hover:is(:hover, :focus),
.flood-color-primary-alt-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-primary-alt);
}

:where(.content-palette-dark) .color-primary-gradient-start-ondark, .flood-color-primary-gradient-start,
.flood-color-primary-gradient-start-hover:is(:hover, :focus),
.flood-color-primary-gradient-start-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-primary-gradient-start);
}

:where(.content-palette-dark) .color-primary-gradient-end-ondark, .flood-color-primary-gradient-end,
.flood-color-primary-gradient-end-hover:is(:hover, :focus),
.flood-color-primary-gradient-end-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-primary-gradient-end);
}

:where(.content-palette-dark) .color-secondary-ondark, .flood-color-secondary,
.flood-color-secondary-hover:is(:hover, :focus),
.flood-color-secondary-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-secondary);
}

:where(.content-palette-dark) .color-secondary-alt-ondark, .flood-color-secondary-alt,
.flood-color-secondary-alt-hover:is(:hover, :focus),
.flood-color-secondary-alt-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-secondary-alt);
}

:where(.content-palette-dark) .color-secondary-gradient-start-ondark, .flood-color-secondary-gradient-start,
.flood-color-secondary-gradient-start-hover:is(:hover, :focus),
.flood-color-secondary-gradient-start-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-secondary-gradient-start);
}

:where(.content-palette-dark) .color-secondary-gradient-end-ondark, .flood-color-secondary-gradient-end,
.flood-color-secondary-gradient-end-hover:is(:hover, :focus),
.flood-color-secondary-gradient-end-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-secondary-gradient-end);
}

:where(.content-palette-dark) .color-accent-ondark, .flood-color-accent,
.flood-color-accent-hover:is(:hover, :focus),
.flood-color-accent-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-accent);
}

:where(.content-palette-dark) .color-accent-alt-ondark, .flood-color-accent-alt,
.flood-color-accent-alt-hover:is(:hover, :focus),
.flood-color-accent-alt-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-accent-alt);
}

:where(.content-palette-dark) .color-accent-gradient-start-ondark, .flood-color-accent-gradient-start,
.flood-color-accent-gradient-start-hover:is(:hover, :focus),
.flood-color-accent-gradient-start-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-accent-gradient-start);
}

:where(.content-palette-dark) .color-accent-gradient-end-ondark, .flood-color-accent-gradient-end,
.flood-color-accent-gradient-end-hover:is(:hover, :focus),
.flood-color-accent-gradient-end-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-accent-gradient-end);
}

/* lighting-color helpers
--------------------------------------------------------------- */
:where(.content-palette-dark) .color-inherit-ondark, .lighting-color-inherit,
.lighting-color-inherit-hover:is(:hover, :focus),
.lighting-color-inherit-init:not(:is(:hover, :focus)) {
  lighting-color: inherit;
}

:where(.content-palette-dark) .color-transparent-ondark, .lighting-color-transparent,
.lighting-color-transparent-hover:is(:hover, :focus),
.lighting-color-transparent-init:not(:is(:hover, :focus)) {
  lighting-color: transparent;
}

:where(.content-palette-dark) .color-currentColor-ondark, .lighting-color-currentColor,
.lighting-color-currentColor-hover:is(:hover, :focus),
.lighting-color-currentColor-init:not(:is(:hover, :focus)) {
  lighting-color: currentColor;
}

:where(.content-palette-dark) .color-dark-ondark, .lighting-color-dark,
.lighting-color-dark-hover:is(:hover, :focus),
.lighting-color-dark-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-dark);
}

:where(.content-palette-dark) .color-dark-alt-ondark, .lighting-color-dark-alt,
.lighting-color-dark-alt-hover:is(:hover, :focus),
.lighting-color-dark-alt-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-dark-alt);
}

:where(.content-palette-dark) .color-light-ondark, .lighting-color-light,
.lighting-color-light-hover:is(:hover, :focus),
.lighting-color-light-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-light);
}

:where(.content-palette-dark) .color-light-alt-ondark, .lighting-color-light-alt,
.lighting-color-light-alt-hover:is(:hover, :focus),
.lighting-color-light-alt-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-light-alt);
}

:where(.content-palette-dark) .color-neutral-ondark, .lighting-color-neutral,
.lighting-color-neutral-hover:is(:hover, :focus),
.lighting-color-neutral-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-neutral);
}

:where(.content-palette-dark) .color-neutral-light-ondark, .lighting-color-neutral-light,
.lighting-color-neutral-light-hover:is(:hover, :focus),
.lighting-color-neutral-light-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-neutral-light);
}

:where(.content-palette-dark) .color-neutral-lighter-ondark, .lighting-color-neutral-lighter,
.lighting-color-neutral-lighter-hover:is(:hover, :focus),
.lighting-color-neutral-lighter-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-neutral-lighter);
}

:where(.content-palette-dark) .color-neutral-lightest-ondark, .lighting-color-neutral-lightest,
.lighting-color-neutral-lightest-hover:is(:hover, :focus),
.lighting-color-neutral-lightest-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-neutral-lightest);
}

:where(.content-palette-dark) .color-neutral-dark-ondark, .lighting-color-neutral-dark,
.lighting-color-neutral-dark-hover:is(:hover, :focus),
.lighting-color-neutral-dark-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-neutral-dark);
}

:where(.content-palette-dark) .color-neutral-darker-ondark, .lighting-color-neutral-darker,
.lighting-color-neutral-darker-hover:is(:hover, :focus),
.lighting-color-neutral-darker-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-neutral-darker);
}

:where(.content-palette-dark) .color-neutral-darkest-ondark, .lighting-color-neutral-darkest,
.lighting-color-neutral-darkest-hover:is(:hover, :focus),
.lighting-color-neutral-darkest-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-neutral-darkest);
}

:where(.content-palette-dark) .color-primary-ondark, .lighting-color-primary,
.lighting-color-primary-hover:is(:hover, :focus),
.lighting-color-primary-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-primary);
}

:where(.content-palette-dark) .color-primary-alt-ondark, .lighting-color-primary-alt,
.lighting-color-primary-alt-hover:is(:hover, :focus),
.lighting-color-primary-alt-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-primary-alt);
}

:where(.content-palette-dark) .color-primary-gradient-start-ondark, .lighting-color-primary-gradient-start,
.lighting-color-primary-gradient-start-hover:is(:hover, :focus),
.lighting-color-primary-gradient-start-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-primary-gradient-start);
}

:where(.content-palette-dark) .color-primary-gradient-end-ondark, .lighting-color-primary-gradient-end,
.lighting-color-primary-gradient-end-hover:is(:hover, :focus),
.lighting-color-primary-gradient-end-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-primary-gradient-end);
}

:where(.content-palette-dark) .color-secondary-ondark, .lighting-color-secondary,
.lighting-color-secondary-hover:is(:hover, :focus),
.lighting-color-secondary-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-secondary);
}

:where(.content-palette-dark) .color-secondary-alt-ondark, .lighting-color-secondary-alt,
.lighting-color-secondary-alt-hover:is(:hover, :focus),
.lighting-color-secondary-alt-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-secondary-alt);
}

:where(.content-palette-dark) .color-secondary-gradient-start-ondark, .lighting-color-secondary-gradient-start,
.lighting-color-secondary-gradient-start-hover:is(:hover, :focus),
.lighting-color-secondary-gradient-start-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-secondary-gradient-start);
}

:where(.content-palette-dark) .color-secondary-gradient-end-ondark, .lighting-color-secondary-gradient-end,
.lighting-color-secondary-gradient-end-hover:is(:hover, :focus),
.lighting-color-secondary-gradient-end-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-secondary-gradient-end);
}

:where(.content-palette-dark) .color-accent-ondark, .lighting-color-accent,
.lighting-color-accent-hover:is(:hover, :focus),
.lighting-color-accent-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-accent);
}

:where(.content-palette-dark) .color-accent-alt-ondark, .lighting-color-accent-alt,
.lighting-color-accent-alt-hover:is(:hover, :focus),
.lighting-color-accent-alt-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-accent-alt);
}

:where(.content-palette-dark) .color-accent-gradient-start-ondark, .lighting-color-accent-gradient-start,
.lighting-color-accent-gradient-start-hover:is(:hover, :focus),
.lighting-color-accent-gradient-start-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-accent-gradient-start);
}

:where(.content-palette-dark) .color-accent-gradient-end-ondark, .lighting-color-accent-gradient-end,
.lighting-color-accent-gradient-end-hover:is(:hover, :focus),
.lighting-color-accent-gradient-end-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-accent-gradient-end);
}

/* ================================================================================
* Global Critical Components - UI/ Build Elements These need edits based on the design
================================================================================ */
/* Accordion: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/accordion.md#accordion
--------------------------------------------------------------- */
/* .accordion Skeletons. Do Not Edit */
.accordion:not(.open) {
  display: none;
}

/* .accordion-toggle Skeletons */
.accordion-trigger {
  cursor: pointer;
}
.accordion-trigger > * {
  pointer-events: none;
}

/* Accordion: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/accordion.md#accordion
--------------------------------------------------------------- */
/* there should be no need to add customizations to this class, but just in case */
/* Accordion: Toggle  https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/accordion.md#data-toggle-accordion
--------------------------------------------------------------- */
.accordion-trigger {
  cursor: pointer;
}
.accordion-trigger:is(.list-title)::after {
  display: inline-block;
  align-self: center;
  flex: 0 0 auto;
  content: "\25BC\FE0E";
  content: "+";
}
.accordion-trigger.open {
  color: var(--color-primary);
}
.accordion-trigger.open::after {
  content: "-";
}

/* Content Accordion
--------------------------------------------------------------- */
:where(.content :is(h2, *.h2)):has(+ .content-accordion.content-block) {
  font-size: 2.8125rem;
  line-height: 0.9;
  font-family: var(--font-secondary);
  color: var(--scheme-sp, var(--color-secondary));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 600;
  font-size: 45px !important;
  margin-block-start: 75px;
  margin-block-end: 33px;
}

.content-accordion.content-block {
  inline-size: 100%;
  max-inline-size: 100%;
  margin-block: 0;
  margin-inline: 0;
}
.content-accordion.content-block .content-accordion-list {
  inline-size: 100%;
  max-inline-size: none;
  padding-block-end: 0;
  margin-block: 0;
  margin-inline: 0;
  border-block-end: 1px solid var(--color-neutral);
}
.content-accordion.content-block .content-accordion-list-title {
  font-size: 1.5rem;
  line-height: 1.25;
  font-family: var(--font-accent);
  color: var(--scheme-sp, var(--color-secondary-alt));
  letter-spacing: 0em;
  text-transform: none;
  font-style: normal;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 33px;
  padding-block: 30px;
  min-block-size: 100px;
  margin-block: 0;
  overflow-wrap: anywhere;
}
.content-accordion.content-block .content-accordion-list-title::after {
  content: "";
  display: block;
  flex: 0 0 40px;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background-color: var(--color-primary);
  background-image: url("/wp-content/themes/1p21-boilerplate/images/icon-accordion-chevron.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15px 8px;
  transition: transform 0.25s ease-in-out;
}
.content-accordion.content-block .content-accordion-list-title.open {
  color: var(--scheme-sp, var(--color-secondary-alt));
}
.content-accordion.content-block .content-accordion-list-title.open::after {
  content: "";
  transform: rotate(180deg);
}
.content-accordion.content-block .content-accordion-list-items {
  padding: 0;
  margin: 0;
  padding-block: 0 30px;
}
.content-accordion.content-block .content-accordion-list-item,
.content-accordion.content-block .content-accordion-list-item-el {
  padding: 0;
  margin: 0;
}
.content-accordion.content-block .content-accordion-list-item-el > :last-child {
  margin-block-end: 0;
}

/* Buttons: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/button.md#button
--------------------------------------------------------------- */
/* .button Skeletons. Do Not Edit */
.button {
  border: var(--button-border-width, 1px) solid;
  padding-inline: var(--button-padding-x, 1em);
  padding-block: calc(var(--button-padding-y, calc((var(--button-height, 4em) - var(--button-border-width, 2px) * 2 - 1em * var(--button-lines, 1) * var(--button-line-height, 1.25)) * 0.5)) - var(--button-border-width, 1px));
  line-height: var(--button-line-height, 1.5);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  max-inline-size: 100%;
  background: none;
  text-align: center;
  transition: all 0.125s ease-in-out;
  border-radius: var(--button-border-radius, 0px);
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  gap: 0.25em;
  background-clip: border-box;
  background-origin: border-box;
}
.button:is(.button-style-legacy) {
  min-block-size: var(--button-height, 3em);
  padding-inline: calc(var(--button-padding-x, 1em) - var(--button-border-width, 1px));
  padding-block: calc((var(--button-height) - var(--button-border-width, 1px) * 2 - 1em * var(--button-lines) * var(--button-line-height)) * var(--button-baseline-offset)) calc((var(--button-height) - var(--button-border-width, 1px) * 2 - 1em * var(--button-lines) * var(--button-line-height)) * (1 - var(--button-baseline-offset)));
}
.button, .button:is(:hover, :focus) {
  text-decoration: none;
}

/* Buttons: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/buttons.md
--------------------------------------------------------------- */
/* Button Customizations: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/buttons.md#css-vars 
--------------------------------------------------------------- */
.button {
  --button-height: 3.3125rem;
  --button-border-width: 0px;
  /* border width. This will be accounted for in calculating the button height as well */
  --button-border-radius: 3px;
  /* button radius */
  --button-padding-x: 1.0588em;
  /* horizontal padding */
  /* vertical padding */
  --button-line-height: 1;
  /* line height
  * Usually there's no need to modify this unless a multiline button is present in the design and has a line height drastically different to what is set (currently 1.125).
  * NOTE: this value has to be unitless for calc values to work.
  * Formula is line-height-px / font-size-px 
  * font-size 16px and line-height at 20px
  * 20/16 = 1.25 (Note: Unitless value) */
  font-size: 1.0625rem;
  line-height: var(--button-line-height);
  font-family: var(--font-accent);
  color: var(--color-primary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 800;
  text-decoration: none;
  min-inline-size: 0;
}
/* Buttons Sizing Helpers: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/button.md#button-size-name
--------------------------------------------------------------- */
/* button w/ a height even more smaller than the default height */
.button.button-size-micro {
  font-size: 0.75rem;
  --button-padding-y: .5em;
}
/* button w/ a height smaller than the default height */
.button.button-size-small {
  font-size: 0.875rem;
  --button-padding-y: .5em;
}
/* button w/ a height slightly larger than the default height but it's not that big */
.button.button-size-medium {
  --button-height: 4.5em;
  --button-padding-y: 1.25em;
}
/* button w/ a height larger than the default height */
.button.button-size-large {
  --button-padding-y: 1.5em;
}
/* button w/ a height that's even larger for no reason than the larger height */
.button.button-size-larger {
  font-size: 1.25rem;
  --button-padding-y: 1.75em;
}
/* constricts the width equal to whatever size height is set*/
.button.button-size-equal {
  --button-padding-x: var(--button-padding-y);
  min-inline-size: 0;
  block-size: var(--button-height, calc(1em * var(--button-line-height) + 2em));
  inline-size: auto;
  aspect-ratio: 1/1;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Buttons Color Palette Helpers: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/button.md#button-palette-name
--------------------------------------------------------------- */
/* 
* Default - most frequent button palette in the comps
* Invert - reuses default's colors but palettes for hover vs not hover are reversed
* Outline - text w/ border influencing text color
* Minimal - no colors except for the text
Adjust as needed.
*/
.button.button-palette-default, .button.button-palette-reverse:is(:hover, :focus) {
  background-image: none;
  background-color: var(--color-red-200);
  color: var(--color-white);
  border-color: transparent;
}
.button.button-palette-default:is(:hover, :focus), .button.button-palette-outline:is(:hover, :focus), .button.button-palette-reverse {
  background-image: none;
  background-color: var(--color-blue-300);
  color: var(--color-white);
  border-color: transparent;
}
.button.button-palette-minimal {
  background-color: transparent;
  background-image: none;
  color: inherit;
  border-color: transparent;
}
.button.button-palette-minimal:is(:hover, :focus) {
  background-color: transparent;
  background-image: none;
  color: var(--scheme-sp, var(--color-primary));
  border-color: transparent;
}
.button.button-palette-outline {
  background-color: transparent;
  background-image: none;
  color: inherit;
  border-color: currentColor;
}
/*
primary palette. adjust or omit as needed
* Tip: if both a flat and gradient version of the palette exists in the design, adding the class .button-style-flat to this .button-palette-* class will disable the gradient
*/
/*
secondary palette. adjust or omit as needed
* Tip: if both a flat and gradient version of the palette exists in the design, adding the class .button-style-flat to this .button-palette-* class will disable the gradient
*/
/*
accent palette. adjust or omit as needed
* Tip: if both a flat and gradient version of the palette exists in the design, adding the class .button-style-flat to this .button-palette-* class will disable the gradient
*/
/* Light buttons used over saturated brand backgrounds. */
.button.button-palette-light {
  background-color: var(--color-white);
  background-image: none;
  color: var(--color-navy-100);
  border-color: transparent;
}
.button.button-palette-light:is(:hover, :focus) {
  background-color: var(--color-blue-300);
  background-image: none;
  color: var(--color-white);
  border-color: transparent;
}

/* Other Buttons Variations Helpers: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/button.md#button-style-name
--------------------------------------------------------------- */
/* buttons with extra decorations or whichever is the most specially styled. overhaul or add more button styles as needed */
.button.button-style-special {
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  --button-border-offset: 0.5em;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 var(--button-border-width) var(--color-accent);
  border-width: var(--button-border-offset);
  background-clip: padding-box;
  padding-block: calc(var(--button-padding-y, 1em) - var(--button-border-offset) - var(--button-border-width, 1px));
}
.button.button-style-special::before {
  content: "";
  transition: box-shadow 0.125s ease-in-out;
  display: inline-block;
  align-self: center;
  margin-inline-end: 0.375em;
  margin-inline-start: 0.375em;
  margin-block-end: 0.375em;
  inline-size: 1.5rem;
  block-size: var(--button-border-width);
  background: currentColor;
  box-shadow: 0em -0.375em 0 0, -0.375em 0 0 0, 0.375em 0 0 0, 0em 0.375em 0 0;
}
.button.button-style-special:is(:hover, :focus) {
  box-shadow: 0 0 0 var(--button-border-width) var(--color-primary);
  border-color: rgba(255, 255, 255, 0.5);
}
.button.button-style-special:is(:hover, :focus)::before {
  box-shadow: 0.375em -0.375em 0 0, -0.75em 0 0 0, -0.75em 0 0 0, 0.375em 0.375em 0 0;
}

/* link style legacy. for the old weirs we styled the button */
/* link style button. Usually the maps link or read more text for blog posts */
.button.button-style-link {
  --button-border-width: 2px;
  border-radius: 0;
  padding: 0 0 0.5em;
  border-inline-width: 0;
  border-block-width: 0 var(--button-border-width);
  background: none;
  box-shadow: none;
  min-block-size: 0;
  min-inline-size: 0;
  color: inherit;
  letter-spacing: 0em;
  text-transform: none;
}
.button.button-style-link:is(:hover, :focus) {
  background: none;
  border-color: var(--color-primary);
}

/* undo background gradients in favor for the flat background color for button-palette. will only work if backgrounds are setup with proper fallbacks (background-gradient with a background-color fallback) */
.button.button-style-flat, .button.button-style-flat:is(:hover, :focus) {
  background-image: none;
}

/* remove radius */
.button.button-style-no-radius {
  --button-border-radius: 0;
}

/* no corners for the button. only soft bbies */
.button.button-style-round {
  --button-border-radius: 999em;
}

/* very corners for the button. only pointy bbies */
.button.button-style-sharp {
  --button-border-radius: 0em;
}

/* button styles that have thicker borders than usual */
.button.button-style-thick-border {
  --button-border-width: 4px;
}

/* button styles that have thicker borders than usual */
.button.button-style-thin-border {
  --button-border-width: 1px;
}

/* button styles that have thicker borders than usual */
.button.button-style-no-border {
  --button-border-width: 0px;
}

/* diamond buttons. best if paired with .button-size-equal */
@supports (clip-path: polygon(0 0, 0 0, 0 0, 0 0)) {
  .button.button-style-diamond {
    overflow: hidden;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  }
}

/* if the slider buttons have unique overrides */
.button.button-style-slider.button-palette-minimal {
  --button-height: 2.5em;
  --button-padding-x: 0.4em;
}
/* Misc Button stuff. Add as needed
--------------------------------------------------------------- */
/* Glyph stuff. little arrow indicator for slider arrows: .button.button-size-equal.button-palette-default > i.button-slider-glyph */
.button-glyph:empty {
  align-self: center;
  display: inline-flex;
  max-height: max-content;
  transition: 0.25s ease-in-out all;
  will-change: order;
}
.button-glyph:empty::after {
  display: inline-block;
  order: 9;
  align-self: center;
  transform-origin: center center;
  /* slider glyph border arrow styles */
  content: "";
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  mask-size: contain;
  mask-position: center center;
  mask-repeat: no-repeat;
}
.doc-images-loaded .button-glyph-arrow:empty::after {
  mask-image: var(--icon-arrow);
  background-color: currentColor;
}
:is(.prev, [rel=prev], .slick-prev, .swpier-button-prev) .button-glyph-arrow:empty {
  transform: scaleX(-1) rotate(90deg);
}

:is(.prev, [rel=prev], .slick-prev, .swpier-button-prev) .button-glyph-arrow {
  transform: scaleX(-1);
}

.button-glyph-slider:empty::after {
  border: 2px solid currentColor;
  border-top: 0;
  border-left: 0;
  transform: rotate(-45deg);
  margin-inline-start: -0.375em;
}
:is(.prev, [rel=prev], .slick-prev, .swpier-button-prev) .button-glyph-slider {
  transform: scaleX(-1);
}

/* Columns: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/columns.md#columns
--------------------------------------------------------------- */
/* .columns Skeletons. Do Not Edit */
.columns {
  inline-size: 100%;
}
.columns,
.columns > :where(*) {
  min-inline-size: 0;
  max-inline-size: 100%;
  inline-size: 100%;
}
.columns:where(.columns-flex) {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--columns-gap-y, var(--column-gap, 0rem));
  column-gap: var(--columns-gap-x, var(--column-gap, 0rem));
}
.columns:where(.columns-flex) > :where(*) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(100% / var(--columns-number, 1) - var(--columns-gap-x) * (var(--columns-number, 1) - 1) / var(--columns-number, 1));
}
.columns:where(.columns-grid) {
  display: grid;
  row-gap: var(--columns-gap-y, var(--column-gap, 0rem));
  column-gap: var(--columns-gap-x, var(--column-gap, 0rem));
  grid-template-columns: repeat(var(--columns-number, 1), minmax(0, 1fr));
}
.columns.columns-masonry {
  column-count: var(--columns-number, 1);
  -webkit-column-count: var(--columns-number, 1);
  column-gap: var(--columns-gap-x, var(--column-gap, 0rem));
  -webkit-column-gap: var(--columns-gap-x, var(--column-gap, 0rem));
}
.columns.columns-masonry > :where(*) {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
.columns.columns-masonry > :where(*):nth-child(n+2) {
  margin-block-start: var(--columns-gap-y, var(--column-gap, 0rem));
}

/* Columns: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/columns.md
--------------------------------------------------------------- */
/* Column Customizations
Vars: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/columns.md#css-vars
--------------------------------------------------------------- */
.columns {
  --columns-gap: 0rem;
  /* distance between columns both horizontally and vertically. if different gaps are desired, set the variables below instead */
  --columns-gap-x: var(--columns-gap);
  /* distance between columns horizontally */
  --columns-gap-y: var(--columns-gap);
  /* distance between columns vertically */
  --columns-number: 1;
  /* Number of columns desired for the layout */
}

/* Group: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/section.md
Figma Autolayout grouping helper classes. Uses grid by default.
TODO. document whatever is going on here
--------------------------------------------------------------- */
/* Group: Skeletons/barebones. no need to edit
--------------------------------------------------------------- */
/* .group-frame and .group-module - Section blocks / grid scaffolding */
.group-frame {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-flow: dense;
  inline-size: 100%;
  gap: 2rem;
}

/* .group-frame and .group-module - Section blocks / grid scaffolding */
.group-frame, .group-module {
  min-inline-size: 0;
  min-block-size: 0;
}

/* .group- universal helpers
--------------------------------------------------------------- */
/* .group-style-maxed - dont let stuff grow too wide or beyond available width */
.group-style-maxed:is(.group-frame) {
  /* if placed on group-frame, the frame will only grow based on max width of its contents available */
  max-inline-size: max-content;
  justify-self: center;
  margin-inline: auto;
}
.group-style-maxed:is(.group-module, :has(.group-frame > .group-module)),
.group-style-maxed .group-module {
  /* if child of group-frame or placed on group-module, the frame will only grow based on the group-frame's available width */
  max-inline-size: 100%;
}
@media only screen and (min-width: 22.5rem) and (max-width: 47.9375rem) {
  .group-style-maxed-xs:is(.group-frame) {
    max-inline-size: max-content;
    justify-self: center;
    margin-inline: auto;
  }
  .group-style-maxed-xs:is(.group-module, :has(.group-frame > .group-module)),
  .group-style-maxed-xs .group-module {
    max-inline-size: 100%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 74.9375rem) {
  .group-style-maxed-sm:is(.group-frame) {
    max-inline-size: max-content;
    justify-self: center;
    margin-inline: auto;
  }
  .group-style-maxed-sm:is(.group-module, :has(.group-frame > .group-module)),
  .group-style-maxed-sm .group-module {
    max-inline-size: 100%;
  }
}
@media only screen and (min-width: 75rem) {
  .group-style-maxed-nontouch:is(.group-frame) {
    max-inline-size: max-content;
    justify-self: center;
    margin-inline: auto;
  }
  .group-style-maxed-nontouch:is(.group-module, :has(.group-frame > .group-module)),
  .group-style-maxed-nontouch .group-module {
    max-inline-size: 100%;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .group-style-maxed-touch:is(.group-frame) {
    max-inline-size: 100%;
    justify-self: center;
  }
  .group-style-maxed-touch:is(.group-module, :has(.group-frame > .group-module)),
  .group-style-maxed-touch .group-module {
    max-inline-size: 100%;
  }
}
/* .group-style-bypass - make an element within the group-frame be ignored as a group-frame child */
.group-frame .group-style-bypass {
  display: contents !important;
}
@media only screen and (min-width: 48rem) and (max-width: 74.9375rem) {
  .group-frame .group-style-bypass-sm {
    display: contents !important;
  }
}
@media only screen and (min-width: 75rem) {
  .group-frame .group-style-bypass-nontouch {
    display: contents !important;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .group-frame .group-style-bypass-touch {
    display: contents !important;
  }
}
/* .group-center-inline - center though the inline axis */
/* todo apply to layouts like banner.. ooo especially banner */
.group-align-center-inline {
  text-align: center;
}
.group-align-center-inline:is(.group-frame) {
  /* if placed on group-frame, all items inside will be justified center */
  justify-items: center;
  justify-content: center;
}
.group-align-center-inline:is(.group-module, :has(.group-frame > .group-module)),
.group-align-center-inline .group-module {
  /* if placed on group-module, only this item will be centered */
  justify-self: center;
}
@media only screen and (min-width: 48rem) and (max-width: 74.9375rem) {
  .group-align-center-inline-sm {
    text-align: center;
  }
  .group-align-center-inline-sm:is(.group-frame) {
    justify-items: center;
    justify-content: center;
  }
  .group-align-center-inline-sm:is(.group-module, :has(.group-frame > .group-module)),
  .group-align-center-inline-sm .group-module {
    justify-self: center;
  }
}
@media only screen and (min-width: 75rem) {
  .group-align-center-inline-nontouch {
    text-align: center;
  }
  .group-align-center-inline-nontouch:is(.group-frame) {
    justify-items: center;
    justify-content: center;
  }
  .group-align-center-inline-nontouch:is(.group-module, :has(.group-frame > .group-module)),
  .group-align-center-inline-nontouch .group-module {
    justify-self: center;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .group-align-center-inline-touch {
    text-align: center;
  }
  .group-align-center-inline-touch:is(.group-frame) {
    justify-items: center;
    justify-content: center;
  }
  .group-align-center-inline-touch:is(.group-module, :has(.group-frame > .group-module)),
  .group-align-center-inline-touch .group-module {
    justify-self: center;
  }
}
/* .group-end-inline - align to end though the inline axis */
/* todo apply to layouts like banner.. ooo especially banner */
.group-align-end-inline:is(.group-frame) {
  /* if placed on group-frame, all items inside will be justified center */
  justify-items: end;
  justify-content: end;
}
.group-align-end-inline:is(.group-module, :has(.group-frame > .group-module)),
.group-align-end-inline .group-module {
  /* if placed on group-module, only this item will be ended */
  justify-self: self-end;
}
@media only screen and (min-width: 48rem) and (max-width: 74.9375rem) {
  .group-align-end-inline-sm:is(.group-frame) {
    justify-items: end;
    justify-content: end;
  }
  .group-align-end-inline-sm:is(.group-module, :has(.group-frame > .group-module)),
  .group-align-end-inline-sm .group-module {
    justify-self: self-end;
  }
}
@media only screen and (min-width: 75rem) {
  .group-align-end-inline-nontouch:is(.group-frame) {
    justify-items: end;
    justify-content: end;
  }
  .group-align-end-inline-nontouch:is(.group-module, :has(.group-frame > .group-module)),
  .group-align-end-inline-nontouch .group-module {
    justify-self: self-end;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .group-align-end-inline-touch:is(.group-frame) {
    justify-items: end;
    justify-content: end;
  }
  .group-align-end-inline-touch:is(.group-module, :has(.group-frame > .group-module)),
  .group-align-end-inline-touch .group-module {
    justify-self: self-end;
  }
}
/* .group-start-inline - align to end though the inline axis */
/* todo apply to layouts like banner.. ooo especially banner */
.group-align-start-inline:is(.group-frame) {
  /* if placed on group-frame, all items inside will be justified center */
  justify-items: start;
  justify-content: start;
}
.group-align-start-inline:is(.group-module, :has(.group-frame > .group-module)),
.group-align-start-inline .group-module {
  /* if placed on group-module, only this item will be started */
  justify-self: self-start;
}
@media only screen and (min-width: 48rem) and (max-width: 74.9375rem) {
  .group-align-start-inline-sm:is(.group-frame) {
    justify-items: start;
    justify-content: start;
  }
  .group-align-start-inline-sm:is(.group-module, :has(.group-frame > .group-module)),
  .group-align-start-inline-sm .group-module {
    justify-self: self-start;
  }
}
@media only screen and (min-width: 75rem) {
  .group-align-start-inline-nontouch:is(.group-frame) {
    justify-items: start;
    justify-content: start;
  }
  .group-align-start-inline-nontouch:is(.group-module, :has(.group-frame > .group-module)),
  .group-align-start-inline-nontouch .group-module {
    justify-self: self-start;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .group-align-start-inline-touch:is(.group-frame) {
    justify-items: start;
    justify-content: start;
  }
  .group-align-start-inline-touch:is(.group-module, :has(.group-frame > .group-module)),
  .group-align-start-inline-touch .group-module {
    justify-self: self-start;
  }
}
/* .group-stretch-inline - align to end though the inline axis */
/* todo apply to layouts like banner.. ooo especially banner */
.group-align-stretch-inline:is(.group-frame) {
  /* if placed on group-frame, all items inside will be justified center */
  justify-items: stretch;
  justify-content: stretch;
}
.group-align-stretch-inline:is(.group-module, :has(.group-frame > .group-module)),
.group-align-stretch-inline .group-module {
  /* if placed on group-module, only this item will be stretched */
  justify-self: stretch;
}
@media only screen and (min-width: 48rem) and (max-width: 74.9375rem) {
  .group-align-stretch-inline-sm:is(.group-frame) {
    justify-items: stretch;
    justify-content: stretch;
  }
  .group-align-stretch-inline-sm:is(.group-module, :has(.group-frame > .group-module)),
  .group-align-stretch-inline-sm .group-module {
    justify-self: stretch;
  }
}
@media only screen and (min-width: 75rem) {
  .group-align-stretch-inline-nontouch:is(.group-frame) {
    justify-items: stretch;
    justify-content: stretch;
  }
  .group-align-stretch-inline-nontouch:is(.group-module, :has(.group-frame > .group-module)),
  .group-align-stretch-inline-nontouch .group-module {
    justify-self: stretch;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .group-align-stretch-inline-touch:is(.group-frame) {
    justify-items: stretch;
    justify-content: stretch;
  }
  .group-align-stretch-inline-touch:is(.group-module, :has(.group-frame > .group-module)),
  .group-align-stretch-inline-touch .group-module {
    justify-self: stretch;
  }
}
/* .group-module helpers
--------------------------------------------------------------- */
/* .group-module-style-stretch - stretch to full column. or if it's just the only child */
.group-module-style-stretch,
:where(.group-module:only-child) {
  grid-column: 1/-1;
}

@media only screen and (min-width: 48rem) and (max-width: 74.9375rem) {
  .group-module-style-stretch-sm {
    grid-column: 1/-1;
  }
}
@media only screen and (min-width: 75rem) {
  .group-module-style-stretch-nontouch {
    grid-column: 1/-1;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .group-module-style-stretch-touch {
    grid-column: 1/-1;
  }
}
/* add more as needed */
/* .section-image-can-sticky - make an image that's typically 2 column set up w/ content to stick to the viewport. NOTE: This will work but it depends how the section is styled/built
--------------------------------------------------------------- */
/* Container: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/container.md#container
--------------------------------------------------------------- */
/* .container Skeletons. Do Not Edit */
.container {
  /* do not attempt to override or your container may misalign. containers are meant to always be centered after all */
  /* Tip: if something in the design is off center, consult with designer or use additional padding or margin as needed for the contents instead */
  padding-inline: min(var(--container-fallback, 1.25rem), var(--container-gutter, var(--container-fallback, 1.25rem))) !important;
  margin-inline: auto !important;
  /* widths*/
  max-inline-size: 100%;
  inline-size: calc(100% - max(var(--container-gutter, var(--container-fallback, 1.25rem)) - min(var(--container-fallback, 1.25rem), var(--container-gutter, var(--container-fallback, 1.25rem))), 0rem) * 2);
  min-inline-size: 0;
  /* flex stuff */
  flex: 0 0 auto;
  grid-column: 1/-1;
  /* container query support */
  container: container/inline-size;
}

/* Container: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/container.md
--------------------------------------------------------------- */
/* Fallback Scaffolding. Usually no need to edit: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/container.md#css-vars 
--------------------------------------------------------------- */
.container {
  --container-fallback: 1.25rem;
  /* customizeable distance. Set as the `--container-fallback` by default. Can be customized depending on the design of a given section though 20px - 30px should be enough */
  --container-size-reference: var(--comp);
  /* window width or section width. you wont usually need to manipulate this value  unless complex split layout designs */
  --container-gutter: var(--container-fallback);
  /* the value to constrain the container's horizontal space. you will mostly modify this variable. */
}
@media only screen and (min-width: 48rem) {
  .container {
    --container-fallback: 3.75rem;
  }
}
/* on some cases container query support is a conflict of interest and makes positioned/flex/grid children act weird. use this helper if you dont need container queries */
.container.container-style-normal {
  /* container query support */
  container-type: normal;
}

/* Custom Container Size Variations: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/container.md#container-size-name
--------------------------------------------------------------- */
/* repeating/ internal page container sizing. sometimes designers will use the same gutter width for internals and or gridded template. this can be used so you dont have to copy paste identical styles to different selectos like 10 times */
.container.container-size-default {
  --container-gutter: 1.5625rem;
}
@media only screen and (min-width: 48rem) {
  .container.container-size-default {
    --container-gutter: 3.125rem;
  }
}
@media only screen and (min-width: 75rem) {
  .container.container-size-default {
    --container-gutter: 5rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .container.container-size-default {
    --container-gutter: 5.625rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .container.container-size-default {
    --container-gutter: 21.625rem;
  }
}

/* Reduces horizontal padding */
@media only screen and (min-width: 48rem) {
  .container.container-size-wide {
    --container-gutter: .9375rem;
  }
}
@media only screen and (min-width: 75rem) {
  .container.container-size-wide {
    --container-gutter: 1.875rem;
  }
}
/* Reduces horizontal padding for xs only */
@media only screen and (max-width: 47.9375rem) {
  .container.container-size-wide-xs {
    --container-gutter: .9375rem;
    --container-gutter: var(--container-fallback);
  }
}

/* Reduces horizontal padding for sm only */
@media only screen and (min-width: 48rem) and (max-width: 74.9375rem) {
  .container.container-size-wide-sm {
    --container-gutter: 1.875rem;
    --container-gutter: var(--container-fallback);
  }
}

/* Other Container Variations: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/container.md#container-style-name
--------------------------------------------------------------- */
/* sometimes when you dont need the fallback gutter for the container but also need to constrict the layout, here's ya boi. Note: Make sure you add appropriate padding for the innards of this container */
.container.container-style-no-padding {
  --container-fallback: 0rem;
}

/* constrict container to how wide it is in the deisgn comps. makes sure it never goes beyond the comp or set gutter or fallback global padding + adding important disables third party scripts from overriding our styles */
@media only screen and (min-width: 48rem) {
  .container.container-style-maxed {
    max-inline-size: calc(var(--container-size-reference) - max(var(--container-gutter) - min(var(--container-fallback), var(--container-gutter)), 0rem) * 2) !important;
  }
}

/* constrict container to how wide it is in the deisgn comps for mobile/xs and smaller only */
@media only screen and (max-width: 47.9375rem) {
  .container.container-style-maxed-xs {
    max-inline-size: calc(var(--container-size-reference) - max(var(--container-gutter) - min(var(--container-fallback), var(--container-gutter)), 0rem) * 2) !important;
  }
}

/* constrict container to how wide it is in the deisgn comps for hd/xl and beyond only */
@media only screen and (min-width: 112.5rem) {
  .container.container-style-maxed-xl {
    max-inline-size: calc(var(--container-size-reference) - max(var(--container-gutter) - min(var(--container-fallback), var(--container-gutter)), 0rem) * 2) !important;
  }
}

/* constrict container to how wide it is in the deisgn comps for touch devices/xs to sm-max only */
@media only screen and (max-width: 74.9375rem) {
  .container.container-style-maxed-touch {
    max-inline-size: calc(var(--container-size-reference) - max(var(--container-gutter) - min(var(--container-fallback), var(--container-gutter)), 0rem) * 2) !important;
  }
}

/* constrict container to how wide it is in the deisgn comps for touch devices/xs to sm-max only */
@media only screen and (min-width: 75rem) {
  .container.container-style-maxed-nontouch {
    max-inline-size: calc(var(--container-size-reference) - max(var(--container-gutter) - min(var(--container-fallback), var(--container-gutter)), 0rem) * 2) !important;
  }
}

/* Widgets https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/widget.md
--------------------------------------------------------------- */
/* Widgets Skeleton. Do not Edit 
--------------------------------------------------------------- */
.widget {
  padding-block: var(--widget-padding-top) var(--widget-padding-bottom);
  padding-inline: var(--widget-padding-x);
  position: relative;
  max-inline-size: none;
  inline-size: auto;
  overflow: hidden;
}
.widget,
.widget > :where(ul, .menu, div):not(.content),
.widget > :where(ul, .menu, div):not(.content) li {
  padding-inline: var(--widget-padding-x);
}
.widget > :where(ul, .menu, div),
.widget .widget-content {
  padding-block: var(--widget-content-padding-top) var(--widget-content-padding-bottom);
  margin-block-end: var(--widget-content-margin-bottom);
}
.widget > :where(ul, .menu, div):nth-child(n+2),
.widget .widget-content:nth-child(n+2) {
  margin-block-start: var(--widget-content-margin-top);
}
.widget > :where(ul, .menu, div):last-child, .widget > :where(ul, .menu, div):not(.content) > li, .widget > :where(ul, .menu, div):not(.content) :where(ul, .sub-menu),
.widget .widget-content:last-child,
.widget .widget-content:not(.content) > li,
.widget .widget-content:not(.content) :where(ul, .sub-menu) {
  max-inline-size: none;
  inline-size: auto;
}
.widget > :where(ul, .menu, div):last-child, .widget > :where(ul, .menu, div):not(.content) > li,
.widget .widget-content:last-child,
.widget .widget-content:not(.content) > li {
  margin-inline: calc(var(--widget-padding-x) * -1);
}
.widget > :where(ul, .menu, div):not(.content) :where(ul, .sub-menu),
.widget .widget-content:not(.content) :where(ul, .sub-menu) {
  margin-inline: var(--widget-dropdown-margin-x);
}
:is(.widget_title, .widget-title, .widgettitle) {
  padding-inline: var(--widget-title-padding-x);
  margin-block: 0;
}

.widget > :where(ul, .menu, div):not(.content) li > :is(a, :only-child) {
  padding-inline: var(--widget-item-padding-x);
}
.widget > :where(ul, .menu, div).content,
.widget .widget-content {
  padding-inline: calc(var(--widget-padding-x) + var(--widget-item-padding-x));
}
.widget > :where(ul, .menu, div):not(.content) ul li {
  padding-inline: calc(var(--widget-dropdown-padding-x) + var(--widget-dropdown-offset)) var(--widget-dropdown-padding-x);
}
.widget > :where(ul, .menu, div):not(.content) ul li > :is(a:only-child, a:has(+ :is(ul, .sub-menu))) {
  padding-inline-start: calc(var(--widget-dropdown-item-offset) + var(--widget-item-padding-x));
}
.widget > :where(ul, .menu, div):not(.content) li {
  list-style: none;
  clear: both;
}
.widget > :where(ul, .menu, div):not(.content) li > :is(a:only-child, a:has(+ :is(ul, .sub-menu))) {
  line-height: var(--widget-item-line-height) !important;
  padding-block: calc(var(--widget-item-padding-y, calc((var(--widget-item-height, 3em) - var(--widget-item-border-width, 1px) * 2 - 1em * var(--widget-item-lines, 1) * var(--widget-item-line-height, 1.25)) * 0.5)) - var(--widget-item-border-width, 1px) * 0.5);
  color: inherit;
  text-decoration: none;
  display: flex;
}
.widget > :where(ul, .menu, div):not(.content) li ul {
  border-block: var(--widget-item-border-width) solid transparent;
  padding-block: var(--widget-dropdown-padding-top) var(--widget-dropdown-padding-bottom);
  margin-block: var(--widget-dropdown-margin-top) var(--widget-dropdown-margin-bottom);
  flex: 0 0 auto;
}
.widget > :where(ul, .menu, div):not(.content) li:last-child > ul {
  border-block-end: 0;
  margin-block-end: calc(var(--widget-dropdown-padding-bottom) * -1);
}
.widget > :where(ul, .menu, div):not(.content) > li:last-child > ul {
  /* fix top level item dropdown bottom gaps */
  margin-block-end: calc((var(--widget-padding-bottom) + var(--widget-content-padding-bottom)) * -1);
}
.widget:not(.widget-style-no-toggle):not(.open) > :is(.widget_title, .widget-title, .widgettitle) + *:where(ul, .menu, div), .widget:not(.widget-style-no-toggle):not(.open):has(:is(.widget_title, .widget-title, .widgettitle)) .widget-content,
.widget:not(.widget-style-no-toggle) li:not(.open) > ul:not(:only-child) {
  /* close it all, javascript will take care of opening what needs to be opened */
  display: none;
}
:is(.widget_title, .widget-title, .widgettitle) + *:not(:where(ul, .menu, div)), .widget:has(:is(.widget_title, .widget-title, .widgettitle)) .widget-content {
  margin-top: var(--widget-content-margin-top);
}

.widget :where(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
select,
textarea,
table) {
  inline-size: 100%;
}

/* Widgets https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/widget.md
--------------------------------------------------------------- */
/* Widget Customizations https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/widget.md#css-vars
--------------------------------------------------------------- */
.widgets-wrapper {
  display: flex;
  flex-direction: column;
  gap: min(var(--default-gap-y, 3.75rem), 3.75rem);
}

.widget {
  --widget-padding-x: 1.875rem;
  /* Horizontal padding between the widgets' edges and its contents
  NOTE: the .widget, title, li, and ul/content block use this variable to adjust paddings and negative margins to align to value
  NOTE: li is being padded with --widget-padding-x to align the padding perfectly with the title, li, and uls/content block */
  --widget-padding-top: 2rem;
  /* Yes */
  --widget-padding-bottom: var(--widget-padding-top);
  /* Yes */
  --widget-dropdown-padding-top: 1rem;
  /* Yes  */
  --widget-dropdown-padding-bottom: var(--widget-dropdown-padding-top);
  /* Yes
  * will also be used to calculate negative margins for dropdowns within the last child for consistent spacing  */
  --widget-dropdown-margin-top: 0.5rem;
  /* dropdown margin top. used to distance from previous sibling link */
  --widget-dropdown-margin-bottom: var(--widget-dropdown-margin-top);
  /* dropdown margin bottom. used to distance from parent li's next sibling */
  --widget-item-border-width: 1px;
  /* border width. This will be accounted for in calculating the widget list item height as well */
  --widget-item-padding-x: .25rem;
  /* Padding to distance between only the anchor tags' and parent widget li item.
  Not affected by `--widget-padding-x` */
  --widget-item-padding-y: max(1em,1rem);
  /* Padding to distance between only the anchor tags' and parent widget li item.
  Not affected by `--widget-padding-x` */
  --widget-dropdown-margin-x: calc(var(--widget-padding-x) * -1);
  /* margin to offset dropdown. set to negative paddix x to flush, 0 to contain, whatever
  	not affected by --widget-padding-x */
  --widget-dropdown-padding-x: var(--widget-padding-x);
  /* padding for dropdow
  	not affected by --widget-padding-x */
  --widget-dropdown-offset: 2em;
  /* indent padding for dropdown. designers will prefer this if contrasting dropdown background is not set */
  /* Set to 0rem if not needed */
  --widget-dropdown-item-offset: 0em;
  /* indent padding for dropdown items. designers will prefer this if contrasting dropdown background is not set */
  /* Set to 0rem if not needed */
  --widget-title-padding-x: var(--widget-item-padding-x);
  /* horizontal padding for widget titles */
  /* Note: this value has to be unitless for calc values to work.
  * modify this value if the font seems a little too high or low in vertical alignment. 1 moves the text to the very top. 0 moves the text to the very bottom. 0.5 will center it based on the fonts' basline alignment */
  --widget-content-margin-top: 1rem;
  /* margin distance between the widget title and the widget contents */
  --widget-content-margin-bottom: 0rem;
  /* margin distance between the widget title and the widget contents */
  --widget-content-padding-top: 0rem;
  /* margin distance between the widget title and the widget contents
  	Note: if the widget accordion is closed, this hides along with the contents, meaning it wont affect the `--widget-padding-bottom` */
  --widget-content-padding-bottom: var(--widget-content-padding-top);
  /* margin distance between the widget title and the widget contents
  Tip: setting to `calc(var(--widget-padding-bottom) * -1)` can compensate the `--widget-padding-bottom` without affecting it when the widget is collapsed
  Note: if the widget accordion is closed, this hides along with the contents, meaning it wont affect the `--widget-padding-bottom` */
  --widget-item-line-height: 1.5;
  /* Note: this value has to be unitless for calc values to work. Usually there's no need to modify this unless a multiline widget list item is present in the design.
  	* Formula is line-height-px / font-size-px */
  background-color: var(--scheme-bg, var(--color-light));
  border: 1px solid var(--color-neutral);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}
.widget > :where(ul, .widget-content):not(.content) {
  color: var(--scheme-fg, var(--color-dark));
  text-align: left;
  text-decoration: none;
}
.widget > :where(ul, .widget-content):not(.content) li:not(.open) + li > a {
  border-block-start: var(--widget-item-border-width) solid rgba(127, 127, 127, 0.3);
}
.widget > :where(ul, .widget-content):not(.content) li:is(.open, :hover, :focus-within) > a {
  color: var(--scheme-sp, var(--color-primary));
}
.widget > :where(ul, .widget-content):not(.content) li ul {
  background-color: var(--scheme-bg-contrast, var(--color-light-alt));
  border-color: var(--color-neutral-lighter);
  text-align: left;
}
.widget > :where(ul, .widget-content):not(.content) li ul ul {
  background-color: rgba(0, 0, 0, 0.01);
}
.widget > :where(ul, .widget-content):not(.content) li.open {
  border-block-end: 0;
}
.widget > :where(ul, .widget-content):not(.content) li.open > a {
  border-block-end: 0;
}
/* Widget Title
--------------------------------------------------------------- */
:is(.widget_title, .widget-title, .widgettitle) {
  flex-wrap: wrap;
}
:is(.widget_title, .widget-title, .widgettitle):is(.fancy-border) {
  --fancy-border-width: 2rem;
  --fancy-border-margin-y: var(--widget-content-margin-top);
  --fancy-border-margin-l: 0;
}
:is(.widget_title, .widget-title, .widgettitle):is(.fancy-border-before)::before, :is(.widget_title, .widget-title, .widgettitle):is(.fancy-border-after)::after {
  grid-column: 1/-1;
}
.widget:not(.widget-style-no-toggle):not(.open) > :is(.widget_title, .widget-title, .widgettitle) {
  padding-block-end: 0;
  border-block-end: 0;
  margin-block-end: 0;
}
.widget:not(.widget-style-no-toggle):not(.open) > :is(.widget_title, .widget-title, .widgettitle):is(.fancy-border) {
  --fancy-border-margin-y: 0rem;
  --fancy-border-height: 0rem;
}
/* Widget Toggle
--------------------------------------------------------------- */
.widget-toggle {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 0.5em;
  cursor: pointer;
  justify-content: space-between;
}
.widget-toggle > * {
  min-inline-size: 0;
}
.widget-toggle::before {
  display: inline-block;
  order: 9;
  align-self: center;
  flex: 0 0 auto;
  content: "";
  font-size: 0.5rem;
  transform-origin: 67% 67%;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}
.open > .widget-toggle::before {
  transform: rotate(-135deg);
}
/* Widget Customization by type. Unless an extra extra custom site, there should be rarely a need to apply overrides at this point
--------------------------------------------------------------- */
/* Popup: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/popup.md#popup
--------------------------------------------------------------- */
/* .popup Skeletons. Do Not Edit */
.doc-popup-active {
  overflow-block: hidden;
}

.popup-content {
  display: none !important;
}

.popup-trigger {
  cursor: pointer;
}
.popup-trigger * {
  pointer-events: none;
}

.popup {
  display: none;
  overflow-block: auto;
  position: fixed;
  isolation: isolate;
  z-index: 99999;
  inset: 0;
  margin: 0;
  min-block-size: 100vb;
  inline-size: 100%;
  min-inline-size: 20rem;
  display: flex;
  flex-direction: column;
  background: none !important;
}
.popup.active {
  display: block;
}
.popup-overlay {
  min-block-size: 100vb;
  position: fixed;
  inset: 0;
  margin: 0;
}
.popup-body {
  overflow-block: scroll;
  block-size: 100%;
  scrollbar-width: none;
}
.popup-body::-webkit-scrollbar {
  display: none;
}
.popup-frame {
  position: relative;
}
.popup:has(.popup-constrict) .popup-frame {
  block-size: 80vb;
  inline-size: 100%;
  max-inline-size: max-content;
  max-block-size: max-content;
  align-self: center;
  margin-inline: auto;
}
.popup:has(.popup-constrict) .popup-frame :where(img, svg) {
  width: auto;
  height: auto;
  max-inline-size: min(80vi, 100%);
  max-block-size: min(80vb, 100%);
}
.popup:has(.popup-constrict) .popup-frame > *:not(.popup-destroy) {
  flex: 1 1;
  max-block-size: max-content;
  max-inline-size: max-content;
  inline-size: 100%;
  block-size: 100%;
}
.popup:has(.popup-constrict) .popup-frame > *:not(.popup-destroy) :nth-child(n+2) {
  display: none;
}
.popup:has(.popup-constrict) .popup-body {
  padding-block: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
}

/* Popup https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/popup.md
--------------------------------------------------------------- */
/* Popup Customizations
--------------------------------------------------------------- */
.popup {
  backdrop-filter: blur(3px);
}
.popup-overlay {
  background: var(--color-dark, black);
  opacity: 0.8;
}
.popup-body {
  padding-block: 10vi;
}
.popup-frame {
  background: var(--color-light, white);
  padding-block: 4.875rem;
  padding-inline: 3.75rem;
}
.popup-close-button {
  position: absolute;
  inset-block-start: 1em;
  inset-inline-end: 1em;
  background: none;
  border: 0;
  font-size: 2.5rem;
  display: block;
  inline-size: 1em;
  block-size: 1em;
  line-height: 1;
  padding: 0;
  overflow-inline: clip;
  color: var(--color-primary);
  padding-block-start: 1em;
}
.popup-close-button-text {
  font-size: 0.25em;
  text-transform: uppercase;
  text-wrap: pre-wrap;
  white-space: nowrap;
  margin-block-start: 0.5em;
  display: block;
  text-indent: -9999em;
}
.popup-close-button::before, .popup-close-button::after {
  content: "";
  display: block;
  block-size: 3px;
  inline-size: 1em;
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
}
.popup-close-button::before {
  transform: rotate(45deg);
}
.popup-close-button::after {
  transform: rotate(-45deg);
}
.popup:has(.popup-constricted) .popup-frame {
  padding: 0;
  background: none;
  box-shadow: none;
}
.popup:has(.popup-constricted) .popup-close-button {
  inset-block-start: -0.5em;
  inset-inline-end: -0.5em;
  margin-block-start: 0;
  inline-size: 1.5em;
  block-size: 1.5em;
  padding: 0.5em;
  background: var(--color-light);
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.15);
}
@media only screen and (min-width: 75rem) {
  .popup-container {
    --container-gutter: 22.5rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .popup-container {
    --container-gutter: 12.5rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .popup-container {
    --container-gutter: 22.5rem;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .popup-frame {
    padding-block: 4rem 2rem;
    padding-inline: 1.875rem;
  }
  .popup-close-button {
    font-size: 2rem;
    inset-block-start: 1.25rem;
    inset-inline-end: 1.25rem;
  }
}

/* Graphic/ design related styles or decoration styles here. Essentially, the fancy stuff enhances the gucciness of the site
--------------------------------------------------------------- */
/* Fancy Borders + HR: /* https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/fancy.md#fancy-border-css-vars
--------------------------------------------------------------- */
:where(hr),
.fancy-border {
  clear: both;
  outline: none;
  border: none;
  break-inside: avoid;
}

.fancy-border {
  --fancy-border-margin-y: 1.5rem;
  --fancy-border-margin-r: auto;
  --fancy-border-margin-l: auto;
  --fancy-border-height: 3px;
  --fancy-border-background: currentColor;
}
:where(hr),
hr:is(.fancy-border), .fancy-border.fancy-border-before::before, .fancy-border.fancy-border-after::after {
  block-size: var(--fancy-border-height, 1px);
  inline-size: var(--fancy-border-width, 100%);
  background: var(--fancy-border-background, var(--color-neutral));
  margin-inline-start: var(--fancy-border-margin-l, auto);
  margin-inline-end: var(--fancy-border-margin-r, auto);
  max-inline-size: 100%;
  grid-column: 1/-1;
  flex: 0 0 auto;
}

.fancy-border.fancy-border-before:not(hr)::before, .fancy-border.fancy-border-after:not(hr)::after {
  content: "";
}

:where(hr),
hr:is(.fancy-border),
.fancy-border-after::after,
.fancy-border-before::before {
  display: block;
  transition: all 0.375s ease-in-out;
}

.fancy-border.fancy-border-after::after {
  order: 99;
}
.fancy-border.fancy-border-before::before {
  order: -99;
}
hr.fancy-border-after, .fancy-border.fancy-border-after::after {
  margin-block-start: var(--fancy-border-margin-y, 1.875rem);
}

hr.fancy-border-before, .fancy-border.fancy-border-before::before {
  margin-block-end: var(--fancy-border-margin-y, 1.875rem);
}

.fancy-border-palette-primary {
  --fancy-border-background: var(--color-primary)
  	linear-gradient(
  		90deg,
  		var(--color-primary-gradient-start) 0%,
  		var(--color-primary-gradient-end) 100%
  	);
}
.fancy-border-palette-secondary {
  --fancy-border-background: var(--color-secondary)
  	linear-gradient(
  		90deg,
  		var(--color-secondary-gradient-start) 0%,
  		var(--color-secondary-gradient-end) 100%
  	);
}
.fancy-border-palette-accent {
  --fancy-border-background: var(--color-accent)
  	linear-gradient(
  		90deg,
  		var(--color-accent-gradient-start) 0%,
  		var(--color-accent-gradient-end) 100%
  	);
}
.fancy-border-palette-primary-alt {
  --fancy-border-background: var(--color-primary-alt)
  	linear-gradient(
  		90deg,
  		var(--color-primary-gradient-start) 0%,
  		var(--color-primary-gradient-end) 100%
  	);
}
.fancy-border-palette-secondary-alt {
  --fancy-border-background: var(--color-secondary-alt)
  	linear-gradient(
  		90deg,
  		var(--color-secondary-gradient-start) 0%,
  		var(--color-secondary-gradient-end) 100%
  	);
}
.fancy-border-palette-accent-alt {
  --fancy-border-background: var(--color-accent-alt)
  	linear-gradient(
  		90deg,
  		var(--color-accent-gradient-start) 0%,
  		var(--color-accent-gradient-end) 100%
  	);
}
.fancy-border-palette-neutral {
  --fancy-border-background: var(--color-neutral);
}
.fancy-border-palette-neutral-light {
  --fancy-border-background: var(--color-neutral-light);
}
.fancy-border-palette-neutral-lighter {
  --fancy-border-background: var(--color-neutral-lighter);
}
.fancy-border-palette-neutral-lightest {
  --fancy-border-background: var(--color-neutral-lightest);
}
.fancy-border-palette-neutral-dark {
  --fancy-border-background: var(--color-neutral-dark);
}
.fancy-border-palette-neutral-darker {
  --fancy-border-background: var(--color-neutral-darker);
}
.fancy-border-palette-neutral-darkest {
  --fancy-border-background: var(--color-neutral-darkest);
}
.fancy-border-style-grow {
  --fancy-border-margin-x: 1.25rem;
  --fancy-border-margin-y: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--fancy-border-margin-x);
  row-gap: var(--fancy-border-margin-y);
}
hr.fancy-border-style-grow, .fancy-border-style-grow.fancy-border-before::before, .fancy-border-style-grow.fancy-border-after::after {
  margin: 0;
  flex: 1 1;
}

.fancy-border-style-round {
  border-radius: 999em;
}
.fancy-border-style-thin {
  --fancy-border-height: 1px;
}
.fancy-border-style-alignleft {
  --fancy-border-margin-r: auto;
  --fancy-border-margin-l: 0;
}
.fancy-border-style-alignright {
  --fancy-border-margin-r: 0;
  --fancy-border-margin-l: auto;
}
hr.fancy-border-style-flat, .fancy-border-style-flat.fancy-border-before::before, .fancy-border-style-flat.fancy-border-after::after {
  background-image: none !important;
}

.fancy-border-style-inline {
  --fancy-border-margin-l: 0.5em;
  display: flex;
  flex-wrap: nowrap;
  row-gap: var(--fancy-border-margin-y);
  column-gap: var(--fancy-border-margin-l);
}
.fancy-border-style-inline.fancy-border-before::before, .fancy-border-style-inline.fancy-border-after::after {
  flex: 1 1;
  margin-block: 0 !important;
  align-self: center;
}
/* Animated Fancy Border: /* https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/fancy.md#fancy-border-animated
--------------------------------------------------------------- */
@media only screen and (min-width: 75rem) {
  hr.fancy-border-animated, .fancy-border-animated.fancy-border-before::before, .fancy-border-animated.fancy-border-after::after {
    transition: inline-size 1.5s ease-in-out;
  }
  .fancy-border-animated:not(.visible) {
    --fancy-border-width: 0% !important;
  }
}

/* Fancy Icons: /* https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/fancy.md#fancy-icon
--------------------------------------------------------------- */
.fancy-icon-menu {
  position: relative;
  --fancy-icon-menu-width: 2rem;
  --fancy-icon-menu-height: 1rem;
  --fancy-icon-menu-bar-height: 2px;
  --fancy-icon-menu-bar-top-width: 100%;
  --fancy-icon-menu-bar-top-margin-l: auto;
  --fancy-icon-menu-bar-top-margin-r: auto;
  --fancy-icon-menu-bar-center-width: 100%;
  --fancy-icon-menu-bar-center-margin-l: auto;
  --fancy-icon-menu-bar-center-margin-r: auto;
  --fancy-icon-menu-bar-bottom-width: 100%;
  --fancy-icon-menu-bar-bottom-margin-l: auto;
  --fancy-icon-menu-bar-bottom-margin-r: auto;
  inline-size: var(--fancy-icon-menu-width);
  block-size: var(--fancy-icon-menu-height);
}
.fancy-icon-menu span {
  position: absolute;
  transform-origin: center center;
  background: currentColor;
  inset: 0;
  block-size: var(--fancy-icon-menu-bar-height);
  inline-size: 100%;
  transition-duration: 0.375s;
  transition-timing-function: ease-in-out;
  transition-property: top, bottom, left, right, transform, inline-size;
}
.fancy-icon-menu span:where(:first-child) {
  inset-block-end: auto;
  inline-size: var(--fancy-icon-menu-bar-top-width);
  margin: auto var(--fancy-icon-menu-bar-top-margin-r) auto var(--fancy-icon-menu-bar-top-margin-l);
}
.fancy-icon-menu span:where(:last-child) {
  inset-block-start: auto;
  inline-size: var(--fancy-icon-menu-bar-bottom-width);
  margin: auto var(--fancy-icon-menu-bar-bottom-margin-r) auto var(--fancy-icon-menu-bar-bottom-margin-l);
}
.fancy-icon-menu span:where(:nth-child(2), :nth-child(3)) {
  inline-size: var(--fancy-icon-menu-bar-center-width);
  margin: auto var(--fancy-icon-menu-bar-center-margin-r) auto var(--fancy-icon-menu-bar-center-margin-l);
}
.open .fancy-icon-menu span {
  margin: auto;
}
.open .fancy-icon-menu span:nth-child(2) {
  transform: rotateZ(45deg);
}
.open .fancy-icon-menu span:nth-child(3) {
  transform: rotateZ(-45deg);
}
.open .fancy-icon-menu span:is(:nth-child(2), :nth-child(3)) {
  inline-size: 100%;
}
.open .fancy-icon-menu span:is(:first-child, :last-child) {
  inline-size: 0;
}
/* fancy boxes that is just boxed. rehash or rebuild as needed
--------------------------------------------------------------- */
/* @VersionA: version w/ backdrop. this version does not rely on variables to customize padding. simplest setup */
.fancy-box {
  --fancy-box-background: var(--scheme-bg,var(--color-light));
  --fancy-box-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.15);
  --fancy-box-pseudo-background: var(--color-light-alt);
  --fancy-box-pseudo-offset: 1.25rem;
  --fancy-box-pseudo-offset-x: var(--fancy-box-pseudo-offset);
  --fancy-box-pseudo-offset-bottom: var(--fancy-box-pseudo-offset);
  --fancy-box-pseudo-offset-top: var(--fancy-box-pseudo-offset-bottom);
  --fancy-box-border-radius: .25rem;
  background: var(--fancy-box-background);
  box-shadow: var(--fancy-box-box-shadow);
  position: relative;
  padding-inline: 1rem;
  padding-block: 2.5rem;
}
.fancy-box, .fancy-box::after {
  border-radius: var(--fancy-box-border-radius);
}
.fancy-box::after {
  content: "";
  z-index: -1;
  background: var(--fancy-box-pseudo-background);
  position: absolute;
  pointer-events: none;
}
.fancy-boxes-wrapper {
  position: relative;
  z-index: 1;
  padding-block-start: var(--negative-pusher);
}
.fancy-box-cut-left::after {
  inset-inline-start: var(--fancy-box-pseudo-offset-x);
}
.fancy-box-cut-right::after {
  inset-inline-end: var(--fancy-box-pseudo-offset-x);
}
.fancy-box-cut-top::after {
  inset-block-start: var(--fancy-box-pseudo-offset-top);
}
.fancy-box-cut-bottom::after {
  inset-block-end: var(--fancy-box-pseudo-offset-bottom);
}
:is(.fancy-box-extend-left, .fancy-box-extend-right) {
  max-inline-size: calc(100% - var(--fancy-box-pseudo-offset-x)) !important;
}

:is(.fancy-box-extend-left.fancy-box-extend-right) {
  max-inline-size: calc(100% - var(--fancy-box-pseudo-offset-x) * 2) !important;
}

.fancy-box-extend-left {
  margin-inline-start: var(--fancy-box-pseudo-offset-x);
}
.fancy-box-extend-left::after {
  inset-inline-start: calc(var(--fancy-box-pseudo-offset-x) * -1);
}
.fancy-box-extend-right {
  margin-inline-end: var(--fancy-box-pseudo-offset-x);
}
.fancy-box-extend-right::after {
  inset-inline-end: calc(var(--fancy-box-pseudo-offset-x) * -1);
}
.fancy-box-extend-top {
  margin-block-start: var(--fancy-box-pseudo-offset-top);
}
.fancy-box-extend-top::after {
  inset-block-start: calc(var(--fancy-box-pseudo-offset-top) * -1);
}
.fancy-box-extend-bottom {
  margin-block-end: var(--fancy-box-pseudo-offset-bottom);
}
.fancy-box-extend-bottom::after {
  inset-block-end: calc(var(--fancy-box-pseudo-offset-bottom) * -1);
}
@media only screen and (max-width: 47.9375rem) {
  .fancy-box-style-no-xs {
    margin-inline: 0;
    max-inline-size: 100%;
  }
  .fancy-box-style-no-xs::after {
    content: none;
  }
}

/* Other Custom Fancy Stuff
--------------------------------------------------------------- */
/* Filter Dropdown https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/helper/filter-dropdown.md
--------------------------------------------------------------- */
/*
Filter Skeletons. No need to edit
--------------------------------------------------------------- */
.filter {
  position: relative;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.filter-title {
  align-self: center;
  margin: 0;
  flex: 0 0 auto;
}
.filter-select {
  flex: 1 1;
  position: relative;
  line-height: var(--filter-line-height);
}
.filter-select-label {
  display: flex;
  justify-content: space-between;
  inline-size: 100%;
  padding-inline: calc(var(--filter-padding-x) - var(--filter-border-width));
  padding-block: calc((var(--filter-height) - var(--filter-border-width) * 2 - 1em * var(--filter-line-height)) * 0.5) calc((var(--filter-height) - var(--filter-border-width) * 2 - 1em * var(--filter-line-height)) * 0.5);
  position: relative;
  z-index: 1;
}
.filter-select-dropdown {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  inline-size: 100%;
  display: none;
  line-height: var(--filter-line-height);
  max-block-size: calc(80vb - var(--layout-header-height));
  scrollbar-width: none;
  overflow-block: scroll;
}
.filter-select-dropdown :where(a) {
  text-decoration: none;
}
.filter-select-dropdown::-webkit-scrollbar {
  display: none;
}
.filter-select-dropdown:before, .filter-select-dropdown:after {
  content: "";
  position: sticky;
  block-size: var(--filter-dropdown-padding-y);
  display: block;
  inset-inline-start: 0;
}
.filter-select-dropdown:before {
  inset-block-start: 0;
}
.filter-select-dropdown:after {
  inset-block-end: 0;
}
.filter-select-dropdown li {
  padding-inline: var(--filter-dropdown-padding-x);
}
.filter-select-dropdown li a {
  display: block;
  padding-block: calc((var(--filter-item-height) - 1.125em) * 0.5) calc((var(--filter-item-height) - 1.125em) * 0.5);
  text-decoration: none;
}
.filter-select-dropdown li:is(.active, :hover, :focus) {
  color: var(--scheme-sp, var(--color-primary));
}
.filter-empty-text {
  /* Container for custom text. should not at all display. */
  display: none;
}

/* Filter Dropdown https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/helper/filter-dropdown.md
/*
drodpwon filter. for filterable blocks eg Case results. Uncomment in style.scss if needed
Markup should follow the folloowing


To enable, follow the steps:
- Uncomment the sass import declaration in the style.scss file
- Enqueue js/includes/filter-dropdown
- If being used for Case Results
	-Setup `Case Result Types` on
		- Admin > Theme Options > Other Components if there are no CPTs for case results being used
		- Admin > Case Results > Case Result Types if CPT Case results are enabled
		- Add classes/Attrs to the following
			- .filter-blocks => PARENT wrapper of case results row
			- .filter-block => set as the value for 'part_classes' of includes/repeater-results.
- If being used for other purposes
	- Use template part includes/helper-filter-dropdown
	- Add classes/Attrs to the following
		- .filter-blocks => PARENT wrapper of the items to be filtered
		- .filter-block => blocks to hide or show depending on active filter
		- [data-filter] => set attribute to  .filter-block as applicable filter slugs separated by commas


--------------------------------------------------------------- */
.filter {
  /* height of filter. designers will prefer to design filters based on their height. this is to better support the wonders they create while being able to use padding to support multi-line/ edge case filters */
  --filter-height: 3em;
  /* border width. This will be accounted for in calculating the filter height as well */
  --filter-border-width: 1px;
  /* duh */
  --filter-item-height: 2.8125rem;
  /* horizontal padding for the filter */
  --filter-padding-x: 1.5rem;
  /* Note: this value has to be unitless for calc values to work. Usually there's no need to modify this unless a multiline filter is present in the design.
  	* Formula is line-height-px / font-size-px */
  --filter-line-height: 1.125;
  /* padding for dropdown. Note: Applied as height to pseudo element to smooth out appearance of overflowing dropdown items */
  --filter-dropdown-padding-y: 1em;
  /* padding for dropdown */
  --filter-dropdown-padding-x: var(--filter-padding-x);
  margin-inline: auto;
  inline-size: 36.25rem;
  margin-block-end: 3rem;
}
.filter-select-label, .filter-select-dropdown {
  text-align: initial;
}
.filter-select-label {
  background: var(--scheme-bg, var(--color-light));
  color: var(--scheme-fg, var(--color-dark));
  border: var(--filter-border-width) solid var(--scheme-bg-contrast, var(--color-light-alt));
}
.filter-select-label::before {
  order: 999;
  align-self: center;
  content: "\25BE\FE0E";
  display: inline-block;
}
.filter-select-dropdown {
  background: var(--scheme-bg, var(--color-dark-alt));
  color: var(--scheme-fg, var(--color-light));
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
  padding-block: 2rem;
  padding-inline: 1.5rem;
  font-size: 1.25rem;
}
.filter-select-dropdown:before {
  background: linear-gradient(to top, transparent 0%, var(--scheme-bg, var(--color-dark-alt)) 90%);
}
.filter-select-dropdown:after {
  background: linear-gradient(to bottom, transparent 0%, var(--scheme-bg, var(--color-dark-alt)) 90%);
}
.filter-select-dropdown li {
  transition: all 0.5s ease-in-out;
}
.filter-select-dropdown li:is(.active, :hover, :focus) {
  color: var(--scheme-sp, var(--color-primary));
}
.filter-empty {
  margin: 90px auto;
  text-align: center;
  inline-size: 100%;
}
@media only screen and (min-width: 48rem) {
  .filter {
    flex-direction: row;
  }
}
/* ================================================================================
* Includes 
================================================================================ */
/* Forms https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/helper/form.md
For Gravity Forms specific styles go to scss/vendors/gforms
-------------------------------------------------------------------------------- */
.field-form {
  max-inline-size: 100%;
}
.field-form:where(.group-frame) {
  gap: 3rem;
}
.field-form:where(.group-frame) :where(.gform_wrapper,
.gform_body,
form) {
  display: contents;
}
.field-form :where(.gform_wrapper) :is(.gform_title,
.gform_description,
.gform_footer,
.gform_page_footer,
.gform_body) {
  margin: 0;
  padding: 0;
}
.field-form :where(.gform_wrapper) .gform_heading {
  /* gform heading: gforms generated or template custom ones */
}
.field-form :where(.gform_wrapper) .gform_heading:where(:not(.group-frame *)) {
  margin-block-end: 2rem;
}
.field-form :where(.gform_wrapper) .gform_heading:where(.group-frame) {
  gap: 0.25rem;
}
.field-form :where(.gform_wrapper) :where(.gform_heading, .gform_title, .gform_description) {
  /* everything inside the heading: gforms generated or template custom ones */
  /* center the heading stuff. or adjust as needed if that's not the case */
  margin-inline: auto;
}
.field-form :is(.gform_wrapper) :is(.gform_title, .gform_description):last-child {
  margin-block-end: 0;
}
.field-form :is(.gform_wrapper) .gform_body {
  /* body: gforms generated or template custom ones */
}
.field-form :is(.gform_wrapper) :is(.gform_footer, .gform_page_footer) {
  /* footer: gforms generated or template custom ones */
}
.field-form :is(.gform_wrapper) :is(.gform_footer, .gform_page_footer) {
  /* reset margin and padding and add  one margin to keep spacing simple to setup. Gravity forms man. */
  padding: 0;
  margin: 0;
}
.field-form :is(.gform_wrapper) :is(.gform_footer, .gform_page_footer):where(:not(.group-frame *)) {
  margin-block-start: 2rem;
}
.field-form :is(.gform_wrapper) :is(.gform_footer, .gform_page_footer) :is(.gform_button, .button) {
  /* that goes for the button too */
  margin-block-end: 0;
  margin-block-start: 0;
}
.field-form :is(.gform_wrapper) :is(.gform_footer, .gform_page_footer):not(:has(.gform_button)) {
  display: none;
}
.field-form-body :is(.gform_wrapper) .gform_heading {
  /* in case gravity forms decides to add more ugly things */
  display: none;
}

/*  Responsive Background skeletons: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/field/responsive-background
--------------------------------------------------------------- */
/* Responsive Background skeletons. Do not Edit.
--------------------------------------------------------------- */
.responsive-background {
  pointer-events: none;
  overflow: hidden;
  transform-style: preserve-3d;
  z-index: -1;
  background-color: var(--responsive-background-bg-color, var(--scheme-bg, var(--color-dark-alt)));
}
.responsive-background::after {
  content: "";
  display: block;
  inset: 0;
  position: absolute;
  pointer-events: none;
  mix-blend-mode: var(--responsive-background-overlay-mix-blend, normal);
  background: var(--responsive-background-overlay-background, none);
  opacity: var(--responsive-background-overlay-opacity, 0.75);
}
.responsive-background-wrapper {
  position: relative;
  z-index: 0;
}
.responsive-background, .responsive-background-bg {
  position: absolute !important;
  inset: 0;
}
.responsive-background-bg {
  /* Note: when styling instances of this block, make sure properties are NOT set as shorthand to avoid override issues */
  background-size: var(--responsive-background-bg-size, cover);
  background-position: var(--responsive-background-bg-position, center center);
  /* Note: Best practice to add fallback background-colors to your background images */
  background-color: inherit;
  z-index: -2;
  background-image: var(--responsive-background-image, none) !important;
}
.responsive-background-bg:is(img) {
  object-fit: var(--responsive-background-bg-size, cover);
  object-position: var(--responsive-background-bg-position, center center);
  inline-size: 100%;
  block-size: 100%;
}

/*  Responsive Background skeletons: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/field/responsive-background
--------------------------------------------------------------- */
/* Responsive Background Customizations
--------------------------------------------------------------- */
:where(.responsive-background) {
  --responsive-background-overlay-mix-blend: normal;
  --responsive-background-overlay-background: none;
  --responsive-background-overlay-opacity: 0.75;
  --responsive-background-bg-position: center center;
}

@media only screen and (min-width: 75rem) {
  :is(.responsive-background-animated-on-loaded, .responsive-background-animated-on-visible.visible) .responsive-background-bg {
    /* make background block animate for document ready or when visible*/
    transition: opacity ease-in-out 1s, transform ease-in-out 1s;
    opacity: 1;
    transform: scale(1);
    transform-style: preserve-3d;
  }
  :is(html:not(.doc-images-loaded) .responsive-background-animated-on-loaded,
  .responsive-background-animated-on-visible:not(.visible)) .responsive-background-bg {
    /* hide if not ready to let the world to know got to let it show */
    opacity: 0;
    transform: scale(1.1);
  }
}

/* Carousels https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/repeater/carousel.md
--------------------------------------------------------------- */
/* Carousel Item skeletons. Do not Edit.
--------------------------------------------------------------- */
.carousel-item {
  text-align: center;
}
.carousel-item-image {
  block-size: var(--carousel-height);
}
.carousel-item-image > :where(*) {
  pointer-events: none;
}
.carousel-item-image,
.carousel-item-image picture {
  display: flex;
  place-content: center;
  place-items: center;
  flex-direction: column;
}
.carousel-item-image :where(svg, object, img) {
  block-size: auto !important;
  margin: auto;
}
.carousel-item-image :where(img, svg, object, picture) {
  inline-size: auto !important;
  max-inline-size: 100% !important;
  max-block-size: 100% !important;
  align-self: center;
  flex: 0 0 auto;
}

/* Carousels https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/repeater/carousel.md
--------------------------------------------------------------- */
/* Carousel Item skeletons. Do not Edit.
--------------------------------------------------------------- */
.carousel-item {
  text-align: center;
}
.carousel-item-image {
  block-size: var(--carousel-height);
}
.carousel-item-image > :where(*) {
  pointer-events: none;
}
.carousel-item-image,
.carousel-item-image picture {
  display: flex;
  place-content: center;
  place-items: center;
  flex-direction: column;
}
.carousel-item-image :where(svg, object, img) {
  block-size: auto !important;
  margin: auto;
}
.carousel-item-image :where(img, svg, object, picture) {
  inline-size: auto !important;
  max-inline-size: 100% !important;
  max-block-size: 100% !important;
  align-self: center;
  flex: 0 0 auto;
}

/* Carousel Item Customizations
--------------------------------------------------------------- */
:where(.swiper, .slick) {
  /* height of award. best to set to the tallest award logo provided  */
  --carousel-height: 7.5rem;
}
/* Coupons
-------------------------------------------------------------------------------- */
/*
* Coupon Title
-------------------------------------------------------------------------------- */
.coupon-title {
  font-size: 2.625rem;
  line-height: 0.85;
  font-family: var(--font-secondary);
  color: var(--color-blue-400);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
}
/*
* Coupon Type
-------------------------------------------------------------------------------- */
.coupon-type {
  font-size: 1.125rem;
  line-height: 1.15;
  font-family: var(--font-accent);
  color: var(--color-blue-300);
  font-weight: 700;
  text-align: center;
}
/*
* Coupon Description
-------------------------------------------------------------------------------- */
.coupon-description {
  font-size: 1rem;
  line-height: 1.5;
  font-family: var(--font-primary);
  color: var(--color-black);
  font-weight: 400;
  text-align: center;
}
/*
* Coupon Content
-------------------------------------------------------------------------------- */
/*
* Coupon CTA
-------------------------------------------------------------------------------- */
/*
* Coupon Disclaimer
-------------------------------------------------------------------------------- */
/*
* includes/repeater-coupon
-------------------------------------------------------------------------------- */
.coupon {
  inline-size: 100%;
  max-inline-size: 100%;
  margin: 0;
}
.coupon, .coupon-container {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
}
.coupon-container {
  --coupon-border-width: 3px;
  inline-size: 100%;
  flex: 1 1;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: calc(4.375rem - var(--coupon-border-width)) 1.875rem calc(3.125rem - var(--coupon-border-width));
  border: var(--coupon-border-width) dashed var(--color-blue-200);
  border-radius: 0.4375rem;
  background: var(--color-white);
  text-align: center;
}
.coupon-title {
  inline-size: 15rem;
  max-inline-size: none;
  margin: 0 0 0.48125rem;
}
.coupon-type {
  inline-size: 15.225rem;
  max-inline-size: none;
  margin: 0 0 0.30625rem;
}
.coupon-description {
  inline-size: 15.225rem;
  max-inline-size: none;
  margin: 0 0 0.74375rem;
}
.coupon-cta {
  margin-block-end: 1.61875rem;
}
.coupon-expiration {
  font-size: 0.875rem;
  line-height: 1;
  font-family: var(--font-primary);
  color: var(--color-black);
  font-weight: 400;
  text-align: center;
  margin: 0;
}
.coupon-expiration strong {
  font-weight: inherit;
}
.coupon-slider-group {
  position: relative;
}

.coupon-badge {
  position: absolute;
  z-index: 2;
  inset-block-start: 0;
  inset-inline-start: 50%;
  inline-size: 7.55rem;
  block-size: 7.55rem;
  transform: translateX(-50%);
  pointer-events: none;
}
.coupon-badge-image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.coupon-badge-label {
  font-size: 1.4rem;
  line-height: 1.25rem;
  font-family: var(--font-secondary);
  color: var(--color-white);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  position: absolute;
  inset-block-start: 2rem;
  inset-inline-start: 50%;
  inline-size: 4.815rem;
  transform: translateX(-50%);
}

.coupon-slider-group .com-info-slider-coupons {
  margin-block-start: 0;
  padding-block-start: 4.0625rem;
}
.coupon-slider-group .com-info-slider-coupons .com-info-slide-coupons {
  display: flex;
  justify-content: center;
}
.coupon-slider-group .com-info-slider-coupons .coupon {
  max-inline-size: 19.3125rem;
}

/* Case Results https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/repeater/result.md
-------------------------------------------------------------------------------- */
/*
* Case Result Icon
-------------------------------------------------------------------------------- */
.result-icon {
  font-size: 3rem;
}
.result-details-popup .result-icon {
  font-size: 6.25rem;
}
/*
* Case Result Value
-------------------------------------------------------------------------------- */
.result-value {
  font-size: 4rem;
  text-transform: uppercase;
}
:where(.content-palette-dark) .result-value {
  color: var(--scheme-sp, inherit);
}
.result-value-confidential {
  font-size: 0.6em;
}
.result-value-number-long {
  font-size: 0.75em;
}
@media only screen and (min-width: 48rem) {
  .result-details-popup .result-value.h1 {
    font-size: 6.25rem;
  }
}
/*
* Case Result Type
-------------------------------------------------------------------------------- */
/*
* Other Case Result Type
-------------------------------------------------------------------------------- */
/*
* Case Result Title - Optional
-------------------------------------------------------------------------------- */
/*
* Case Result Description
-------------------------------------------------------------------------------- */
.result-details-default .result-description {
  flex: 1 1;
}
/*
* Case Result Content
-------------------------------------------------------------------------------- */
.result-details-default .result-content {
  max-inline-size: 50ch;
}
.result-details-popup .result-content {
  margin-block-start: 3rem;
  text-align: initial;
}
/*
* Case Result Learn More - Optional
-------------------------------------------------------------------------------- */
.result-learn-more {
  margin-block-start: 2em;
  align-self: center;
}
@media only screen and (min-width: 112.5rem) {
  .result-details-default .result-learn-more:first-child {
    margin-block-start: auto;
  }
}
/*
* includes/repeater-result
-------------------------------------------------------------------------------- */
.result {
  max-inline-size: 100%;
}
.result, .result-container {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
}
.result-container {
  inline-size: 100%;
  flex: 1 1;
  gap: 0.75rem;
  align-items: center;
}
.result :where(.result-description, .result-content) {
  margin-inline: auto;
}
.result-pointer-reference:has(.result-details, [href]):is(:hover, :focus-within) .result-summary .result-value {
  color: inherit;
}
.result-summary {
  text-align: center;
  display: contents;
}
.result-summary:nth-last-child(n+2) {
  margin-block-end: auto;
}
.result-details-default {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1;
  margin-block-start: 1.5em;
  border-block-start: 1px solid var(--color-neutral);
  padding-block-start: 1.5rem;
}
.result:has(.result-details-hover) {
  position: relative;
}

.result-pointer-reference:not(:is(:hover, :focus-within)) .result-details-hover {
  pointer-events: none;
  opacity: 0;
}
.result-details-hover {
  max-inline-size: none;
  position: absolute;
  background-color: var(--color-dark-alt);
  color: var(--color-light);
  inset: 0;
  margin: 0;
  scrollbar-width: none;
  overflow-block: scroll;
  transition: 0.25s all ease-in-out;
  padding: 2rem;
  opacity: 1;
}
.result-details-hover::-webkit-scrollbar {
  display: none;
}
.result-details-popup {
  text-align: center;
  flex-direction: column;
  display: flex;
  gap: 1rem;
}
/* List: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/list.md#list
* This include tends to be multipurpose ie accordion, fake widgets, listed contents, etc.
--------------------------------------------------------------- */
/* Universal styles */
/* Styles when an accordion. NOTE: blocks plugin may still conflict, use important for now if needed */
.list:has(.accordion) {
  inline-size: 60rem;
  max-inline-size: 100%;
  margin-inline: auto;
  border-block-end: 1px solid var(--color-neutral);
  padding-block-end: 2rem;
  margin-block-end: 2rem;
}
/* Styles when an column */
/* add other variations as needed */
/* Menu Directories https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/repeater/menudir.md
-------------------------------------------------------------------------------- */
/*
* Menu Directory Skeleton. Do not Edit
-------------------------------------------------------------------------------- */
.menudir-title {
  padding-inline: var(--pa-title-padding-x);
}
.menudir-title:is(.fancy-border) -after:after {
  --fancy-border-margin-l: calc(var(--pa-title-padding-x) * -1);
  --fancy-border-margin-r: calc(var(--pa-title-padding-x) * -1);
}
.menudir-menu li,
.menudir-menu li a {
  display: flex;
  flex-direction: column;
  line-height: var(--pa-item-line-height);
}
.menudir-menu li a {
  justify-content: center;
  flex: 1 1;
  padding-block: calc(var(--pa-item-padding-y, calc((var(--pa-item-height, 3em) - var(--pa-item-border-width, 1px) * 2 - 1em * var(--pa-item-lines, 2) * var(--pa-item-line-height, 1.25)) * 0.5)) - var(--pa-item-border-width, 1px) * 0.5);
  padding-inline: var(--pa-item-padding-x);
  min-block-size: var(--pa-item-height);
}
.menudir-menu li a:is([href="#"]) {
  pointer-events: none;
}
@media only screen and (max-width: 47.9375rem) {
  .menudir-menu li a {
    min-block-size: 0;
  }
}

/* Menu Directories https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/repeater/menudir.md
-------------------------------------------------------------------------------- */
/*
* Menu Directory Vars/ Scaffolding
-------------------------------------------------------------------------------- */
.menudir {
  --pa-item-padding-x: 0.5rem;
  /* height of practice area item. designers will prefer to design buttons based on their height. this is to better support the wonders they create while being able to use padding to support multi-line/ edge case buttons */
  --pa-item-height: 3em;
  /* ideal height of menu items */
  --pa-item-lines: 1;
  /* Note: this value has to be unitless for calc values to work.
  			* Number of lines to compensate for the item height */
  --pa-item-baseline-offset: 0.5;
  /* Note: this value has to be unitless for calc values to work.
  			* 1 moves the text to the very bottom. 0 moves the text to the very top */
  --pa-item-line-height: 1.5;
  /* Note: this value has to be unitless for calc values to work.
  			* Formula is line-height-px / font-size-px */
  --pa-title-padding-x: var(--pa-item-padding-x);
  /* horizontal padding for the practice area title */
}
@media only screen and (min-width: 48rem) {
  .menudir {
    min-inline-size: 100%;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .menudir {
    /* reset heights to normal flow */
  }
}

/*
* Menu Directory Category Title
-------------------------------------------------------------------------------- */
.menudir-title {
  margin-block-end: 2rem;
}
/*
* Menu Directory Menu
-------------------------------------------------------------------------------- */
.menudir-menu a {
  text-decoration: none;
}
.menudir-menu li:is(:hover, :focus-within) a:not([href="#"]) {
  color: var(--color-primary);
}
.menudir-menu:where(.columns) li {
  border-block-start: 1px solid var(--color-neutral);
}
.menudir-menu:where(.columns) li:nth-child(-n+1) {
  border-block-start: 0;
}
/*
* includes/repeater-menudir
-------------------------------------------------------------------------------- */
.menudir {
  max-inline-size: 100%;
}
.menudir, .menudir-container {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
}
.menudir-container {
  inline-size: 100%;
  flex: 1 1;
}
/* Pagination https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/helper/pagination.md
-------------------------------------------------------------------------------- */
/* Pagination Skeletons. do not edit 
--------------------------------------------------------------- */
.pagination {
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  align-items: center;
  text-align: center;
  clear: both;
  margin-inline: auto;
}
.pagination-block {
  grid-row: 1;
}
.pagination-block-left {
  grid-column: 1;
  text-align: left;
}
.pagination-block-center {
  grid-column: 2;
}
.pagination-block-right {
  grid-column: 3;
  text-align: right;
}
.pagination-num-list.pagination-block-left span:first-child,
.pagination-num-list.pagination-block-left a:first-child {
  margin-inline-start: 0;
}
.pagination-num-list.pagination-block-right span:last-child,
.pagination-num-list.pagination-block-right a:last-child {
  margin-inline-start: 0;
}
@media only screen and (max-width: 74.9375rem) {
  .pagination-nav-link:is(.pagination-block-left, .pagination-block-right):nth-child(2), .pagination-nav-link:is(.pagination-block-left, .pagination-block-right):nth-last-child(2) {
    grid-column: 1/-1;
  }
  .pagination-nav-link:is(.pagination-block-left, .pagination-block-right):nth-child(2) span:nth-last-child(n+2),
  .pagination-nav-link:is(.pagination-block-left, .pagination-block-right):nth-child(2) a:nth-last-child(n+2), .pagination-nav-link:is(.pagination-block-left, .pagination-block-right):nth-last-child(2) span:nth-last-child(n+2),
  .pagination-nav-link:is(.pagination-block-left, .pagination-block-right):nth-last-child(2) a:nth-last-child(n+2) {
    margin-inline-end: 0.5em;
  }
}
/* Pagination Customizations. customize as needed 
--------------------------------------------------------------- */
.pagination {
  border-block-start: 1px solid var(--color-neutral-light);
  padding-block-start: 2rem;
  margin-block-start: 3rem;
  margin-block-end: 0;
  max-inline-size: 100%;
  grid-column: 1/-1;
  inline-size: calc(var(--comp) - var(--container-gutter, 30px));
}
.pagination .current,
.pagination a:is(:hover, :focus) {
  color: var(--color-primary);
}
.pagination-num-list a,
.pagination-num-list span {
  margin-inline: 0.5em;
}
.pagination-nav-link :is(.next, [rel=next]):after,
.pagination-nav-link :is(.prev, [rel=prev]):before {
  display: inline-block;
  align-self: center;
  flex: 0 0 auto;
  content: "";
  font-size: 0.5rem;
  transform-origin: 40% 40%;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top: 0;
  border-left: 0;
}
.pagination-nav-link :is(.next, [rel=next]):after {
  transform: rotate(-45deg);
  margin-inline-start: 1em;
}
.pagination-nav-link :is(.prev, [rel=prev]):before {
  transform: rotate(135deg);
  margin-inline-end: 1em;
}
@media only screen and (min-width: 75rem) {
  .pagination {
    order: 999;
  }
}
/* Profile https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/repeater/profile.md
-------------------------------------------------------------------------------- */
/* Profile Image Skeletons. No need to edit 
--------------------------------------------------------------- */
.profile-image {
  --cover-aspect-w: var(--profile-image-aspect-w);
  --cover-aspect-l: var(--profile-image-aspect-l);
  flex: 0 0 auto;
  position: relative;
  --cover-background: var(--profile-image-background);
  display: block;
}
.profile-image::before {
  /* hover overlay */
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: var(--profile-image-overlay-background);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
.profile-image-placeholder {
  display: flex;
}
.profile-image-placeholder img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
:is(.profile-image-img, .profile-image-placeholder, .profile-image-placeholder-img) {
  position: absolute;
  inset: 0;
}

:is(.profile-image-img, .profile-image-placeholder-img) {
  max-inline-size: none;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--profile-image-position);
}

.profile-image:has(.profile-image-learn-more)::before,
.profile-image:has(.profile-image-learn-more) .profile-image-learn-more {
  pointer-events: none;
}
.profile-image:has(.profile-image-learn-more)::before {
  opacity: var(--profile-image-overlay-opacity);
  mix-blend-mode: var(--profile-image-overlay-mix-blend);
  backdrop-filter: var(--profile-image-overlay-backdrop-filter);
  pointer-events: auto;
}
.profile-image:has(.profile-image-learn-more) .profile-image-learn-more {
  opacity: 0;
}
.profile-image:has(.profile-image-learn-more):is(:hover, :focus-within)::before,
.profile-image:has(.profile-image-learn-more):is(:hover, :focus-within) .profile-image-learn-more, .profile-pointer-reference:is(:hover, :focus, :focus-within) .profile-image:has(.profile-image-learn-more)::before,
.profile-pointer-reference:is(:hover, :focus, :focus-within) .profile-image:has(.profile-image-learn-more) .profile-image-learn-more {
  pointer-events: auto;
}
.profile-image:has(.profile-image-learn-more):is(:hover, :focus-within) .profile-image-learn-more, .profile-pointer-reference:is(:hover, :focus, :focus-within) .profile-image:has(.profile-image-learn-more) .profile-image-learn-more {
  opacity: 1;
}
.profile-image:has(.profile-image-learn-more) .profile-image-learn-more {
  /*  */
  z-index: 2;
  position: absolute;
  inset: 0;
  margin: auto;
  max-inline-size: max-content;
  max-block-size: min-content;
}

/*
* Profile Image. Customizations https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/repeater/profile.md#css-vars
-------------------------------------------------------------------------------- */
.profile-image {
  --profile-image-aspect-w: 490;
  --profile-image-aspect-l: 550;
  --profile-image-position: 50% 15%;
  --profile-image-overlay-background: var(--color-dark-alt)
  	linear-gradient(to bottom right, var(--color-dark), var(--color-dark-alt));
  --profile-image-overlay-opacity: 0;
  --profile-image-overlay-mix-blend: multiply;
  --profile-image-overlay-backdrop-filter: blur(1px);
}
/*
* Profile Placeholder. Customizations https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/repeater/profile.md#css-vars
-------------------------------------------------------------------------------- */
.profile-image-placeholder {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
  margin: 0;
  background: var(--profile-image-overlay-background, linear-gradient(to bottom right, var(--color-dark), var(--color-dark-alt)));
  font-size: 1.5rem;
  font-family: var(--font-secondary);
  color: var(--color-light);
  text-align: center;
}
.profile-image-placeholder-icon {
  font-size: 6rem;
}
@media only screen and (min-width: 112.5rem) {
  .profile-image-placeholder-icon {
    font-size: 8rem;
  }
}
/*
* Profile Image Pseudos: wheh linking to a bio page only
-------------------------------------------------------------------------------- */
.profile-image:has(.profile-image-learn-more, [href])::before,
.profile-image:has(.profile-image-learn-more, [href]) .profile-image-learn-more, .profile-image:has(.profile-image-learn-more, [href]) [href] {
  transition: 0.5s ease-in-out all;
}
.profile-image:has(.profile-image-learn-more, [href]):is(:hover, :focus-within), .profile-pointer-reference:is(:hover, :focus, :focus-within) .profile-image:has(.profile-image-learn-more, [href]) {
  --profile-image-overlay-opacity: 0.8;
}
.profile-image:has(.profile-image-learn-more, [href]):is(:hover, :focus-within):has(.profile-image-placeholder), .profile-pointer-reference:is(:hover, :focus, :focus-within) .profile-image:has(.profile-image-learn-more, [href]):has(.profile-image-placeholder) {
  --profile-image-overlay-opacity: 1;
}

/*
* Profile View text
-------------------------------------------------------------------------------- */
/*
* Profile Thumbnail, contains profile image, special blurb, whatever can be included in a thumbnail
-------------------------------------------------------------------------------- */
.profile-thumbnail {
  flex: 0 0 auto;
  align-self: stretch;
  inline-size: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Profile Additional Details. No need to edit 
--------------------------------------------------------------- */
.profile-details-hover {
  opacity: 0;
  display: flex;
  align-items: center;
  align-content: center;
  flex-direction: column;
  text-align: center;
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow-block: scroll;
  scrollbar-width: none;
}
.profile-details-hover::-webkit-scrollbar {
  display: none;
}
.profile-details-hover::before {
  content: "";
  color: var(--color-light);
  opacity: 0.8;
  position: absolute;
  inset: 0;
  z-index: -1;
}
.profile-details-hover:is(:hover, :focus-within), .profile-pointer-reference:is(:hover, :focus, :focus-within) .profile-details-hover {
  opacity: 1;
  pointer-events: auto;
}
.profile-details-hover-body {
  flex: 1 1;
}

/*
* Profile Additional Details Customizations
-------------------------------------------------------------------------------- */
.profile-details {
  /* view profile hit space/ additional details container */
}
.profile-details-hover {
  padding-block: 3rem;
  padding-inline: 2rem;
  transition: 0.5s ease-in-out all;
  background: var(--color-dark-alt);
  color: var(--color-light);
}
.profile-details-body + .profile-details-footer {
  padding-block-start: 2rem;
  align-self: stretch;
}
/*
* Profile Name
-------------------------------------------------------------------------------- */
.profile-name {
  align-content: center;
}
/*
* Profile Name
-------------------------------------------------------------------------------- */
.profile-position {
  margin-block-start: auto;
}
/*
* includes/repeater-profile
-------------------------------------------------------------------------------- */
.profile {
  /* styles when the profile has a link */
}
.profile {
  background: var(--color-light-alt);
  align-self: stretch;
  position: relative;
}
.profile:has(:has(.profile-image-learn-more, [href])):is(.profile-pointer-reference):is(:hover, :focus-within) {
  background: var(--color-neutral);
}
.profile {
  max-inline-size: 100%;
}
.profile, .profile-container, .profile-details {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
}
.profile-details, .profile-container {
  inline-size: 100%;
  flex: 1 1;
  gap: 1.5rem;
}
.profile-container {
  padding: 1.5rem;
}
.profile-summary {
  flex: 1 1;
  text-decoration: none;
}
.profile-summary {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}
.profile-image {
  inline-size: 100%;
}
/* Testimonial https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/repeater/testimonial.md
-------------------------------------------------------------------------------- */
/*
* Testimonial Stars
-------------------------------------------------------------------------------- */
.testimonial-stars {
  font-size: 2rem;
}
/*
* Testimonial Highlight / Main quote
-------------------------------------------------------------------------------- */
.testimonial-highlight {
  text-align: inherit;
  max-inline-size: none;
  margin-inline: 0;
}
/*
* Testimonial Quote Body / other parts of the quote
-------------------------------------------------------------------------------- */
/*
* Testimonial Divider - Optional
-------------------------------------------------------------------------------- */
.testimonial-divider {
  --fancy-border-margin-y: 0em;
}
/*
* Testimonial Source + Optional Icon
-------------------------------------------------------------------------------- */
.testimonial-source span:nth-last-child(n+2)::after {
  content: "\25CF\FE0E";
  color: var(--color-primary);
  letter-spacing: 0em;
  margin-inline: 0.25em;
}
.testimonial-source.testimonial-source-has-first-letter::before {
  content: attr(data-first-letter);
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  inline-size: 1.75em;
  block-size: 1.75em;
  border-radius: 999em;
  background: var(--scheme-sp, var(--color-primary));
  font-size: 1.125rem;
  font-family: var(--font-accent);
  color: var(--color-light);
  text-transform: uppercase;
}
:where(.content-palette-dark) .testimonial-source {
  color: var(--scheme-sp, inherit);
}
.testimonial-source-icon {
  font-size: 1.25rem;
}
/*
* includes/repeater-testimonial
-------------------------------------------------------------------------------- */
.testimonial {
  max-inline-size: 100%;
}
.testimonial, .testimonial-container {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
}
.testimonial-container {
  inline-size: 100%;
  flex: 1 1;
  gap: 0.75rem;
}
/* Compact Testimonial Card
-------------------------------------------------------------------------------- */
.testimonial-mini {
  inline-size: 100%;
  padding: 2.1875rem 1.6875rem 1.875rem;
  border-radius: 0.625rem;
  background: linear-gradient(to bottom, var(--color-blue-300), var(--color-navy-100));
  color: var(--color-white);
}
.testimonial-mini .testimonial-container {
  align-items: center;
  gap: 0;
}
.testimonial-mini .testimonial-stars {
  inline-size: 10.3125rem;
  block-size: 3.288rem;
  margin-block-end: 1.1875rem;
}
.testimonial-mini :is(.testimonial-highlight, .testimonial-quote) {
  font-size: 1.4375rem;
  line-height: 1.15;
  font-family: var(--font-accent);
  color: var(--color-white);
  font-weight: 700;
  text-align: center;
  inline-size: 100%;
  margin: 0;
  word-break: break-word;
}
.testimonial-mini :is(.testimonial-highlight, .testimonial-quote) > * {
  margin: 0;
}
.testimonial-mini .testimonial-divider {
  inline-size: 100%;
  block-size: 1px;
  margin: 2.5rem 0 1.4375rem;
  border: 0;
  background: rgba(217, 217, 217, 0.2);
}
.testimonial-mini .testimonial-divider::before, .testimonial-mini .testimonial-divider::after {
  display: none;
}
.testimonial-mini .testimonial-source {
  font-size: 1rem;
  line-height: 1;
  font-family: var(--font-accent);
  color: var(--color-white);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  inline-size: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
}
.testimonial-mini .testimonial-source > span::after {
  display: none;
}
.testimonial-mini .testimonial-source-icon {
  inline-size: 4.375rem;
  block-size: 1.4402rem;
  margin-inline-start: auto;
}
.testimonial-mini .testimonial-source-icon .content-icon {
  display: flex;
  inline-size: 100%;
  block-size: 100%;
}

/* Video Button - Default (One that doesnt have custom markup in it, just the usual one with a play symbol)
https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/helper/video-button.md
--------------------------------------------------------------- */
/* Video Button Skeletons. No need to edit 
--------------------------------------------------------------- */
@keyframes video-button-default-text-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.video-button-html .wistia-embed {
  display: contents !important;
}

.video-button-default {
  display: inline-flex;
  block-size: var(--video-button-size);
  aspect-ratio: 1/1;
  position: relative;
  font-size: var(--video-button-size);
  z-index: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.video-button-default:is(.video-button-no-api) {
  pointer-events: none;
}
.video-thumbnail .video-button-default {
  /* customize instances of video button within thumbnail*/
  position: absolute;
  z-index: 1;
  inset: 0;
  margin: auto;
}
.video-button-default-image, .video-button-default-text, .video-button-default-text-svg, .video-button-default-text span, .video-button-default::before, .video-button-default::after {
  position: absolute;
  margin: auto;
  pointer-events: none;
}
.video-button-default-text, .video-button-default-image {
  inset: 0;
}
.video-button-default.video-button-default-no-icon::before, .video-button-default.video-button-default-no-icon::after {
  content: "";
  display: block;
}
.video-button-default > .wistia_click_to_play {
  position: static !important;
  inline-size: auto !important;
  block-size: auto !important;
}
.video-button-default-image {
  --cover-aspect-w: 1;
  --cover-aspect-l: 1;
  --cover-background: transparent;
}
.video-button-default-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
}
.video-button-default-glyph::before {
  content: "";
  display: block;
  width: var(--video-button-glyph-width);
  height: var(--video-button-glyph-height);
  background: var(--video-button-glyph-color, currentColor);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.video-button-default-glyph:not(.video-button-default-glyph-has-text) {
  padding-left: calc(var(--video-button-glyph-width) * 0.25);
}
.video-button-default-glyph-has-text::before {
  content: none;
}
.video-button-default-text {
  font-size: var(--video-button-glyph-height);
}
.video-button-default-text-svg {
  transform-style: preserve-3d;
  max-inline-size: none;
  inset: -100%;
  margin: auto;
  font-size: calc(1em * 1 / var(--video-button-text-svg-radius-ratio));
  inline-size: calc(200% * var(--video-button-text-svg-radius-ratio));
  block-size: calc(200% * var(--video-button-text-svg-radius-ratio));
}
.video-button-default-text-svg-path {
  transform-origin: center center;
}
.video-button-default-text-html span {
  inset-block-start: 0;
  inset-block-end: 0;
  inline-size: max-content;
  block-size: max-content;
}
.video-button-default-text-html span:not(.video-button-default-text-html-separator):first-child {
  inset-inline-end: 100%;
  margin-inline-end: 1em;
}
.video-button-default-text-html span:not(.video-button-default-text-html-separator):last-child {
  inset-inline-start: 100%;
  margin-inline-start: 1em;
}
.video-button-default-image-init:not(:only-child), .video-button-default:is(:hover, :focus) .video-button-default-image-hover, .video-pointer-reference:is(:hover, :focus, :focus-within) .video-button-default-image-hover {
  opacity: 1;
}

.video-button-default-image-hover, .video-button-default:is(:hover, :focus) .video-button-default-image-init:not(:only-child), .video-pointer-reference:is(:hover, :focus, :focus-within) .video-button-default-image-init:not(:only-child) {
  opacity: 0;
}

/* Video Thumbnail https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/helper/video-thumbnail.md
--------------------------------------------------------------- */
/* Video Pointer Reference
--------------------------------------------------------------- */
.video-pointer-reference:has(.video-thumbnail .video-button) {
  cursor: pointer;
}

/* Video Thumbnail Skeletons. No need to edit 
--------------------------------------------------------------- */
.video-thumbnail {
  --cover-aspect-w: var(--video-thumbnail-aspect-w);
  --cover-aspect-l: var(--video-thumbnail-aspect-l);
  flex: 0 0 auto;
  position: relative;
  background-color: var(--color-light-alt);
  overflow: hidden;
}
.video-thumbnail-markup {
  border-radius: 0;
}
.video-thumbnail-markup[href]::after, .video-thumbnail-markup.wistia_embed::after {
  /* overlay */
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--video-thumbnail-overlay-background);
  opacity: var(--video-thumbnail-overlay-opacity);
  mix-blend-mode: var(--video-thumbnail-overlay-mix-blend);
  backdrop-filter: var(--video-thumbnail-overlay-backdrop-filter);
}
.video-thumbnail-markup-img img {
  max-inline-size: none;
}

/* force object fit cover where we need to, im looking at you wistia
--------------------------------------------------------------- */
:is(.video-thumbnail-markup > *, .video-thumbnail-markup img) {
  inline-size: 100% !important;
  block-size: 100% !important;
  max-inline-size: none !important;
  max-block-size: none !important;
  position: absolute !important;
  inset: 0 !important;
  object-fit: cover !important;
  margin: 0 !important;
}

/* Video Button Customizations: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/helper/video-button.md#css-vars
--------------------------------------------------------------- */
.video-button-default {
  --video-button-size: 4rem;
  /* size of video button by height and or width */
  --video-button-text-svg-radius-ratio: 1.25;
  /*  ratio of svg path for rounded text. */
  --video-button-text-svg-start-offset: 50%;
  /*  offset of svg text */
  --video-button-glyph-height: 20%;
  /* height for video play triangle glyph*/
  /* Tip: set as ems so the play symbol scales along with the actual button */
  --video-button-glyph-width: 18%;
  /* width for video play triangle glyph*/
  /* Tip: set as ems so the play symbol scales along with the actual button */
  --video-button-glyph-color: currentColor;
  /* color of the video button glyph. Used as a background-color so it can take gradients too */
  color: var(--color-light);
}
.video-button-default, .video-button-default-image, .video-button-default-text, .video-button-default::before, .video-button-default::after, .video-button-default-thumbnail-markup::after {
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
}
.video-button-default, .video-button-default-image, .video-button-default-text, .video-button-default-thumbnail-markup::after {
  transition-property: opacity, left, top, bottom, right, width, height;
}
.video-button-default::before, .video-button-default::after {
  transition-property: all;
}
.video-thumbnail .video-button-default {
  /* customize instances of video button within thumbnail*/
  --video-button-size: clamp(3rem,50%,10rem);
}
.video-thumbnail .video-button-default:is(:hover, :focus), .video-pointer-reference:is(:hover, :focus, :focus-within) .video-thumbnail .video-button-default {
  --video-thumbnail-overlay-opacity: 0.8;
}
@media only screen and (min-width: 87.5rem) {
  .video-button-default {
    --video-button-size: 6.25rem;
  }
}
.video-button-default-glyph::before {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.video-button-default-text {
  font-size: 0.75rem;
  line-height: 1;
  color: var(--color-neutral);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
}
.video-button-default-text-separator {
  color: inherit;
}
.video-button-default-text-svg {
  transform: rotate(32deg);
  color: inherit;
}
.video-button-default-text-html > span {
  inset-block-start: 0;
  inset-block-end: 0;
}
.video-button-default.video-button-default-no-icon {
  /* tru element/background */
  /* these are basic styles. overhaul as needed */
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
}
.video-button-default.video-button-default-no-icon, .video-button-default.video-button-default-no-icon::before, .video-button-default.video-button-default-no-icon::after {
  /* these are basic styles. overhaul as needed */
  border-radius: 999em;
  transform-origin: center center;
  transform-style: preserve-3d;
  transform: scale(1);
  margin: auto;
}
.video-button-default.video-button-default-no-icon::before {
  /* fake extra background */
  /* these are basic styles. overhaul as needed */
  background: linear-gradient(to bottom, var(--color-primary-gradient-start), var(--color-primary-gradient-end));
  z-index: -1;
  inset: 12.5%;
}
.video-button-default.video-button-default-no-icon::after {
  /* other element for fx */
  /* these are basic styles. overhaul as needed */
  border: 0.0125em solid var(--color-accent);
  inset: 18%;
}
.video-button-default.video-button-default-no-icon:is(:hover, :focus), .video-pointer-reference:is(:hover, :focus, :focus-within) .video-button-default.video-button-default-no-icon {
  /* on hover on itself/ containing repeater/ .video-pointer-reference */
  --video-button-glyph-color: linear-gradient(
  	to bottom,
  	var(--color-light-alt),
  	var(--color-light)
  );
  /* these are basic styles. overhaul as needed */
  box-shadow: 0 0 0 0.1em rgba(255, 255, 255, 0.2);
}
.video-button-default.video-button-default-no-icon:is(:hover, :focus)::before, .video-pointer-reference:is(:hover, :focus, :focus-within) .video-button-default.video-button-default-no-icon::before {
  /* these are basic styles. overhaul as needed */
  background: linear-gradient(to bottom, var(--color-primary-gradient-start), var(--color-primary-gradient-end));
  transform: scale(1.25);
}
.video-button-default.video-button-default-no-icon:is(:hover, :focus)::after, .video-pointer-reference:is(:hover, :focus, :focus-within) .video-button-default.video-button-default-no-icon::after {
  /* these are basic styles. overhaul as needed */
  transform: scale(0.98);
}
.video-thumbnail .video-button-default.video-button-default-no-icon:is(:hover, :focus), .video-pointer-reference:has(.video-thumbnail .video-button-default.video-button-default-no-icon):is(:hover, :focus-within) .video-button-default.video-button-default-no-icon {
  /* these are basic styles. overhaul as needed */
}
.video-thumbnail .video-button-default.video-button-default-no-icon:is(:hover, :focus)::before, .video-pointer-reference:has(.video-thumbnail .video-button-default.video-button-default-no-icon):is(:hover, :focus-within) .video-button-default.video-button-default-no-icon::before {
  /* these are basic styles. overhaul as needed */
}
.video-thumbnail .video-button-default.video-button-default-no-icon:is(:hover, :focus)::after, .video-pointer-reference:has(.video-thumbnail .video-button-default.video-button-default-no-icon):is(:hover, :focus-within) .video-button-default.video-button-default-no-icon::after {
  /* these are basic styles. overhaul as needed */
}

/* Video Thumbnail https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/helper/video-thumbnail.md
--------------------------------------------------------------- */
/* Video Thumbnail
https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/helper/video-thumbnail.md#css-vars
--------------------------------------------------------------- */
.video-thumbnail {
  --video-thumbnail-aspect-w: 16;
  --video-thumbnail-aspect-l: 9;
  --video-thumbnail-overlay-background: var(--color-dark-alt)
  	linear-gradient(to bottom right, var(--color-dark), var(--color-dark-alt));
  --video-thumbnail-overlay-opacity: 0;
  --video-thumbnail-overlay-backdrop-filter: none;
  --video-thumbnail-overlay-mix-blend: multiply;
}
.video-thumbnail:is(:hover, :focus), .video-pointer-reference:is(:hover, :focus, :focus-within) .video-thumbnail {
  --video-thumbnail-overlay-opacity: 0.8;
}
.video-thumbnail-markup[href]::after, .video-thumbnail-markup.wistia_embed::after {
  /* overlay */
  transition: 0.25s ease-in-out all;
}

/* includes/repeater-video
--------------------------------------------------------------- */
.video {
  /* styles when the video has a link */
}
.video {
  max-inline-size: 100%;
}
.video, .video-container {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
}
.video-container {
  inline-size: 100%;
  flex: 1 1;
  gap: 1rem;
}
.video-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin-block: 0;
  flex: 1 1;
}
/* ================================================================================
* Parts 
================================================================================ */
/* Review Us Page https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/parts/review-us.md
--------------------------------------------------------------- */
.review-us {
  text-align: center;
}
.review-us-columns {
  --columns-gap-x: 4em;
  --columns-gap-y: 2em;
  align-items: flex-end;
  justify-content: center;
}
.review-us-columns .button {
  margin-block-start: 1em;
}
.review-us, .review-us-video {
  margin-block-start: 3em;
}
@media only screen and (min-width: 48rem) {
  .review-us-columns {
    --columns-number: 2;
  }
  .review-us-columns .button {
    inline-size: 100%;
  }
}
/* Awards https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/parts/awards.md
--------------------------------------------------------------- */
.awards {
  justify-self: stretch;
}
.awards:where(.section-blocks :has(.awards-container:is(.container))) {
  margin-inline: calc(var(--container-gutter, 0px) * -1);
  justify-self: stretch;
  max-inline-size: none;
}
/* Author Meta https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/parts/author.md
--------------------------------------------------------------- */
.author-meta {
  margin-block-start: 2.5rem;
  padding: 1.5rem;
  border: 1px solid var(--color-gray);
  border-radius: 0.625rem;
  background: var(--color-white);
  color: var(--color-black);
  overflow: hidden;
}
.author-meta-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem 1.25rem;
  padding: 0;
}
.author-meta-summary {
  display: contents;
}
.author-meta .profile-name,
.author-meta .profile-position,
.author-meta .profile-blurb {
  margin-block: 0;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
.author-meta .profile-name {
  font-size: 1.5625rem;
  line-height: 1.15;
  font-family: var(--font-accent);
  color: var(--color-blue-400);
  letter-spacing: 0em;
  text-transform: none;
  font-weight: 700;
  text-align: left;
  grid-column: 1/-1;
  grid-row: 1;
}
.author-meta .profile-position {
  font-size: 1.3125rem;
  line-height: 1.15;
  font-family: var(--font-accent);
  color: var(--color-blue-300);
  letter-spacing: 0em;
  text-transform: none;
  font-weight: 700;
  text-align: left;
  grid-column: 1/-1;
  grid-row: 2;
}
.author-meta .profile-image {
  --profile-image-aspect-w: 1;
  --profile-image-aspect-l: 1;
  --profile-image-position: 50% 50%;
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
  align-self: start;
  inline-size: min(10rem, 100%);
  margin-block-start: 0.625rem;
  border-radius: 0.625rem;
  overflow: hidden;
}
.author-meta .profile-blurb {
  font-size: 1.125rem;
  line-height: 1.5;
  font-family: var(--font-primary);
  color: var(--color-black);
  letter-spacing: 0em;
  text-transform: none;
  font-weight: 400;
  text-align: left;
  grid-column: 1;
  grid-row: 4;
  margin-block-start: 0.625rem;
}
.author-meta .profile-blurb > :first-child {
  margin-block-start: 0;
}
.author-meta .profile-blurb > :last-child {
  margin-block-end: 0;
}
.author-meta-no-image .profile-blurb {
  grid-row: 3;
}
@media only screen and (min-width: 48rem) {
  .author-meta {
    padding: 2.1875rem;
  }
  .author-meta-has-image .author-meta-container {
    grid-template-columns: 10rem minmax(0, 1fr);
  }
  .author-meta-has-image .profile-blurb {
    grid-column: 2;
    grid-row: 3;
  }
}

/* ================================================================================
* Header
================================================================================ */
/* Layout Header https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/layout/header.md
Note: The styles will be setup mobile first starting with the smallest device comp where the header menu toggle is no longer visible  (usually initially at md/laptop)
And then Desktop first starting with the largest device comp where the the header toggle is visible (Usually sm/tablet)
Tip: setting up mobile navigation desktop-first starting at sm-max for touch screen styles, and then mobile-first starting at md for desktop styles helps simplify the styles and lessen the need for overrides.
Also Tip: Default styles are set based on its sticky state, and then overriding these styles when no scroll has happened yet (.doc-header-not-sticky). This is to keep styles less repetitive and as simple as possible
--------------------------------------------------------------- */
/* Layout Header Variables
--------------------------------------------------------------- */
/* Tip: placing the css var on :root can allow elements outside of the layout header utilize the variable if needed ie sticky stuff, offsets, jump link scroll etc. */
:root {
  --layout-header-height: 7.5rem;
  /* initial height of the whole header */
  --layout-header-height-before-sticky: var(--layout-header-height);
  /* height of the whole header on overlap/ before sticky */
  --layout-header-offset: 0rem;
  /* How far off the header is from the top of the viewport. This is specially useful for .header-can-overlap styles before sticky-ing */
  --layout-header-logo-height: var(--layout-header-height);
  /* height of logo including its padding at a given state or layout. */
}
@media only screen and (min-width: 75rem) {
  :root {
    /* Non-touch Devices Header Styles Start */
  }
}
@media only screen and (max-width: 74.9375rem) {
  :root {
    /* Touch Devices Header Styles Start */
    --layout-header-height: 5rem;
    /* offset: one top value might work for the design. NOTE: adjust ilawyer alertbar settings accordingly if enabled (dynamic margin, offset to bottom on touch devices, position, etc.) */
  }
}
@media only screen and (max-width: 47.9375rem) {
  :root {
    --layout-header-height: 9.375rem;
    --layout-header-logo-height: 5rem;
    /* offset: one top value might work for the design. NOTE: adjust ilawyer alertbar settings accordingly if enabled (dynamic margin, offset to bottom on touch devices, position, etc.) */
  }
}
.doc-header-not-sticky .header-can-overlap {
  /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices. NOTE: You can modify where overlay styles can appear by modifying the functions body header classes */
  /* Top: Avoid changing the --layout-header-height in this state to prevent the document from shifting on scroll */
}
@media only screen and (min-width: 75rem) {
  .doc-header-not-sticky .header-can-overlap {
    /* override logo height apart form the header height on this state only. Adjust as needed */
    /* set to before sticky height */
    --layout-header-logo-height: 12rem;
    /* set to a weirder height */
    --layout-header-offset: 1.25rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .doc-header-not-sticky .header-can-overlap {
    --layout-header-offset: 1.125rem;
  }
}
@media only screen and (max-width: 74.9375rem) {
  :not(.doc-header-menu-open).doc-header-not-sticky .header-can-overlap {
    /* Touch Devices Header Styles Start */
    /* offset: one top value might work for the design. NOTE: adjust ilawyer alertbar settings accordingly if enabled (dynamic margin, offset to bottom on touch devices, position, etc.) */
    --layout-header-offset: 0rem;
  }
}
.doc-header-menu-open {
  /* Styles/Selectors for when header menu accordion for touch devices is open */
}
@media only screen and (max-width: 74.9375rem) {
  .doc-header-menu-open {
    /* DO NOT ENABLE. Safari has a bug that conflicts the window scrollbar as of 06/24 */
    /* overflow-block:hidden; */
  }
}
/* Offset the scroll by the header height so the element a jump link scrolls to us not underneath the header but instead compensates to the header height and scrolls just next to it
--------------------------------------------------------------- */
html,
body {
  scroll-padding-block-start: calc(var(--layout-header-height) + var(--layout-header-offset, 0px)) !important;
}

/* Layout Header Overlaps
	NOTE: Classes to use:
		.has-layout-header-offset => the element within the layout that will have the negative margins to overlap itself
--------------------------------------------------------------- */
@media only screen and (min-width: 75rem) {
  .header-can-overlap .has-layout-header-offset:not(:has(.has-layout-header-offset)):first-child:is(:is(.template-wrapper > :first-child),
  :is(.template-wrapper > :first-child) *)::before {
    content: "";
    flex: 0 0 auto;
    grid-column: 1/-1;
    block-size: var(--layout-header-height-before-sticky);
    display: block;
    inline-size: 100%;
  }
  .header-can-overlap:has(.has-layout-header-offset) .layout-header {
    position: fixed;
  }
}
/* Layout Header Itself
--------------------------------------------------------------- */
.layout-header {
  /* Note: position must be set initially, NOT based on whether or not a scroll has occured (sticky vs not-sticky class). This is to prevent layout jumps on scroll */
  position: sticky;
  inset-block-start: var(--layout-header-offset, 0px);
  inset-inline-start: 0;
  z-index: 999;
  inline-size: 100%;
  color: var(--scheme-fg, var(--color-light));
  transition: 0.25s top ease-in-out;
  box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.8);
}
.layout-header::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0 -2px -5px -2px;
  border-radius: 0 0 30px 30px;
  background: linear-gradient(77deg, #29AAE2 0.98%, #ED1C24 100.19%);
}
@media only screen and (min-width: 75rem) {
  .layout-header {
    /* Non-touch Devices Header Styles Start */
  }
  .layout-header-container {
    --container-gutter: 2.5rem;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .layout-header {
    /* Touch Devices Header Styles Start */
  }
}
.doc-header-not-sticky .header-can-overlap .layout-header {
  /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices. NOTE: You can modify where overlay styles can appear by modifying the functions body header classes */
}
@media only screen and (min-width: 75rem) {
  .doc-header-not-sticky .header-can-overlap .layout-header {
    /* remove background */
    background: transparent;
    /* remove dropdown shadow on all devices when not scrolling yet */
    box-shadow: none;
  }
}
@media only screen and (max-width: 74.9375rem) {
  :not(.doc-header-menu-open).doc-header-not-sticky .header-can-overlap .layout-header {
    /* Touch Devices Header Styles Start */
  }
}
.doc-header-not-sticky .layout-header {
  /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */
}
@media only screen and (max-width: 47.9375rem) {
  .doc-header-not-sticky .layout-header {
    /* reset offset when no scrolling yet */
    --layout-header-offset: 0;
  }
}
.doc-header-menu-open .layout-header {
  /* Styles/Selectors for when header menu accordion for touch devices is open */
}
.header-can-overlap .layout-header {
  /* Overlay header on header-can-overlap. best for setting position on large devices AND NOTHING ELSE */
}
/* Header Blocks - How elements will be layed out in the header
--------------------------------------------------------------- */
:where(.header-block, .header-blocks) {
  /* uncomment if flex/grid is causing any issues*/
  min-inline-size: 0;
}

.header-blocks {
  justify-content: center;
  align-items: center;
  column-gap: var(--container-gutter);
  row-gap: 0rem;
  inline-size: auto;
  block-size: var(--layout-header-height);
}
.header-block:is(.header-logo) {
  grid-area: logo;
  justify-self: self-start;
  block-size: var(--layout-header-logo-height);
}
.header-block:is(.header-nav) {
  grid-area: nav;
}
.header-block:is(.header-cta) {
  grid-area: cta;
}
.header-block:is(.header-toggle-menu) {
  grid-area: toggle-menu;
  align-self: stretch;
}
@media only screen and (min-width: 75rem) {
  .header-block {
    /* Non-touch Devices Header Styles Start */
  }
  .header-blocks {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo nav cta";
  }
  .header-block:is(.header-logo) {
    margin-block-end: min(0px, (var(--layout-header-logo-height) - var(--layout-header-height)) * -1);
  }
  .header-block:is(.header-nav) {
    justify-self: end;
    align-self: stretch;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 112.4375rem) {
  .header-blocks {
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr max-content;
    grid-template-areas: "logo cta" "logo nav";
  }
  .header-block:is(.header-logo) {
    align-self: center;
  }
  .header-block:is(.header-nav) {
    justify-self: self-end;
    align-self: stretch;
  }
  .header-block:is(.header-cta) {
    justify-self: self-end;
    align-self: center;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .header-block {
    /* Touch Devices Header Styles Start */
  }
  .header-blocks {
    margin-inline: calc(var(--container-gutter, 0px) * -1);
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo cta toggle-menu";
  }
  .header-block:is(.header-cta) {
    justify-self: self-end;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .header-blocks {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    grid-template-areas: "logo logo" "cta toggle-menu";
    column-gap: 0;
  }
  .header-block:is(.header-logo) {
    justify-self: stretch;
  }
  .header-block:is(.header-cta) {
    justify-self: stretch;
    align-self: stretch;
  }
}
.doc-header-not-sticky .header-can-overlap .header-block {
  /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices. NOTE: You can modify where overlay styles can appear by modifying the functions body header classes */
}
@media only screen and (min-width: 75rem) {
  .doc-header-not-sticky .header-can-overlap .header-blocks {
    block-size: var(--layout-header-height-before-sticky);
  }
}
@media only screen and (min-width: 75rem) and (max-width: 112.4375rem) {
  .doc-header-not-sticky .header-can-overlap .header-block:is(.header-nav) {
    align-self: stretch;
  }
}
@media only screen and (max-width: 74.9375rem) {
  :not(.doc-header-menu-open).doc-header-not-sticky .header-can-overlap .header-block {
    /* Touch Devices Header Styles Start */
  }
  :not(.doc-header-menu-open).doc-header-not-sticky .header-can-overlap .header-blocks {
    min-block-size: var(--layout-header-height-before-sticky);
  }
}
.doc-header-not-sticky .header-block {
  /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */
}
.header-block .doc-header-menu-open {
  /* Styles/Selectors for when header menu accordion for touch devices is open */
}
/* Header Logo
--------------------------------------------------------------- */
.header-logo {
  padding-block: 1rem;
  flex: 0 0 auto;
  /* support logo offseting on overlay banner + not sticky state. comment if not needed */
  position: relative;
}
.header-logo .logo-wrapper-br, .header-logo .logo-wrapper-before-sticky {
  /* hide possible variations of logo */
  display: none;
}
@media only screen and (min-width: 75rem) {
  .header-logo {
    /* Non-touch Devices Header Styles Start */
    margin-inline-start: calc(var(--container-gutter, 0px) * -1);
    padding-inline: var(--container-gutter, 1.5rem);
  }
}
@media only screen and (max-width: 74.9375rem) {
  .header-logo {
    /* Touch Devices Header Styles Start */
    padding-block: 0.5rem;
    padding-inline: var(--container-gutter, 1rem);
  }
}
@media only screen and (max-width: 47.9375rem) {
  .header-logo {
    max-inline-size: 100%;
    inline-size: 100%;
    background-color: var(--color-dark);
  }
  .header-logo .logo-wrapper-br {
    /* show  */
    display: block;
  }
  .header-logo .logo-wrapper-br ~ .logo-wrapper-nonbr {
    display: none;
  }
}
.doc-header-not-sticky .header-can-overlap .header-logo {
  /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices. NOTE: You can modify where overlay styles can appear by modifying the functions body header classes */
}
@media only screen and (min-width: 75rem) {
  .doc-header-not-sticky .header-can-overlap .header-logo {
    background-color: transparent;
    /* Any other styles for emphasis on logo on this state. Adjust as needed. Adjust as needed */
  }
  .doc-header-not-sticky .header-can-overlap .header-logo .logo-wrapper-sticky, .doc-header-not-sticky .header-can-overlap .header-logo .logo-wrapper-before-sticky ~ .logo-wrapper-br {
    /* hide default logo on before sticky */
    display: none;
  }
  .doc-header-not-sticky .header-can-overlap .header-logo .logo-wrapper-before-sticky {
    /* show  */
    display: block;
  }
}
@media only screen and (max-width: 74.9375rem) {
  :not(.doc-header-menu-open).doc-header-not-sticky .header-can-overlap .header-logo {
    /* Touch Devices Header Styles Start */
  }
}
.doc-header-not-sticky .header-logo {
  /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */
}
.doc-header-menu-open .header-logo {
  /* Styles/Selectors for when header menu accordion for touch devices is open */
}
/* Header Toggle/s - Scaffolding for usual box buttons
--------------------------------------------------------------- */
.header-toggle {
  inline-size: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex: 0 0 auto;
  padding: 0;
}
@media only screen and (min-width: 75rem) {
  .header-toggle {
    /* Non-touch Devices Header Styles Start */
  }
}
@media only screen and (max-width: 74.9375rem) {
  .header-toggle {
    /* Touch Devices Header Styles Start */
  }
}
.doc-header-not-sticky .header-can-overlap .header-toggle {
  /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices. NOTE: You can modify where overlay styles can appear by modifying the functions body header classes */
}
@media only screen and (max-width: 74.9375rem) {
  :not(.doc-header-menu-open).doc-header-not-sticky .header-can-overlap .header-toggle {
    /* Touch Devices Header Styles Start */
  }
}
.doc-header-not-sticky .header-toggle {
  /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */
}
@media only screen and (max-width: 74.9375rem) {
  .doc-header-not-sticky .header-toggle {
    /* Touch Devices Header Styles Start */
  }
}
.doc-header-menu-open .header-toggle {
  /* Styles/Selectors for when header menu accordion for touch devices is open */
}
@media only screen and (max-width: 74.9375rem) {
  .doc-header-menu-open .header-toggle {
    /* Touch Devices Header Styles Start */
  }
}
.doc-header-menu-open.doc-header-not-sticky .header-toggle {
  /* Styles/Selectors for when header menu accordion for touch devices is open and header is not sticky yet */
}
@media only screen and (max-width: 74.9375rem) {
  .doc-header-menu-open.doc-header-not-sticky .header-toggle {
    /* Touch Devices Header Styles Start */
  }
}
/* Header Toggle - Menu
--------------------------------------------------------------- */
.header-toggle-menu {
  --layout-header-menu-toggle-open-offset: 0rem;
  /* How far off the toggle is from its original position. useful for mobile when the layout of the header shifts around and the toggle is positioned weird over the menu when it's open */
  background: var(--color-primary) linear-gradient(to bottom, var(--color-primary-gradient-start), var(--color-primary-gradient-end));
  color: inherit;
  position: relative;
  z-index: 99999;
  inset-block-start: 0;
  transition: 0.375s all ease-in-out;
  order: 99;
}
.header-toggle-menu.open {
  inset-block-start: var(--layout-header-menu-toggle-open-offset);
}
.header-toggle-menu-icon {
  --fancy-icon-menu-width: 2rem;
  --fancy-icon-menu-height: 1.3125rem;
  --fancy-icon-menu-bar-height: 3px;
}
.header-toggle-menu.open .header-toggle-menu-icon {
  color: inherit;
}
.header-toggle-menu-label {
  font-size: 0.75rem;
  font-family: var(--font-accent);
  text-transform: uppercase;
  font-style: normal;
  font-weight: 700;
  text-align: center;
  margin-block-start: 0.5em;
  transition: 0.375s all ease-in-out;
}
.header-toggle-menu.open .header-toggle-menu-label {
  margin-block-start: -1em;
  opacity: 0;
}
.header-toggle-menu.open .header-toggle-menu-label:nth-last-child(2) {
  display: none;
}
.header-toggle-menu:not(.open) .header-toggle-menu-label:nth-child(3) {
  display: none;
}
@media only screen and (min-width: 75rem) {
  .header-toggle-menu {
    /* Non-touch Devices Header Styles Start */
  }
}
@media only screen and (max-width: 74.9375rem) {
  .header-toggle-menu {
    /* Touch Devices Header Styles Start */
  }
}
@media only screen and (max-width: 47.9375rem) {
  .header-toggle-menu {
    --layout-header-menu-toggle-open-offset: calc(
    	var(--layout-header-logo-height) * -1
    );
  }
}
.doc-header-not-sticky .header-can-overlap .header-toggle-menu {
  /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices. NOTE: You can modify where overlay styles can appear by modifying the functions body header classes */
}
@media only screen and (max-width: 74.9375rem) {
  :not(.doc-header-menu-open).doc-header-not-sticky .header-can-overlap .header-toggle-menu {
    /* Touch Devices Header Styles Start */
  }
}
.doc-header-not-sticky .header-toggle-menu {
  /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */
}
.doc-header-menu-open .header-toggle-menu {
  /* Styles/Selectors for when header menu accordion for touch devices is open */
}
.doc-header-menu-open.doc-header-not-sticky .header-toggle-menu {
  /* Styles/Selectors for when header menu accordion for touch devices is open and header is not sticky yet */
}
/* Header Toggle - Other Block toggles
--------------------------------------------------------------- */
@media only screen and (min-width: 75rem) {
  .header-toggle- {
    /* Non-touch Devices Header Styles Start */
  }
}
@media only screen and (max-width: 74.9375rem) {
  .header-toggle- {
    /* Touch Devices Header Styles Start */
  }
}
.doc-header-not-sticky .header-can-overlap .header-toggle- {
  /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices. NOTE: You can modify where overlay styles can appear by modifying the functions body header classes */
}
@media only screen and (max-width: 74.9375rem) {
  :not(.doc-header-menu-open).doc-header-not-sticky .header-can-overlap .header-toggle- {
    /* Touch Devices Header Styles Start */
  }
}
.doc-header-not-sticky .header-toggle- {
  /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */
}
.doc-header-menu-open .header-toggle- {
  /* Styles/Selectors for when header menu accordion for touch devices is open */
}
.doc-header-menu-open.doc-header-not-sticky .header-toggle- {
  /* Styles/Selectors for when header menu accordion for touch devices is open and header is not sticky yet */
}
/* Header CTA
--------------------------------------------------------------- */
.header-cta {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 1rem;
}
@media only screen and (min-width: 75rem) {
  .header-cta {
    /* Non-touch Devices Header Styles Start */
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 112.4375rem) {
  .header-cta {
    flex-direction: row;
    align-items: center;
    padding-inline: 0;
    gap: 0.5rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .header-cta {
    margin-block-end: 0;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .header-cta {
    /* Touch Devices Header Styles Start */
    gap: 0.125rem;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .header-cta {
    text-align: center;
    align-items: center;
    flex: 1 1;
    padding-inline: var(--container-gutter);
  }
}
.doc-header-not-sticky .header-can-overlap .header-cta {
  /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices. NOTE: You can modify where overlay styles can appear by modifying the functions body header classes */
}
@media only screen and (max-width: 74.9375rem) {
  :not(.doc-header-menu-open).doc-header-not-sticky .header-can-overlap .header-cta {
    /* Touch Devices Header Styles Start */
  }
}
.doc-header-not-sticky .header-cta {
  /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */
}
.doc-header-menu-open .header-cta {
  /* Styles/Selectors for when header menu accordion for touch devices is open */
}
/* Header CTA - Text
--------------------------------------------------------------- */
.header-cta-text {
  line-height: 1.5;
  font-family: var(--font-accent);
  color: var(--color-accent);
  text-transform: uppercase;
}
.header-cta-text > span:nth-child(n+2)::before {
  content: "\25CF\FE0E";
  color: var(--color-primary);
  letter-spacing: 0em;
  margin: 0 0.5em;
}
@media only screen and (min-width: 48rem) {
  .header-cta-text {
    /* Non-touch Devices Header Styles Start */
  }
}
@media only screen and (max-width: 74.9375rem) {
  .header-cta-text {
    /* Touch Devices Header Styles Start */
  }
}
.doc-header-not-sticky .header-can-overlap .header-cta-text {
  /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices. NOTE: You can modify where overlay styles can appear by modifying the functions body header classes */
}
@media only screen and (max-width: 74.9375rem) {
  :not(.doc-header-menu-open).doc-header-not-sticky .header-can-overlap .header-cta-text {
    /* Touch Devices Header Styles Start */
  }
}
.doc-header-not-sticky .header-cta-text {
  /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */
}
.doc-header-menu-open .header-cta-text {
  /* Styles/Selectors for when header menu accordion for touch devices is open */
}
/* Header Number/s
--------------------------------------------------------------- */
.header-numbers {
  display: inline-flex;
  justify-content: inherit;
  justify-items: inherit;
  gap: 1rem;
}
.header-numbers .number-link {
  font-size: 1.75rem;
}
@media only screen and (min-width: 75rem) {
  .header-numbers {
    /* Non-touch Devices Header Styles Start */
  }
}
@media only screen and (max-width: 74.9375rem) {
  .header-numbers {
    /* Touch Devices Header Styles Start */
  }
}
.doc-header-not-sticky .header-can-overlap .header-numbers {
  /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices. NOTE: You can modify where overlay styles can appear by modifying the functions body header classes */
}
@media only screen and (max-width: 74.9375rem) {
  :not(.doc-header-menu-open).doc-header-not-sticky .header-can-overlap .header-numbers {
    /* Touch Devices Header Styles Start */
  }
}
.doc-header-not-sticky .header-numbers {
  /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */
}
.doc-header-menu-open .header-numbers {
  /* Styles/Selectors for when header menu accordion for touch devices is open */
}
/* Header Navigation
--------------------------------------------------------------- */
.header-nav {
  --layout-header-menu-touch-offset: 0rem;
  /* top offset of nav overlay on touch devices to the viewport */
}
@media only screen and (min-width: 75rem) {
  .header-nav {
    /* Non-touch Devices Header Styles Start */
  }
  .header-nav {
    display: flex;
    justify-content: center;
    flex: 1 1;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 112.4375rem) {
  .header-nav {
    justify-content: flex-end;
    flex: 0 0 auto;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .header-nav {
    /* Touch Devices Header Styles Start */
    --layout-header-menu-touch-offset: var(--layout-header-height);
    transition: top 0.25s ease-in-out, left 0.5s ease-in-out, opacity 0.5s ease-in-out;
    inline-size: 100%;
    overflow-inline: hidden;
    overflow-block: scroll;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    opacity: 0;
    z-index: 9999;
    scrollbar-inline-size: none;
    position: fixed;
    inset-block-end: 0;
    inset-inline-start: 100%;
    inset-block-start: var(--layout-header-menu-touch-offset);
    box-shadow: inset 0 5px 10px -5px rgba(0, 0, 0, 0.8);
  }
  .header-nav::-webkit-scrollbar {
    display: none;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .header-nav {
    --layout-header-menu-touch-offset: 0;
  }
}
.doc-header-not-sticky .header-can-overlap .header-nav {
  /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices. NOTE: You can modify where overlay styles can appear by modifying the functions body header classes */
}
@media only screen and (min-width: 75rem) {
  .doc-header-not-sticky .header-can-overlap .header-nav {
    color: inherit;
  }
}
@media only screen and (max-width: 74.9375rem) {
  :not(.doc-header-menu-open).doc-header-not-sticky .header-can-overlap .header-nav {
    /* Touch Devices Header Styles Start */
  }
}
.doc-header-not-sticky .header-nav {
  /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */
}
.doc-header-menu-open .header-nav {
  /* Styles/Selectors for when header menu accordion for touch devices is open */
}
@media only screen and (max-width: 74.9375rem) {
  .doc-header-menu-open .header-nav {
    inset-inline-start: 0%;
    opacity: 1;
  }
}
.doc-header-menu-open.doc-header-not-sticky .header-nav {
  /* Styles/Selectors for when header menu accordion for touch devices is open and header is not sticky yet */
}
/* Header Navigation Menu
--------------------------------------------------------------- */
.header-nav .menu {
  --layout-header-menu-touch-menu-padding-x: var(--container-gutter, 2rem);
  /* horizontal padding for menu items and accordion/dropdowns */
  --layout-header-menu-nontouch-dropdown-padding-x: 1.875rem;
  /* horizontal padding for menu items and accordion/dropdowns
  NOTE: Keep horizontal padding on the li items instead of the containing ul/dropdown to maintain hover hitspace or so that the next level of dropdown does not disappear while you hover to it */
  --layout-header-menu-nontouch-current-height: 3px;
  /* current item border indicator height */
  font-size: 0.875em;
  line-height: 1.125;
  font-family: var(--font-accent);
  color: inherit;
  text-transform: uppercase;
}
.header-nav .menu li {
  display: flex;
  flex-wrap: wrap;
}
.header-nav .menu li,
.header-nav .menu li > a {
  position: relative;
}
.header-nav .menu li > a {
  padding-block: 1em;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  transition: 0.125s ease-in-out all;
  gap: 0.5em;
  flex: 1 0;
  text-decoration: none;
  /* comment out if borders are not desired */
  border-block-end: 1px solid var(--color-neutral);
  justify-content: flex-start;
}
.header-nav .menu li:last-child, .header-nav .menu li:last-child > a {
  /* disable border for last items */
  border: none;
}
.header-nav .menu li:is(.menu-item-has-children) > a::after {
  display: inline-block;
  align-self: center;
  flex: 0 0 auto;
  content: "";
  font-size: 0.5rem;
  transform-origin: 67% 67%;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}
.header-nav .menu ul {
  background-color: var(--color-light-alt);
  color: var(--color-dark);
}
.header-nav .menu ul:is(.menu-item-has-children) > a::after {
  color: inherit;
}
@media only screen and (min-width: 75rem) {
  .header-nav .menu {
    gap: 2em;
    display: flex;
    justify-content: space-between;
    position: relative;
    /* extra extra deep deep deep inner level dropdown edge case dropdown fix */
    /* top level level dropdown edge case dropdown fix */
    /* extra deep inner level dropdown edge case dropdown fix */
  }
  .header-nav .menu li:is(:not(.menu-item-special li):is(:hover, :focus, :focus-within),
  :is(.menu-item-special li):is(.open)) ~ li > ul,
  .header-nav .menu li:not(:not(.menu-item-special li):is(:hover, :focus, :focus-within),
  :is(.menu-item-special li):is(.open)) > ul {
    display: none !important;
  }
  .header-nav .menu li {
    position: relative;
    padding-inline: var(--layout-header-menu-nontouch-dropdown-padding-x);
  }
  .header-nav .menu li > a {
    flex: 1 1;
    /* flush dropdown indicator and text to the left */
    justify-content: flex-start;
  }
  .header-nav .menu li:is(:hover, :focus, :focus-within, .menu-item-special .open) > a {
    /* activated styles upon interaction for nontouch */
    color: var(--scheme-sp, var(--color-secondary));
  }
  .header-nav .menu ul {
    inline-size: clamp(14.375rem, 18vi, 20.3125rem);
    inset-block-start: 0;
    inset-inline-start: 100%;
    /* Take dropdowns out of doc flow + setup for hover/focus effects */
    position: absolute;
    box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.8);
    z-index: 1;
    /* additional border styles + align to current item indicator. comment out if not needed */
    border-block-start: var(--layout-header-menu-nontouch-current-height) solid var(--color-accent);
    margin-block-start: calc(var(--layout-header-menu-nontouch-current-height) * -1);
  }
  .header-nav .menu ul li:is(.menu-item-has-children) > a::after {
    transform: rotate(-45deg);
    color: inherit;
  }
  .header-nav .menu > li {
    flex-direction: row;
    padding-inline: 0;
  }
  .header-nav .menu > li > a {
    padding-block: 0.875rem;
    padding-inline: 0;
    border: none;
  }
  .header-nav .menu > li::before {
    /* current menu item indicator */
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    margin: 0 auto;
    transition: 0.125s ease-in-out inline-size;
    inline-size: 0;
    block-size: var(--layout-header-menu-nontouch-current-height);
    background: var(--color-accent);
  }
  .header-nav .menu > li:is(:hover, :focus, :focus-within, .menu-item-special .open), .header-nav .menu > li:is(:hover, :focus, :focus-within, .menu-item-special .open) > a {
    /* undo fanciness from non-media query scaffolding for top level menu item and its child a tag */
    border: none;
    background: none;
    color: inherit;
    margin: 0;
  }
  .header-nav .menu > li:is(:hover, :focus, :focus-within, .menu-item-special .open)::before {
    /* current menu item indicator if active */
  }
  .header-nav .menu > li:is(.current-menu-item, .current-menu-ancestor)::before {
    /* current menu item indicator if active */
  }
  .header-nav .menu > li:is(.current-menu-item,
  .current-menu-ancestor,
  :hover,
  :focus,
  :focus-within)::before {
    /* current menu item indicator if active */
    inline-size: 100%;
  }
  .header-nav .menu > li:is(.menu-item-has-children) > a::after {
    color: var(--color-primary);
  }
  .header-nav .menu > li.menu-item-special {
    --layout-header-nav-special-sub-width: 20.3125em;
    --layout-header-nav-special-padding-y: .75rem;
    --layout-header-menu-nontouch-dropdown-padding-x: 2.1875rem;
    position: static;
  }
  .header-nav .menu > li.menu-item-special li {
    position: static;
    flex-direction: column;
    padding-inline: 0;
  }
  .header-nav .menu > li.menu-item-special li.view-all {
    grid-column: 1/-1;
  }
  .header-nav .menu > li.menu-item-special ul {
    padding-inline: var(--layout-header-menu-nontouch-dropdown-padding-x);
  }
  .header-nav .menu > li.menu-item-special:nth-last-child(-n+2) > ul {
    left: auto;
    right: 0;
    transform: none;
  }
  .header-nav .menu > li.menu-item-special > ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-content: start;
    column-gap: var(--layout-header-menu-nontouch-dropdown-padding-x);
    padding-inline: var(--layout-header-menu-nontouch-dropdown-padding-x) calc(var(--layout-header-menu-nontouch-dropdown-padding-x) + var(--layout-header-nav-special-sub-width));
    inline-size: min(80vi, 68rem);
    max-inline-size: calc(100vi - var(--container-gutter) * 2);
    max-block-size: calc(90vb - var(--layout-header-height));
    min-block-size: min(44rem, 75vb - var(--layout-header-height));
    margin-inline: auto;
    background-image: linear-gradient(to left, var(--color-light-alt) 0, var(--color-light-alt) var(--layout-header-nav-special-sub-width), transparent var(--layout-header-nav-special-sub-width), transparent 100%);
    inset-inline: auto 0;
  }
  .header-nav .menu > li.menu-item-special > ul ul {
    border-radius: 0;
    box-shadow: none;
    color: inherit;
  }
  .header-nav .menu > li.menu-item-special > ul,
  .header-nav .menu > li.menu-item-special > ul ul {
    padding-block: var(--layout-header-nav-special-padding-y);
    scrollbar-width: none;
    overflow-y: scroll;
  }
  .header-nav .menu > li.menu-item-special > ul::-webkit-scrollbar,
  .header-nav .menu > li.menu-item-special > ul ul::-webkit-scrollbar {
    display: none;
  }
  .header-nav .menu > li.menu-item-special > ul > li > ul {
    mask-image: linear-gradient(to bottom, transparent 0%, white 1.5em, white calc(100% - 3em), transparent calc(100% - 1.5em));
    position: absolute;
    inset-block: 0;
    right: 0;
    left: auto;
    width: var(--layout-header-nav-special-sub-width);
    background: none;
  }
  .header-nav .menu > li.menu-item-special > ul > li > ul ul {
    background: rgba(0, 0, 0, 0.08);
    width: auto;
    position: static;
    margin-inline: calc(var(--layout-header-menu-nontouch-dropdown-padding-x) * -1);
  }
  .header-nav .menu > li > ul {
    inset-block-start: 100%;
    inset-inline-start: 0;
  }
  .header-nav .menu > li > ul ul {
    background-color: var(--color-dark-alt);
    color: var(--color-light);
  }
  .header-nav .menu ul ul ul {
    inset-inline-start: calc(var(--layout-header-menu-nontouch-dropdown-padding-x) * 2);
    inset-block-start: 100%;
    transform: none;
  }
  .header-nav .menu > li:is(:nth-last-child(-n+2)) > ul {
    inset-inline-start: unset;
    transform: none;
    inset-inline-end: 0;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .header-nav .menu > li:is(.menu-item-rtl) > ul {
    inset-inline-start: unset;
    transform: none;
    inset-inline-end: 0;
  }
}
@media only screen and (min-width: 75rem) {
  .header-nav .menu > li:is(:nth-last-child(-n+2)) > ul ul {
    inset-inline-end: calc(var(--layout-header-menu-nontouch-dropdown-padding-x) * 2);
    inset-inline-start: auto;
  }
  .header-nav .menu ul ul {
    inset-inline-start: calc(var(--layout-header-menu-nontouch-dropdown-padding-x) * 2);
    inset-block-start: 100%;
    transform: none;
  }
  .header-nav .menu ul ul ul {
    inset-inline-start: 50%;
    inset-block-start: 80%;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .header-nav .menu {
    background: var(--color-light);
    color: var(--color-dark);
    padding-block-start: 6rem;
    padding-block-end: 6rem;
    inline-size: 100%;
    box-shadow: inherit;
    /* shift menu to the right edge and limit inline-size. comment if not needed*/
    max-inline-size: 31.25rem;
  }
  .header-nav .menu li:not(.open) > ul {
    display: none;
  }
  .header-nav .menu li {
    padding-inline: var(--layout-header-menu-touch-menu-padding-x);
  }
  .header-nav .menu li ul {
    margin-inline: calc(var(--layout-header-menu-touch-menu-padding-x) * -1);
  }
  .header-nav .menu li > a {
    flex: 1 0 100%;
    /* distance both dropdown indicator and menu text to the edge */
    justify-content: space-between;
  }
  .header-nav .menu li:is(:hover, :focus, :focus-within, .open) > a {
    /* activated styles upon interaction for touch */
    color: var(--scheme-sp, var(--color-primary));
  }
  .header-nav .menu li:is(.open) {
    border-block-end: 0;
  }
  .header-nav .menu li:is(.open) > a {
    border-block-end: 0;
  }
  .header-nav .menu ul {
    background-color: var(--color-light-alt);
    color: inherit;
    align-self: stretch;
    order: 99;
    flex: 1 0 100%;
    /* basic borders to contrast multiple dropdown levels */
    border-block: 1px solid var(--color-neutral);
  }
  .header-nav .menu ul:has(> li:last-child.open), .header-nav .menu ul:is(li:last-child.open > ul) {
    margin-block-end: 0 !important;
  }
  .header-nav .menu ul:has(> li:last-child.open) {
    padding-block-end: 0 !important;
  }
  .header-nav .menu > li > ul ul {
    background-color: rgba(0, 0, 0, 0.05);
  }
}
@media only screen and (max-width: 47.9375rem) {
  .header-nav .menu {
    max-inline-size: 100%;
  }
  .header-nav .menu li > a {
    text-align: center;
    justify-content: center;
  }
  .header-nav .menu li:is(.menu-item-has-children) > a::after {
    margin-right: -1.7ch;
  }
}
.doc-header-not-sticky .header-can-overlap .header-nav .menu {
  /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices. NOTE: You can modify where overlay styles can appear by modifying the functions body header classes  */
}
@media only screen and (max-width: 74.9375rem) {
  :not(.doc-header-menu-open).doc-header-not-sticky .header-can-overlap .header-nav .menu {
    /* Touch Devices Header Styles Start */
  }
}
.doc-header-not-sticky .header-nav .menu {
  /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */
}
.doc-header-menu-open .header-nav .menu {
  /* Styles/Selectors for when header menu accordion for touch devices is open */
}
.doc-header-menu-open.doc-header-not-sticky .header-nav .menu {
  /* Styles/Selectors for when header menu accordion for touch devices is open and header is not sticky yet */
}
/* Header Form
--------------------------------------------------------------- */
#header-form {
  grid-area: form;
}
#header-form .field-form {
  gap: 2rem;
}
#header-form .gform_description {
  max-inline-size: 80ch;
}
#header-form .gform_body {
  margin-inline: auto;
}
#header-form .gform_footer {
  justify-content: center;
  text-align: center;
}
#header-form .gfield.gfield--type-submit {
  /* dont stretch flex button */
  align-self: flex-start;
}
@media only screen and (max-width: 74.9375rem) {
  #header-form .gform_fields .gfield:not(.gfield-inline-size-full) {
    /* fix gravity forms from deciding to undo the grid columns on mobile instead of tablet now */
    grid-column: 1/-1;
  }
}
/* Oklahoma Heat, Air & Refrigeration navigation
--------------------------------------------------------------- */
:root {
  --layout-header-height: 7.8125rem;
  --layout-header-height-before-sticky: var(--layout-header-height);
  --layout-header-logo-height: 4.375rem;
  --layout-header-overlap: 20px;
}
@media only screen and (min-width: 48rem) {
  :root {
    --layout-header-height: 5.625rem;
    --layout-header-overlap: 30px;
  }
}
@media only screen and (min-width: 75rem) {
  :root {
    --layout-header-height: 7.8125rem;
    --layout-header-logo-height: 5.3125rem;
    --layout-header-overlap: 25px;
  }
}
@media only screen and (min-width: 87.5rem) {
  :root {
    --layout-header-logo-height: 6rem;
    --layout-header-overlap: 28px;
  }
}

.doc-header-not-sticky .header-can-overlap {
  --layout-header-offset: 0rem;
  --layout-header-logo-height: 4.375rem;
}
@media only screen and (min-width: 75rem) {
  .doc-header-not-sticky .header-can-overlap {
    --layout-header-logo-height: 6.0281rem;
  }
}

.layout-header-container {
  --container-gutter: 0px;
  inline-size: 100%;
  max-inline-size: none;
  padding-inline: 0;
}

.has-banner .layout-header {
  margin-block-end: calc(var(--layout-header-overlap) * -1);
}

.header-can-overlap:has(.has-layout-header-offset) .layout-header {
  position: sticky;
}

.header-can-overlap .has-layout-header-offset::before {
  content: none !important;
}

.header-blocks {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.125rem;
  grid-template-rows: 5.3125rem 2.5rem;
  grid-template-areas: "logo toggle-menu" "info info";
  align-items: center;
  column-gap: 0;
  row-gap: 0;
  inline-size: 100%;
  block-size: var(--layout-header-height);
  padding-inline: 1.3125rem;
  background-color: var(--color-navy-100);
  border-radius: 0 0 30px 30px;
}

.header-logo {
  grid-area: logo;
  position: absolute;
  inset-block-start: 0.25rem;
  inset-inline-start: 0;
  align-self: start;
  justify-self: start;
  inline-size: 12.338rem;
  block-size: 4.375rem;
  margin: 0;
  padding: 0;
  background: transparent;
}
.header-logo .logo-wrapper,
.header-logo .logo-picture,
.header-logo .logo-image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.header-logo .logo-image {
  object-fit: contain;
}

.header-info {
  grid-area: info;
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 2.5625rem;
  background: var(--color-navy-200);
  margin-inline: -20px;
  border-radius: 0 0 30px 30px;
}

.header-cta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  padding: 0;
  text-align: center;
}

.header-cta-text {
  font-family: var(--font-accent);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-red-100);
  white-space: nowrap;
}
.header-cta-text > span:nth-child(n+2)::before {
  content: none;
}
.header-cta-text-default {
  display: none;
}

.header-numbers {
  display: flex;
  gap: 0;
}
.header-numbers .header-number:nth-child(n+2) {
  display: none;
}

.header-cta .number-link {
  font-family: var(--font-secondary);
  font-size: 1.5625rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-white);
  white-space: nowrap;
}

.header-actions {
  display: none;
}

.header-toggle-menu {
  --layout-header-menu-toggle-open-offset: 0rem;
  position: absolute;
  inset-block-start: 1.5rem;
  inset-inline-end: 0;
  align-self: center;
  justify-self: end;
  inline-size: 3.125rem;
  block-size: 1.875rem;
  padding: 0;
  background: transparent;
  color: var(--color-white);
}
.header-toggle-menu-icon {
  --fancy-icon-menu-width: 3.125rem;
  --fancy-icon-menu-height: 1.875rem;
  --fancy-icon-menu-bar-height: 4px;
}
.header-toggle-menu-label {
  display: none;
}

.header-block.header-toggle-menu {
  inset-block-start: 1.5rem;
  align-self: center;
}

.header-nav {
  --layout-header-menu-touch-offset: var(--layout-header-height);
  background: rgba(0, 17, 38, 0.98);
  color: var(--color-white);
}

@media only screen and (min-width: 48rem) {
  .header-logo {
    inset-block-start: 0.375rem;
  }
  .header-blocks {
    grid-template-columns: 12.338rem minmax(0, 1fr) auto 3.125rem;
    grid-template-rows: 1fr;
    grid-template-areas: "logo . info toggle-menu";
    column-gap: 2rem;
    padding-inline: 1.3125rem;
  }
  .header-info {
    grid-area: info;
    position: static;
    justify-self: end;
    inline-size: auto;
    block-size: 3.3125rem;
    background: transparent;
    border-radius: 0;
    margin-inline: 0;
  }
  .header-cta {
    inline-size: 12.875rem;
    block-size: 3.3125rem;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
    text-align: right;
  }
  .header-cta-text-short {
    display: none;
  }
  .header-cta-text-default {
    display: inline;
  }
  .header-cta .number-link {
    font-size: 2.1875rem;
    letter-spacing: 0.02em;
  }
  .header-block.header-toggle-menu {
    inset-block-start: 1.625rem;
  }
}
@media only screen and (min-width: 75rem) {
  .header-blocks {
    grid-template-columns: 17rem minmax(0, 1fr);
    grid-template-rows: 3.3125rem 1.0625rem;
    grid-template-areas: "logo info" "logo nav";
    column-gap: 1.625rem;
    row-gap: 0.9375rem;
    align-content: center;
    padding-block: 1rem;
    padding-inline: 1.3125rem;
  }
  .header-logo {
    position: relative;
    inset: auto;
    align-self: center;
    inline-size: auto;
    block-size: 6.0281rem;
  }
  .header-info {
    justify-self: end;
    display: flex;
    align-items: flex-start;
    gap: 0.9375rem;
  }
  .header-cta {
    inline-size: 13.25rem;
  }
  .header-cta .number-link {
    font-size: 2.25rem;
    line-height: 0.9167;
  }
  .header-actions {
    display: flex;
    gap: 0.9375rem;
  }
  .header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    block-size: 3.3125rem;
    border-radius: 3px;
    font-family: var(--font-accent);
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: filter 0.2s ease-in-out;
  }
  .header-action:hover, .header-action:focus-visible {
    filter: brightness(1.1);
  }
  .header-action-financing {
    inline-size: 12.25rem;
    gap: 0.5rem;
    padding-inline: 0.9375rem 1.125rem;
    background: var(--color-white);
    color: var(--color-blue-400);
  }
  .header-action-financing::before {
    content: url('data:image/svg+xml,<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Group 2"><path id="Star 1" d="M13 0L15.1623 2.82726L18.2876 1.12391L19.113 4.58622L22.6609 4.3013L22.0067 7.8L25.3637 8.98278L23.343 11.9129L25.9288 14.3589L22.891 16.2138L24.2583 19.5L20.7287 19.959L20.6412 23.5172L17.2301 22.5009L15.7029 25.7159L13 23.4L10.2971 25.7159L8.76994 22.5009L5.35879 23.5172L5.27129 19.959L1.74167 19.5L3.10901 16.2138L0.0712156 14.3589L2.65697 11.9129L0.636266 8.98278L3.99334 7.8L3.33912 4.3013L6.88703 4.58622L7.71242 1.12391L10.8377 2.82726L13 0Z" fill="%2329AAE2"/><path id="Vector" d="M12.9997 5.54167C13.2245 5.54167 13.4405 5.63126 13.5993 5.7907C13.758 5.95005 13.8473 6.16614 13.8474 6.39128V7.71648H15.1667C15.7746 7.71648 16.358 7.95892 16.7878 8.3903C17.2173 8.82157 17.4586 9.40664 17.4587 10.0163C17.4587 10.2416 17.3695 10.4584 17.2106 10.6178C17.0518 10.7773 16.8359 10.8669 16.611 10.8669C16.3862 10.8668 16.1702 10.7773 16.0114 10.6178C15.8526 10.4584 15.7643 10.2415 15.7643 10.0163C15.7642 9.85714 15.7005 9.70485 15.5886 9.59245C15.4765 9.48 15.3249 9.41667 15.1667 9.41667H11.5554C11.2057 9.41673 10.8702 9.55605 10.6227 9.80437C10.3752 10.0528 10.236 10.3903 10.236 10.7419C10.2361 11.0933 10.3754 11.43 10.6227 11.6784C10.8702 11.9268 11.2057 12.067 11.5554 12.0671H14.444C15.2435 12.0671 16.0107 12.3855 16.5759 12.9528C17.141 13.5201 17.4586 14.2894 17.4587 15.0915C17.4587 15.8935 17.1409 16.6628 16.5759 17.2301C16.0107 17.7975 15.2435 18.1169 14.444 18.1169H13.8474V19.4421C13.8473 19.6672 13.758 19.8833 13.5993 20.0426C13.4405 20.2021 13.2245 20.2917 12.9997 20.2917C12.7751 20.2916 12.5598 20.2019 12.4011 20.0426C12.2423 19.8833 12.1531 19.6672 12.153 19.4421V18.1169H10.8337C10.2258 18.1169 9.64232 17.8744 9.21259 17.443C8.78296 17.0118 8.54179 16.4268 8.54169 15.8171C8.54169 15.5918 8.63091 15.3749 8.78974 15.2155C8.94857 15.0562 9.16458 14.9665 9.38935 14.9665C9.61393 14.9666 9.82926 15.0563 9.98798 15.2155C10.1468 15.3749 10.236 15.5918 10.236 15.8171C10.2361 15.9761 10.2991 16.1285 10.4108 16.2409C10.5229 16.3534 10.6754 16.4167 10.8337 16.4167H14.444C14.7938 16.4167 15.1301 16.2774 15.3776 16.029C15.6251 15.7805 15.7643 15.443 15.7643 15.0915C15.7643 14.7401 15.6249 14.4033 15.3776 14.155C15.1301 13.9065 14.7938 13.7663 14.444 13.7663H11.5554C10.756 13.7662 9.98961 13.4478 9.4245 12.8805C8.85939 12.3133 8.54174 11.5439 8.54169 10.7419C8.54169 9.93977 8.85938 9.17052 9.4245 8.6032C9.98963 8.0359 10.756 7.71653 11.5554 7.71648H12.153V6.39128C12.1531 6.16614 12.2423 5.95005 12.4011 5.7907C12.5598 5.63144 12.7751 5.54176 12.9997 5.54167Z" fill="%23F5F5F5" stroke="%23F5F5F5" stroke-width="0.25"/></g></svg>');
    flex: 0 0 auto;
    inline-size: 1.625rem;
    block-size: 1.625rem;
  }
  .header-action-financing:is(:hover, :focus) {
    color: var(--color-white);
    background: var(--color-blue-300);
  }
  .header-action-financing:is(:hover, :focus)::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none"><path d="M13 0L15.1623 2.82726L18.2876 1.12391L19.113 4.58622L22.6609 4.3013L22.0067 7.8L25.3637 8.98278L23.343 11.9129L25.9288 14.3589L22.891 16.2138L24.2583 19.5L20.7287 19.959L20.6412 23.5172L17.2301 22.5009L15.7029 25.7159L13 23.4L10.2971 25.7159L8.76994 22.5009L5.35879 23.5172L5.27129 19.959L1.74167 19.5L3.10901 16.2138L0.0712156 14.3589L2.65697 11.9129L0.636266 8.98278L3.99334 7.8L3.33912 4.3013L6.88703 4.58622L7.71242 1.12391L10.8377 2.82726L13 0Z" fill="%23F5F5F5"/><path d="M12.9995 5.54175C13.2243 5.54175 13.4403 5.63133 13.5991 5.79077C13.7579 5.95012 13.8471 6.16622 13.8472 6.39136V7.71655H15.1665C15.7744 7.71655 16.3579 7.95899 16.7876 8.39038C17.2171 8.82165 17.4584 9.40672 17.4585 10.0164C17.4585 10.2416 17.3693 10.4585 17.2104 10.6179C17.0516 10.7774 16.8357 10.8669 16.6108 10.8669C16.386 10.8669 16.1701 10.7774 16.0112 10.6179C15.8525 10.4585 15.7642 10.2416 15.7642 10.0164C15.7641 9.85721 15.7003 9.70492 15.5884 9.59253C15.4763 9.48007 15.3247 9.41675 15.1665 9.41675H11.5552C11.2055 9.41681 10.87 9.55613 10.6226 9.80444C10.3751 10.0529 10.2358 10.3904 10.2358 10.7419C10.2359 11.0933 10.3752 11.4301 10.6226 11.6785C10.87 11.9268 11.2055 12.0671 11.5552 12.0671H14.4438C15.2433 12.0671 16.0105 12.3855 16.5757 12.9529C17.1408 13.5202 17.4584 14.2895 17.4585 15.0916C17.4585 15.8936 17.1407 16.6629 16.5757 17.2302C16.0105 17.7976 15.2433 18.1169 14.4438 18.1169H13.8472V19.4421C13.8471 19.6673 13.7579 19.8834 13.5991 20.0427C13.4403 20.2022 13.2243 20.2917 12.9995 20.2917C12.7749 20.2917 12.5596 20.202 12.4009 20.0427C12.2421 19.8834 12.1529 19.6673 12.1528 19.4421V18.1169H10.8335C10.2256 18.1169 9.64213 17.8745 9.2124 17.4431C8.78278 17.0118 8.54161 16.4268 8.5415 15.8171C8.5415 15.5919 8.63072 15.375 8.78955 15.2156C8.94838 15.0562 9.16439 14.9666 9.38916 14.9666C9.61374 14.9667 9.82907 15.0564 9.98779 15.2156C10.1466 15.375 10.2358 15.5919 10.2358 15.8171C10.2359 15.9761 10.2989 16.1286 10.4106 16.241C10.5227 16.3534 10.6753 16.4167 10.8335 16.4167H14.4438C14.7936 16.4167 15.13 16.2775 15.3774 16.0291C15.6249 15.7806 15.7642 15.4431 15.7642 15.0916C15.7641 14.7402 15.6247 14.4034 15.3774 14.155C15.13 13.9066 14.7936 13.7664 14.4438 13.7664H11.5552C10.7558 13.7663 9.98943 13.4478 9.42432 12.8806C8.8592 12.3133 8.54156 11.544 8.5415 10.7419C8.5415 9.93985 8.85919 9.1706 9.42432 8.60327C9.98944 8.03597 10.7558 7.71661 11.5552 7.71655H12.1528V6.39136C12.1529 6.16622 12.2421 5.95012 12.4009 5.79077C12.5596 5.63151 12.7749 5.54183 12.9995 5.54175Z" fill="%230658C5" stroke="%230658C5" stroke-width="0.25"/></svg>');
  }
  .header-action-schedule {
    inline-size: 15.1875rem;
    padding-inline: 1.125rem;
    background: var(--color-red-200);
    color: var(--color-white);
  }
  .header-action-schedule:is(:hover, :focus) {
    background: var(--color-blue-300);
  }
  .header-toggle-menu {
    display: none;
  }
  .header-nav {
    grid-area: nav;
    position: static;
    inset: auto;
    justify-self: end;
    display: flex;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    opacity: 1;
  }
  .header-nav .menu {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0.8125rem;
    inline-size: max-content;
    margin-inline-start: auto;
    font-family: var(--font-accent);
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .header-nav .menu > li {
    padding: 0;
  }
  .header-nav .menu > li::before {
    content: none;
  }
  .header-nav .menu > li > a {
    gap: 0.3125rem;
    padding: 0 0 2rem;
    border: 0;
    color: var(--color-white);
  }
  .header-nav .menu > li:is(.current-menu-item, .current-menu-ancestor) > a, .header-nav .menu > li:hover > a, .header-nav .menu > li:focus-within > a {
    color: var(--color-blue-200);
  }
  .header-nav .menu > li.menu-item-has-children > a::after {
    inline-size: 0.75rem;
    block-size: 0.375rem;
    border: 0;
    background: url("/wp-content/themes/1p21-boilerplate/images/icon-nav-chevron.svg") center/contain no-repeat;
    transform: none;
  }
  .header-nav .menu ul {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    inline-size: 20.625rem;
    padding: 1.25rem 1.25rem 1.625rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray);
    border-radius: 0 0 0.625rem 0.625rem;
    box-shadow: none;
    color: var(--color-blue-400);
    line-height: 1.2;
    white-space: normal;
  }
  .header-nav .menu ul li {
    flex-direction: column;
    padding: 0;
  }
  .header-nav .menu ul li > a {
    flex: 0 0 auto;
    inline-size: 100%;
    padding: 0 0 1.25rem;
    border-block-end: 1px solid var(--color-gray);
    color: var(--color-blue-400);
    line-height: 1.2;
  }
  .header-nav .menu ul li:last-child > a {
    padding-block-end: 0;
    border-block-end: 0;
  }
  .header-nav .menu ul li.menu-item-has-children > a::after {
    inline-size: 0.75rem;
    block-size: 0.375rem;
    border: 0;
    background: url("/wp-content/themes/1p21-boilerplate/images/icon-nav-chevron.svg") center/contain no-repeat;
    transform: none;
  }
  .header-nav .menu ul li.menu-item-has-children:is(:hover, :focus, :focus-within) > a {
    color: var(--color-blue-300);
  }
  .header-nav .menu > li > ul {
    inset-block-start: calc(100% - 3px);
    inset-inline-start: 0;
    margin-block-start: 0;
  }
  .header-nav .menu > li > ul > li > ul {
    inset-block-start: 0;
    inset-inline-start: calc(100% + 1.25rem);
    margin-block-start: 0;
    background: var(--color-white);
    color: var(--color-blue-400);
  }
}
@media only screen and (min-width: 87.5rem) {
  .header-blocks {
    column-gap: 6.6875rem;
  }
  .header-nav .menu {
    gap: 1.875rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .header-blocks {
    column-gap: 39.1875rem;
  }
  .header-nav .menu {
    font-size: 17px;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .header-blocks {
    padding-inline: 1.5625rem;
  }
  .header-logo {
    inset-block-start: 0.625rem;
  }
  .header-block.header-toggle-menu {
    inset-block-start: 1.875rem;
  }
  .header-toggle-menu.open .fancy-icon-menu span {
    margin: auto;
  }
  .header-toggle-menu.open .fancy-icon-menu span:is(:first-child, :last-child) {
    inline-size: 100%;
  }
  .header-toggle-menu.open .fancy-icon-menu span:is(:nth-child(2), :nth-child(3)) {
    inline-size: 100%;
    transform: none;
  }
  .header-nav {
    align-items: flex-start;
    justify-content: flex-start;
    overflow-inline: hidden;
    background: var(--color-white);
    box-shadow: none;
    color: var(--color-blue-400);
    z-index: -1;
  }
  .header-nav .menu {
    --layout-header-menu-touch-menu-padding-x: 0rem;
    align-self: flex-start;
    inline-size: calc(100% - 6.1875rem);
    max-inline-size: none;
    block-size: auto;
    margin-inline: 3.125rem 3.0625rem;
    padding-block: 2.1875rem 6rem;
    background: var(--color-white);
    box-shadow: none;
    color: var(--color-blue-400);
    font-family: var(--font-accent);
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.05em;
    text-align: start;
    text-transform: uppercase;
  }
  .header-nav .menu li {
    padding-inline: 0;
  }
  .header-nav .menu li > a {
    justify-content: flex-start;
    gap: 0.375rem;
    color: var(--color-blue-400);
  }
  .header-nav .menu li.menu-item-has-children > a::after {
    inline-size: 0.75rem;
    block-size: 0.375rem;
    margin: 0;
    border: 0;
    background: url("/wp-content/themes/1p21-boilerplate/images/icon-nav-chevron.svg") center/contain no-repeat;
    transform: none;
  }
  .header-nav .menu li:is(:hover, :focus-within, .open) > a {
    color: var(--color-blue-300);
  }
  .header-nav .menu > li > a {
    min-block-size: 2.375rem;
    padding: 0 0 1.25rem;
    margin-block-end: 1.25rem;
    border-block-end: 1px solid var(--color-gray);
  }
  .header-nav .menu > li.open > a {
    margin-block-end: 0;
    border-block-end: 0;
  }
  .header-nav .menu > li.menu-item-has-children.open > ul.sub-menu {
    margin-block-end: 1.25rem !important;
  }
  .header-nav .menu ul {
    inline-size: 100%;
    margin: 0;
    padding: 0;
    background: rgba(217, 217, 217, 0.2);
    border: 0;
    box-shadow: none;
    color: var(--color-blue-400);
  }
  .header-nav .menu ul li > a {
    min-block-size: 3.5625rem;
    padding: 1.25rem;
    border-block-end: 1px solid var(--color-gray);
  }
  .header-nav .menu ul li:last-child > a {
    border-block-end: 0;
  }
  .header-nav .menu ul ul {
    margin: 0;
    background: transparent;
  }
  .header-nav .menu ul ul li > a {
    padding-inline-start: 2.1875rem;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .header-blocks {
    padding-inline: 1.5625rem;
  }
  .header-logo {
    inset-block-start: 0.5rem;
  }
  .header-info {
    margin-inline: -1.5625rem;
  }
  .header-block.header-toggle-menu {
    inset-block-start: 1.75rem;
  }
  .header-nav .menu {
    inline-size: calc(100% - 3.0625rem);
    margin-inline: 1.5625rem 1.5rem;
    padding-block-start: 2rem;
    text-align: start;
  }
  .header-nav .menu li > a {
    text-align: start;
    justify-content: flex-start;
  }
  .header-nav .menu li.menu-item-has-children > a::after {
    margin-inline-end: 0;
  }
}
/* ================================================================================
* Banner
================================================================================ */
/* Layout Banner https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/layout/banner.md
--------------------------------------------------------------- */
/* Layout Banner Variables
--------------------------------------------------------------- */
/* In case banner is also as crazy as the header */
/* Tip: placing the css var on :root can allow elements outside of the layout header utilize the variable if needed ie sticky stuff, offsets, jump link scroll etc. */
:root {
  --layout-banner-offset: 6.25rem;
}
.banner-has-background-image {
  /* Styles specific for when banner supports background image */
}
.banner-no-background-image {
  /* Styles specific for when banner doesnt support background image */
}
/* Layout Banner Overlaps
	NOTE: Classes to use:
		.layout-banner-offset-element => the element within the layout that will have the negative margins to overlap itself
		.has-layout-banner-offset => the adjacent layouts/ child of adjacent layouts that will have the pseudo element to adjust itself if the `layout-banner-offset-element` is next to it
--------------------------------------------------------------- */
.banner-can-overlap:has(.has-layout-banner-offset) :is(.layout-banner.layout-banner-offset-element, .layout-banner .layout-banner-offset-element)::after {
  content: "";
  flex: 0 0 auto;
  grid-column: 1/-1;
  block-size: var(--layout-banner-offset, 0px);
  margin-block-end: min(var(--layout-banner-offset, 0px) - var(--overlap-buffer), 0);
  display: block;
  inline-size: 100%;
}
.banner-can-overlap .has-layout-banner-offset:not(:has(.layout-banner-offset-element)):is(:is(.layout-banner + *),
:is(.main, main, .aside, aside):first-child,
.layout-banner + :is(.main, main) > :is(section, .section):first-child,
.layout-banner + :is(.main, main) > :is(section, .section):first-child *) {
  isolation: isolate;
}
.banner-can-overlap:has(.has-layout-banner-offset) .layout-banner-offset-element:is(.layout-banner > :last-child,
.layout-banner > :last-child *,
.lauout-banner) {
  margin-block-end: calc((var(--layout-banner-offset, 0px) + var(--overlap-buffer)) * -1) !important;
}
.banner-can-overlap:has(.has-layout-banner-offset) .layout-banner:has(.layout-banner-offset-element) {
  padding-block-end: var(--overlap-buffer) !important;
}

/* Layout Banner Itself
--------------------------------------------------------------- */
@media only screen and (max-width: 47.9375rem) {
  .layout-banner {
    /* allow more space for mobile only because the design said so */
  }
  .layout-banner-container {
    --container-gutter: .75rem;
  }
}
.banner-has-background-image .layout-banner {
  /* Styles specific for when banner has background image */
}
.banner-no-background-image .layout-banner {
  /* Styles specific for when banner doesnt support background image */
}
/* Banner Background
--------------------------------------------------------------- */
.banner-background {
  --responsive-background-overlay-mix-blend: multiply;
  --responsive-background-overlay-background: rgba(0, 0, 0, 0.5);
  --responsive-background-overlay-opacity: 0.75;
  --responsive-background-bg-position: center top;
}
@media only screen and (min-width: 48rem) {
  .banner-background {
    --responsive-background-overlay-background:
    	/* example of gradient to contrast header further */
    	linear-gradient(
    		to bottom,
    		rgba(0, 0, 0, 0.8) 0,
    		transparent calc(var(--layout-header-height, 0) * 1.5)
    	),
    	/* example of gradient to keep contrats on text. TIP: calculating from the center of the viewport width retains the gradients alignment to the text like in the comps */
    		linear-gradient(
    			45deg,
    			var(--color-dark) calc(50vi - min(480px, 25%)),
    			transparent calc(50vi + min(480px, 25%))
    		);
  }
}
.banner-has-background-image .banner-background {
  --responsive-background-overlay-mix-blend: multiply;
  --responsive-background-overlay-background: rgba(0, 27, 59, 0.6);
  --responsive-background-overlay-opacity: 1;
  --responsive-background-bg-position: center center;
  inset-block-end: 0.1875rem;
}
@media only screen and (min-width: 48rem) {
  .banner-has-background-image .banner-background {
    inset-block-end: 0.375rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .banner-has-background-image .banner-background {
    --responsive-background-bg-position: center 55%;
  }
}

/* Banner Main
--------------------------------------------------------------- */
.banner-main {
  padding-block: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.banner-main-blocks {
  justify-items: center;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}
.banner-main-block:only-child {
  flex: 1 1;
  grid-column: 1/-1;
  grid-row: 1/-1;
  justify-self: stretch;
}
@media only screen and (min-width: 75rem) {
  .banner-main {
    padding-block: 5rem 4rem;
  }
  .banner-main-blocks {
    grid-template-columns: 1fr auto;
  }
}
.banner-has-background-image .banner-main {
  /* Styles specific for when banner has background image */
}
.banner-has-background-image .banner-main {
  min-block-size: 16.125rem;
  padding-block: 55px 45px;
  padding-inline: 0;
  justify-content: flex-start;
}
.banner-has-background-image .banner-main:is(.content-palette-dark) {
  background-color: var(--scheme-bg, var(--color-dark-alt));
  color: var(--scheme-fg, var(--color-light));
}
.banner-has-background-image .banner-main::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 0.375rem;
  background: linear-gradient(90deg, var(--color-blue-200), var(--color-red-200));
  pointer-events: none;
}
.banner-has-background-image .banner-main-container {
  --container-gutter: 1.4375rem;
  inline-size: 100%;
  max-inline-size: none;
}
.banner-has-background-image .banner-main-blocks {
  gap: 0;
  inline-size: 100%;
}
@media only screen and (min-width: 48rem) {
  .banner-has-background-image .banner-main {
    min-block-size: 20.6875rem;
    padding-block: 6rem 5rem;
  }
  .banner-has-background-image .banner-main-container {
    --container-gutter: 3.125rem;
  }
}
@media only screen and (min-width: 75rem) {
  .banner-has-background-image .banner-main-container {
    --container-gutter: 4rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .banner-has-background-image .banner-main {
    padding-block: 6.0625rem 4.9375rem;
  }
}
.banner-h1-has-global-primary.banner-has-background-image .banner-main-blocks {
  inline-size: min(100%, 19.3125rem);
  margin-inline: auto;
  gap: 0;
}
@media only screen and (min-width: 48rem) {
  .banner-h1-has-global-primary.banner-has-background-image .banner-main-blocks {
    inline-size: min(100%, 35.5rem);
  }
}
.banner-has-background-image.header-can-overlap .banner-main {
  /* Styles specific for when banner has the header overlay before scroll + Styles specific for when banner has background image */
}
.banner-no-background-image .banner-main {
  /* Styles specific for when banner doesnt support background image OR global fallback heading*/
}
.banner-no-background-image .banner-main {
  padding-block: calc(3.75rem + var(--layout-header-overlap, 0px)) 3.75rem;
}
.banner-no-background-image .banner-main-container {
  inline-size: 100%;
}
.banner-no-background-image .banner-main-blocks {
  inline-size: 100%;
  gap: 0;
}
@media only screen and (min-width: 48rem) {
  .banner-no-background-image .banner-main {
    padding-block: calc(6rem + var(--layout-header-overlap, 0px)) 5rem;
  }
}
@media only screen and (min-width: 75rem) {
  .banner-no-background-image .banner-main {
    padding-block: calc(6.875rem + var(--layout-header-overlap, 0px)) 5.9375rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .banner-no-background-image .banner-main {
    padding-block: calc(7.5rem + var(--layout-header-overlap, 0px)) 6.875rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .banner-no-background-image .banner-main {
    padding-block: calc(8.125rem + var(--layout-header-overlap, 0px)) 7.8125rem;
  }
}
.banner-h1-has-global-primary.banner-has-background-image .banner-main {
  min-block-size: 25.375rem;
  padding-block: 3.625rem 1.6875rem;
}
@media only screen and (min-width: 48rem) {
  .banner-h1-has-global-primary.banner-has-background-image .banner-main {
    min-block-size: 20.6875rem;
    padding-block: 3.4375rem 3rem;
  }
}
@media only screen and (min-width: 75rem) {
  .banner-h1-has-global-primary.banner-has-background-image .banner-main {
    padding-block-start: 3.375rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .banner-h1-has-global-primary.banner-has-background-image .banner-main {
    padding-block-start: 3.4375rem;
    padding-block-end: 2.6875rem;
  }
}

/* Page title displayed as the semantic h1 in the alternate internal banner. */
.banner-h1 {
  display: block;
  inline-size: 100%;
  max-inline-size: 34.6875rem;
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  line-height: 1.3;
  font-family: var(--font-primary);
  color: var(--color-blue-100);
  letter-spacing: 0em;
  text-transform: none;
  font-weight: 700;
  text-align: center;
  text-wrap: balance;
}
.banner-h1::before, .banner-h1::after,
.banner-h1 > span::before,
.banner-h1 > span::after {
  content: none;
}
@media only screen and (min-width: 48rem) {
  .banner-h1 {
    margin-block-end: 0.625rem;
  }
}

.banner-h1-has-global-primary.banner-has-background-image .layout-banner {
  margin-block-start: 0.4375rem;
}
@media only screen and (min-width: 75rem) {
  .banner-h1-has-global-primary.banner-has-background-image .layout-banner {
    margin-block-start: 0.25rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .banner-h1-has-global-primary.banner-has-background-image .layout-banner {
    margin-block-start: 0.375rem;
  }
}
.banner-h1-has-global-primary.banner-has-background-image .layout-banner .banner-body-blocks {
  inline-size: 100%;
  gap: 0;
}
.banner-h1-has-global-primary.banner-has-background-image .layout-banner .primary-heading {
  margin-block-end: 0.125rem;
}
.banner-h1-has-global-primary.banner-has-background-image .layout-banner .banner-content {
  max-inline-size: 34.6875rem;
  margin-block-end: 0.625rem;
  font-size: 1rem;
  line-height: 1.4;
  font-family: var(--font-primary);
  color: var(--color-white);
  font-weight: 400;
  text-align: center;
  text-wrap: balance;
}
@media only screen and (min-width: 87.5rem) {
  .banner-h1-has-global-primary.banner-has-background-image .layout-banner .banner-content {
    margin-block-end: 0.9375rem;
  }
}

/* Banner Body
--------------------------------------------------------------- */
.banner-body, .banner-body-blocks {
  align-items: inherit;
  justify-content: inherit;
  justify-items: inherit;
}
.banner-body-block, .banner-body-blocks {
  min-inline-size: 0;
  max-inline-size: 100%;
}
.banner-body-blocks {
  gap: 2.125rem;
}
.banner-has-background-image .banner-body {
  /* Styles specific for when banner has background image customized */
}
.banner-has-background-image .banner-body {
  inline-size: 100%;
}
.banner-has-background-image .banner-body-blocks {
  inline-size: min(100%, 19.5625rem);
  margin-inline: auto;
  gap: 1.0625rem;
  align-items: center;
  justify-items: center;
}
@media only screen and (min-width: 48rem) {
  .banner-has-background-image .banner-body-blocks {
    inline-size: min(100%, 41.75rem);
  }
}
.banner-no-background-image .banner-body {
  /* Styles specific for when banner doesnt support background image */
}
.banner-no-background-image .banner-body {
  inline-size: 100%;
}
.banner-no-background-image .banner-body-blocks {
  inline-size: 100%;
  gap: 0.8125rem;
  align-items: center;
  justify-items: center;
}
/* Global Banner Text
--------------------------------------------------------------- */
.banner-has-background-image .banner-text {
  /* Styles specific for when banner has background image */
}
.banner-no-background-image .banner-text {
  /* Styles specific for when banner doesnt support background image */
}
/* Global Secondary Heading
--------------------------------------------------------------- */
.secondary-heading {
  font-size: 1rem;
}
.secondary-heading em {
  /* emphasized words */
  color: var(--scheme-sp, var(--color-accent));
  letter-spacing: 0em;
  font-style: normal;
}
.secondary-heading::before,
.secondary-heading > span::before {
  color: var(--scheme-sb, var(--color-primary));
  font-style: normal;
}
@media only screen and (min-width: 48rem) {
  .secondary-heading > span {
    display: inline-block;
  }
  .secondary-heading > span:nth-child(n+2)::before {
    content: "\25CF\FE0E";
    margin-inline: 0.5em;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .secondary-heading > span {
    display: inline-block;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .secondary-heading {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
  }
  .secondary-heading::before {
    content: "\25CF\FE0E" "\25CF\FE0E" "\25CF\FE0E";
    display: block;
  }
}
.banner-has-background-image .secondary-heading {
  /* Styles specific for when banner has background image */
  display: block;
  inline-size: 100%;
  max-inline-size: 19.5625rem;
  margin: 0;
  font-size: 2.1875rem;
  line-height: 0.85;
  font-family: var(--font-secondary);
  color: var(--color-white);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  text-wrap: balance;
}
.banner-has-background-image .secondary-heading::before, .banner-has-background-image .secondary-heading::after,
.banner-has-background-image .secondary-heading > span::before,
.banner-has-background-image .secondary-heading > span::after {
  content: none;
}
.banner-has-background-image .secondary-heading > span {
  display: block;
}
@media only screen and (min-width: 48rem) {
  .banner-has-background-image .secondary-heading {
    max-inline-size: 35.5rem;
    font-size: 3.125rem;
  }
}
.banner-no-background-image .secondary-heading {
  /* Styles specific for when banner doesnt support background image */
}
.secondary-heading.secondary-heading-default {
  /* Styles specific for default template primary heading (Single Post, Single Page, Possibly Blog/ Archive etc.) */
}
.secondary-heading.secondary-heading-blog {
  /* Styles specific for blog post/ blog archive custom primary heading (Blog/ Archive) and blog post titles*/
}
.secondary-heading.secondary-heading-blog-posts {
  /* Styles specific for blog post/ blog archive custom primary heading (Blog/ Archive) */
}
.secondary-heading.secondary-heading-blog-post {
  /* Styles specific for the blog post title*/
}
/* Global Primary Heading
--------------------------------------------------------------- */
/* Note: default styles are set to custom internal templates w/ no banner background images  (Case Results, Testimonials, etc.) to reduce repetitive styles and or lengthy selectors */
.primary-heading {
  /* Global Styles / custom page template heading styles (Testimonials Grid, Attorney Grid, etc.) */
  font-size: 3rem;
  line-height: calc(1em + 5px);
  text-wrap: balance;
  margin-block-end: 0;
}
.primary-heading em {
  /* emphasized words */
  color: var(--scheme-sp, var(--color-accent));
  font-style: normal;
}
@media only screen and (min-width: 48rem) {
  .primary-heading {
    font-size: 4rem;
  }
}
@media only screen and (min-width: 75rem) {
  .primary-heading {
    font-size: 5rem;
  }
}
.primary-heading.primary-heading-default {
  /* Styles specific for default template primary heading (Single Post, Single Page, Possibly Blog/ Archive etc.) */
  font-size: 2rem;
  margin-block: 0 0.2em;
}
@media only screen and (min-width: 48rem) {
  .primary-heading.primary-heading-default {
    font-size: 3rem;
  }
}
@media only screen and (min-width: 75rem) {
  .primary-heading.primary-heading-default {
    font-size: 4rem;
  }
}
.primary-heading.primary-heading-default-h1 {
  /* Styles specific for default template primary heading set as an h1 (Single Post, Single Page) */
}
.primary-heading.primary-heading-blog {
  /* Styles specific for blog post/ blog archive custom primary heading (Blog/ Archive) and blog post titles*/
}
.primary-heading.primary-heading-blog-posts {
  /* Styles specific for blog post/ blog archive custom primary heading (Blog/ Archive) */
}
.primary-heading.primary-heading-blog-post {
  /* Styles specific for the blog post title*/
}
.layout-banner .primary-heading {
  /* Styles specific for when it's inside a banner */
}
.primary-heading.h1-fallback-heading {
  /* Styles specific for when banner does not exist/ rendered as a helper class for the fallback h1 */
}
.primary-heading.h1-fallback-heading:where(.section-heading) {
  text-align: center;
}
.banner-has-background-image .layout-banner .primary-heading {
  color: inherit;
}
.banner-has-background-image .primary-heading {
  /* Styles specific for when banner has background image */
  display: block;
  inline-size: 100%;
  max-inline-size: 19.5625rem;
  margin: 0;
  font-size: 2.1875rem;
  line-height: 0.85;
  font-family: var(--font-secondary);
  color: var(--color-white);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  text-wrap: balance;
}
.banner-has-background-image .primary-heading::before, .banner-has-background-image .primary-heading::after,
.banner-has-background-image .primary-heading > span::before,
.banner-has-background-image .primary-heading > span::after {
  content: none;
}
.banner-has-background-image .primary-heading > span {
  display: block;
}
@media only screen and (min-width: 48rem) {
  .banner-has-background-image .primary-heading {
    max-inline-size: 35.5rem;
    font-size: 3.125rem;
  }
}
.banner-no-background-image .layout-banner .primary-heading {
  /* Styles specific for when banner doesnt support background image */
  display: block;
  inline-size: 100%;
  max-inline-size: 57.375rem;
  margin: 0;
  font-size: 2.625rem;
  line-height: 0.85;
  font-family: var(--font-secondary);
  color: var(--color-blue-400);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  text-wrap: balance;
}
.banner-no-background-image .layout-banner .primary-heading::before, .banner-no-background-image .layout-banner .primary-heading::after,
.banner-no-background-image .layout-banner .primary-heading > span::before,
.banner-no-background-image .layout-banner .primary-heading > span::after {
  content: none;
}
@media only screen and (min-width: 48rem) {
  .banner-no-background-image .layout-banner .primary-heading {
    font-size: 3.75rem;
  }
}
@media only screen and (min-width: 75rem) {
  .banner-no-background-image .layout-banner .primary-heading {
    font-size: 4.375rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .banner-no-background-image .layout-banner .primary-heading {
    font-size: 5rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .banner-no-background-image .layout-banner .primary-heading {
    font-size: 5.3125rem;
  }
}
/* Banner Awards (Optional depending on comps)
--------------------------------------------------------------- */
.banner-awards {
  grid-column: 1/-1;
  flex: 0 0 auto;
  order: 99;
}
.banner-has-background-image .banner-awards {
  /* Styles specific for when banner has background image */
}
.banner-no-background-image .banner-awards {
  /* Styles specific for when banner doesnt support background image */
}
/* Banner video (Optional depending on comps)
--------------------------------------------------------------- */
.banner-video .video-thumbnail {
  inline-size: 18.75rem;
}
.banner-video-cta.video-button:not(.video-button-default-has-text) {
  display: block;
}
@media only screen and (min-width: 75rem) {
  .banner-video {
    order: 99;
  }
}
.banner-has-background-image .banner-video {
  /* Styles specific for when banner has background image */
}
.banner-no-background-image .banner-video {
  /* Styles specific for when banner doesnt support background image */
}
/* Banner Content (Optional depending on comps)
--------------------------------------------------------------- */
.banner-content {
  text-wrap: balance;
  max-inline-size: 90ch;
}
.banner-has-background-image .banner-content {
  /* Styles specific for when banner has background image */
}
.banner-no-background-image .banner-content {
  /* Styles specific for when banner doesnt support background image */
}
/* Banner Buttons
--------------------------------------------------------------- */
.banner-buttons {
  display: inline-flex;
  gap: 1rem;
  align-items: center;
  text-align: inherit;
  justify-content: inherit;
}
.banner-has-background-image .banner-buttons {
  gap: 0;
  justify-content: center;
}
.banner-no-background-image .layout-banner .banner-buttons {
  justify-content: center;
}
.banner-buttons-touch {
  margin-block-start: 3.25rem;
  margin-block-end: 4rem;
}
.banner-buttons-touch:first-child {
  margin-block-start: -1rem;
}
@media only screen and (min-width: 48rem) {
  .banner-button-shift .banner-buttons-touch, .banner-has-h1.banner-button-shift .banner-buttons-touch + hr {
    /* hide buttons outside of banner */
    display: none;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .banner-buttons, .banner-buttons-touch {
    flex-direction: column;
  }
  .banner-buttons-touch {
    inline-size: 100%;
    align-items: stretch;
  }
  .h1-fallback-heading:has(+ .banner-buttons-touch) {
    margin-block-end: 0;
  }
  .banner-button-shift :is(.layout-banner .banner-buttons, .banner-buttons-nontouch) {
    /* hide buttons inside of banner */
    display: none;
  }
}

/* Banner Form
--------------------------------------------------------------- */
#banner-form .field-form {
  gap: 2rem;
}
#banner-form .gform_description {
  max-inline-size: 80ch;
}
#banner-form .gform_body {
  margin-inline: auto;
}
#banner-form .gform_footer {
  justify-content: center;
  text-align: center;
}
#banner-form .gfield.gfield--type-submit {
  /* dont stretch flex button */
  align-self: flex-start;
}
@media only screen and (max-width: 74.9375rem) {
  #banner-form .gform_fields .gfield:not(.gfield-width-full) {
    /* fix gravity forms from deciding to undo the grid columns on mobile instead of tablet now */
    grid-column: 1/-1;
  }
}
@media only screen and (max-width: 47.9375rem) {
  #banner-form .field-form-body {
    position: relative;
    padding-block-end: 2rem;
  }
  #banner-form .gfield.required-message {
    position: absolute;
    inset-inline: 0;
    text-align: center;
    top: 100%;
  }
}

/* Banner Company info
--------------------------------------------------------------- */
.banner-com-info {
  padding-block: 2rem;
  background: var(--color-light-alt);
}
.banner-com-info-header {
  text-align: center;
  margin-block-end: 2rem;
}
/* ================================================================================
* Sidebar
================================================================================ */
/* Layout Sidebar https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/layout/sidebar.md
--------------------------------------------------------------- */
/* Layout Sidebar Variables
--------------------------------------------------------------- */
/* In case banner is also as crazy as the header */
/* Tip: placing the css var on :root can allow elements outside of the layout header utilize the variable if needed ie sticky stuff, offsets, jump link scroll etc. */
@media only screen and (min-width: 75rem) {
  :root {
    --layout-sidebar-offset: 3.125rem;
  }
}
/* Layout sidebar Overlaps
	NOTE: Classes to use:
		.layout-sidebar-offset-element => the element within the layout that will have the negative margins to overlap itself
		.has-layout-sidebar-offset => the adjacent layouts/ child of adjacent layouts that will have the pseudo element to adjust itself if the `layout-sidebar-offset-element` is next to it
--------------------------------------------------------------- */
@media only screen and (min-width: 75rem) {
  .sidebar-can-overlap .has-layout-sidebar-offset:not(:has(.has-layout-sidebar-offset)):last-child:is(.template-wrapper > *:has(+ * .layout-sidebar-offset-element),
  .template-wrapper > *:has(+ * .layout-sidebar-offset-element) *)::after {
    content: "";
    flex: 0 0 auto;
    block-size: var(--layout-sidebar-offset, 0px);
    display: block;
    inline-size: 100%;
  }
  .sidebar-can-overlap:has(.has-layout-sidebar-offset) .layout-sidebar-offset-element {
    margin-block-start: calc((var(--layout-sidebar-offset, 0px) + var(--overlap-buffer)) * -1) !important;
  }
  .sidebar-can-overlap:has(.has-layout-sidebar-offset) :is(.aside, aside):has(.layout-sidebar-offset-element) {
    padding-block-start: var(--overlap-buffer) !important;
  }
}
/* Layout Sidebar
--------------------------------------------------------------- */
.layout-sidebar {
  gap: 2.8125rem;
}
.layout-sidebar > .widget:not(#sidebar-form):not(.sidebar-com-info) {
  --widget-padding-x: 0rem;
  --widget-padding-top: 0rem;
  --widget-padding-bottom: 0rem;
  --widget-dropdown-padding-top: 0rem;
  --widget-dropdown-padding-bottom: 0rem;
  --widget-dropdown-margin-top: 0rem;
  --widget-dropdown-margin-bottom: 0rem;
  --widget-item-border-width: 0px;
  --widget-item-padding-x: 0rem;
  --widget-item-padding-y: 0rem;
  --widget-dropdown-margin-x: 0rem;
  --widget-dropdown-padding-x: 0rem;
  --widget-dropdown-offset: 1.25rem;
  --widget-dropdown-item-offset: 0rem;
  --widget-title-padding-x: 0rem;
  --widget-content-margin-top: 1.25rem;
  --widget-content-padding-top: 0rem;
  --widget-content-padding-bottom: 0rem;
  --widget-item-line-height: 1;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.layout-sidebar > .widget:not(#sidebar-form):not(.sidebar-com-info) > .widget-title {
  font-size: 2.1875rem;
  line-height: 0.9;
  font-family: var(--font-secondary);
  color: var(--color-blue-400);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: left;
}
.layout-sidebar > .widget:not(#sidebar-form):not(.sidebar-com-info) > .widget-title.fancy-border {
  --fancy-border-width: 100%;
  --fancy-border-height: 4px;
  --fancy-border-margin-y: .375rem;
  --fancy-border-margin-l: 0;
  --fancy-border-margin-r: 0;
  --fancy-border-background: var(--color-blue-200);
}
.layout-sidebar > .widget:not(#sidebar-form):not(.sidebar-com-info) > .widget-title.fancy-border::after {
  background-image: linear-gradient(90deg, var(--color-blue-200), var(--color-red-200)) !important;
}
.layout-sidebar > .widget:not(#sidebar-form):not(.sidebar-com-info) .widget-toggle::before,
.layout-sidebar > .widget:not(#sidebar-form):not(.sidebar-com-info) .open > .widget-toggle::before {
  transform: rotate(45deg);
}
.layout-sidebar > .widget:not(#sidebar-form):not(.sidebar-com-info) > .widget-title.widget-toggle::before {
  color: var(--color-red-200);
}
.layout-sidebar > .widget:not(#sidebar-form):not(.sidebar-com-info) :is(.menu, .sub-menu, .children, ul) {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-block: 0;
  padding-block: 0;
  border: 0;
  background: transparent;
}
.layout-sidebar > .widget:not(#sidebar-form):not(.sidebar-com-info) > :is(.menu, ul) {
  margin-block-start: var(--widget-content-margin-top);
}
.layout-sidebar > .widget:not(#sidebar-form):not(.sidebar-com-info) :is(.menu, ul) li {
  --sidebar-menu-depth-offset: 0rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border: 0;
  background: transparent;
}
.layout-sidebar > .widget:not(#sidebar-form):not(.sidebar-com-info) :is(.menu, ul) :is(.sub-menu, .children) > li {
  --sidebar-menu-depth-offset: 1.25rem;
}
.layout-sidebar > .widget:not(#sidebar-form):not(.sidebar-com-info) :is(.menu, ul) :is(.sub-menu, .children) :is(.sub-menu, .children) > li {
  --widget-dropdown-offset: .9375rem;
  --sidebar-menu-depth-offset: 2.1875rem;
}
.layout-sidebar > .widget:not(#sidebar-form):not(.sidebar-com-info) :is(.menu, ul) li > a {
  font-size: 1.0625rem;
  line-height: var(--widget-item-line-height);
  font-family: var(--font-accent);
  color: var(--color-blue-400);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 800;
  text-decoration: none;
  position: relative;
  padding-block: 0 1.3125rem;
  border: 0;
}
.layout-sidebar > .widget:not(#sidebar-form):not(.sidebar-com-info) :is(.menu, ul) li > a::after {
  content: "";
  position: absolute;
  inset-inline: calc(var(--sidebar-menu-depth-offset) * -1) 0;
  inset-block-end: 0;
  block-size: 1px;
  background: var(--color-gray);
}
.layout-sidebar > .widget:not(#sidebar-form):not(.sidebar-com-info) :is(.menu, ul) li > a.widget-toggle {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 0.375rem;
}
.layout-sidebar > .widget:not(#sidebar-form):not(.sidebar-com-info) :is(.menu, ul) li > a.widget-toggle::before {
  color: var(--color-blue-200);
}
.layout-sidebar > .widget:not(#sidebar-form):not(.sidebar-com-info) :is(.menu, ul) li.open > a.widget-toggle,
.layout-sidebar > .widget:not(#sidebar-form):not(.sidebar-com-info) :is(.menu, ul) li:is(:hover, :focus-within) > a {
  color: var(--color-blue-300);
}
.layout-sidebar > .widget:not(#sidebar-form):not(.sidebar-com-info) :is(.menu, ul) li.open > a.widget-toggle::before {
  color: var(--color-blue-300);
}
.layout-sidebar > .widget:not(#sidebar-form):not(.sidebar-com-info).widget_recent_entries li > a {
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: capitalize;
}
/* Sidebar Form
--------------------------------------------------------------- */
#sidebar-form {
  background: var(--scheme-bg, var(--color-dark-alt));
  color: var(--scheme-fg, var(--color-light));
  --widget-padding-top: 2rem;
  --widget-padding-bottom: calc(var(--widget-padding-top) + 2rem);
  --widget-content-margin-top: 0rem;
  --widget-content-margin-bottom: 0rem;
}
#sidebar-form .field-form-header {
  gap: 0.5rem;
}
#sidebar-form .gform_description {
  max-inline-size: 80ch;
}
#sidebar-form .gform_body {
  margin-inline: auto;
}
#sidebar-form .gform_footer {
  justify-content: center;
  text-align: center;
}
#sidebar-form .gfield.gfield--type-submit {
  /* dont stretch flex button */
  align-self: flex-start;
}
#sidebar-form .gfield.gfield--type-select .ginput_container::before {
  margin: 0;
}
#sidebar-form .field-form-body {
  position: relative;
  padding-block-end: 0.5rem;
}
#sidebar-form .gfield.newsletter-consent-field {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  grid-column: 1/-1;
  margin-block-start: 0;
  text-align: left;
}
#sidebar-form .sidebar-newsletter-choice {
  display: flex;
  gap: 0.4375rem;
  align-items: center;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  cursor: pointer;
}
#sidebar-form .sidebar-newsletter-choice input {
  appearance: none;
  display: grid;
  place-content: center;
  flex: 0 0 1rem;
  inline-size: 1rem;
  block-size: 0.9375rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-gray);
  border-radius: 3px;
  background: var(--color-white);
}
#sidebar-form .sidebar-newsletter-choice input::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 1px;
  background: var(--color-red-200);
  transform: scale(0);
  transition: transform 0.125s ease-in-out;
}
#sidebar-form .sidebar-newsletter-choice input:checked::before {
  transform: scale(1);
}
#sidebar-form .sidebar-newsletter-choice input:focus-visible {
  outline: 2px solid var(--color-blue-100);
  outline-offset: 2px;
}
#sidebar-form .sidebar-consent-copy {
  margin: 0;
  margin-block-start: 0.5rem;
  font-family: var(--font-primary);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
}
@media only screen and (min-width: 75rem) {
  #sidebar-form {
    --widget-padding-x: 1.6875rem;
    --widget-padding-top: 3.4375rem;
    --widget-padding-bottom: 2.875rem;
    border: 4px solid transparent;
    border-radius: 10px;
    background: linear-gradient(to bottom, var(--color-navy-100), var(--color-blue-300)) padding-box, linear-gradient(to top right, var(--color-blue-200), var(--color-red-200)) border-box;
    box-shadow: none;
  }
  #sidebar-form .field-form {
    gap: 2.1875rem;
  }
  #sidebar-form .field-form-header {
    gap: 0;
  }
  #sidebar-form .field-form-body {
    gap: 1.25rem;
    padding-block-end: 0;
  }
  #sidebar-form .gform_title {
    font-size: 2.625rem;
    line-height: 0.85;
    font-family: var(--font-secondary);
    color: var(--color-white);
    letter-spacing: 0em;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
  }
  #sidebar-form .gform_description {
    display: none;
  }
  #sidebar-form .gform_wrapper .gform_fields {
    row-gap: 1.25rem;
  }
  #sidebar-form .gfield {
    --field-border-width: 0px;
    --field-border-radius: 3px;
    --field-padding-x: 1.125rem;
    --field-padding-y: .90625rem;
    --field-required-color: var(--color-red-200);
    --field-line-height: 1;
    font-size: 1rem;
    line-height: 1;
  }
  #sidebar-form .gfield_label {
    font-size: 1rem;
    line-height: 1;
    margin-block-end: 0.4375rem;
    font-weight: 400;
  }
  #sidebar-form .gfield:is(.gfield--type-textarea, .gfield--type-multiselect) :is(textarea, select) {
    block-size: 4.25rem;
  }
  #sidebar-form .gfield--type-select .ginput_container::before {
    border-color: var(--color-blue-300);
  }
  #sidebar-form .gfield--type-consent {
    margin-block-start: 0.3125rem;
  }
  #sidebar-form .gfield--type-consent .ginput_container_consent {
    display: grid;
    grid-template-columns: 1rem 1fr;
    gap: 0.4375rem;
    align-items: start;
  }
  #sidebar-form .gfield--type-consent input[type=checkbox] {
    appearance: none;
    inline-size: 1rem;
    block-size: 0.9375rem;
    margin: 0;
    border: 1px solid var(--color-gray);
    border-radius: 3px;
    background: var(--color-white);
  }
  #sidebar-form .gfield--type-consent input[type=checkbox]:checked {
    background-color: var(--color-blue-300);
    box-shadow: inset 0 0 0 3px var(--color-white);
  }
  #sidebar-form .gfield--type-consent .gform-field-label {
    font-size: 0.875rem;
    line-height: 1;
    font-family: var(--font-primary);
    color: var(--color-white);
    font-weight: 700;
    margin: 0;
  }
  #sidebar-form .gfield--type-consent .gfield_consent_description {
    font-size: 0.6875rem;
    line-height: 1.2;
    font-family: var(--font-primary);
    color: var(--color-white);
    font-weight: 500;
    max-block-size: none;
    margin-block-start: 0.5rem;
    padding: 0;
    border: 0;
    overflow: visible;
  }
  #sidebar-form :where(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
  select,
  textarea) {
    --field-border-width: 0px;
    block-size: 2.8125rem;
    background-color: var(--color-white);
    box-shadow: none;
  }
  #sidebar-form :is(input, textarea)::placeholder {
    color: var(--color-black);
    opacity: 0.3;
  }
  #sidebar-form select:has(option.gf_placeholder:checked) {
    color: color-mix(in srgb, var(--color-black) 30%, var(--color-white)) !important;
  }
  #sidebar-form .sidebar-newsletter-choice,
  #sidebar-form .sidebar-consent-copy {
    color: var(--color-white);
  }
}
/* Sidebar Company info
--------------------------------------------------------------- */
.sidebar-com-info-container {
  display: contents;
}
.sidebar-com-info-coupons:is(.widget) {
  --widget-padding-x: 0rem;
  --widget-padding-top: 0rem;
  --widget-padding-bottom: 0rem;
  --widget-item-padding-x: 0rem;
  --widget-content-margin-top: 0rem;
  --widget-content-padding-top: 0rem;
  --widget-content-padding-bottom: 0rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.sidebar-com-info-testimonials:is(.widget) {
  --widget-padding-x: 0rem;
  --widget-padding-top: 0rem;
  --widget-padding-bottom: 0rem;
  --widget-item-padding-x: 0rem;
  --widget-content-margin-top: 0rem;
  --widget-content-padding-top: 0rem;
  --widget-content-padding-bottom: 0rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.sidebar-com-info :is(.swiper) {
  --swiper-custom-arrow-offset-x: 0px;
  --swiper-custom-arrow-offset-x: calc(
  	var(--widget-padding-x) + var(--widget-item-padding-x)
  );
  --swiper-custom-arrow-offset-x-negate: var(--widget-padding-x);
  --swiper-theme-color: var(--color-blue-300);
  --swiper-pagination-bottom: 1.25rem;
  --swiper-pagination-bullet-size: .28875rem;
  --swiper-pagination-bullet-width: var(--swiper-pagination-bullet-size);
  --swiper-pagination-bullet-height: var(--swiper-pagination-bullet-size);
  --swiper-pagination-bullet-horizontal-gap: .5775rem;
  --swiper-pagination-bullet-inactive-color: var(--color-gray);
}
.sidebar-com-info :is(.swiper) .swiper-custom-buttons {
  margin-inline: calc(var(--widget-padding-x) * -1);
}
.sidebar-com-info :is(.testimonial) :is(.testimonial-highlight, .testimonial-quote) * {
  display: contents;
}
/* Footer Contact

Note: 
This file is for Sidebar only overrides for the contact information
For Footer section only overrides for the contact informatio, apply styles to layout/layout-sidebar.scss -> .sidebar-contact styles section
For styles applied globally for the contact information, apply styles to layouts/layout-contact.scss
For Contact Page only overrides for the contact informatio, apply styles to templates/template-contact.scss -> #contact-page
--------------------------------------------------------------- */
.sidebar-contact {
  padding-block: 2rem;
}
.sidebar-contact .contact-location {
  display: flex;
  inline-size: 100%;
  max-inline-size: 19.375rem;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  gap: 0.625rem;
  color: var(--color-blue-400);
  text-align: center;
}
.sidebar-contact .contact-location :is(.location-map, .location-embed) {
  --cover-aspect-w: 1;
  --cover-aspect-l: 1;
  margin-block-end: 1.25rem;
  border: 1px solid var(--color-gray);
  border-radius: 0.625rem;
}
.sidebar-contact .contact-location .location-title {
  font-size: 2.375rem;
  line-height: 1;
  font-family: var(--font-secondary);
  color: var(--color-blue-400);
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  inline-size: 15.0625rem;
  max-inline-size: 15.0625rem;
  margin: 0;
}
.sidebar-contact .contact-location .location-title::before, .sidebar-contact .contact-location .location-title::after {
  display: none;
}
.sidebar-contact .contact-location .location-content {
  display: contents;
}
.sidebar-contact .contact-location .location-address {
  font-size: 1.25rem;
  line-height: 1.3;
  font-family: var(--font-primary);
  color: var(--color-blue-400);
  font-style: normal;
  font-weight: 400;
  text-align: center;
  inline-size: 15.0625rem;
  margin: 0;
}
.sidebar-contact .contact-location .location-directions {
  margin: 0;
}
.sidebar-contact .contact-location .location-directions-button.button {
  font-size: 1.0625rem;
  line-height: 1;
  font-family: var(--font-accent);
  color: var(--color-red-200);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 800;
  text-align: center;
  text-decoration: underline;
  padding: 0;
  border: 0;
  text-underline-position: from-font;
}
.sidebar-contact .contact-blocks {
  grid-template-columns: 100%;
  justify-content: center;
  text-align: center;
}
.sidebar-contact .contact-block-title {
  align-self: center;
}
.sidebar-contact .contact-block:is(.contact-special) {
  justify-self: center;
}
.sidebar-contact .contact-block:is(.contact-number, .contact-numbers) {
  /* Phone number - Contact Block Grid */
  /*
  @Variation A: Separate blocks
  Requires PHP: templates/template-contact.php - @Variation A: Separate blocks
  Requires SCSS: scss/layotemplatesuts/_contact.scss - @numberColumn / @Variation A: Separate blocks
  */
}
.sidebar-contact .contact-block.contact-numbers {
  /* Phone number - Contact Block Grid */
  /*
  @Variation B One Block
  Requires PHP: templates/template-contact.php - @Variation B One Block
  Requires SCSS: scss/layotemplatesuts/_contact.scss - @numberColumn / @Variation B One Block
  */
}
.sidebar-contact .contact-block.contact-number {
  /* Phone number - Contact Block Grid */
  /*
  @Variation A: Separate blocks
  Requires PHP: templates/template-contact.php - @Variation A: Separate blocks
  Requires SCSS: scss/layotemplatesuts/_contact.scss - @numberColumn / @Variation A: Separate blocks
  */
}
.sidebar-contact .contact-block.contact-location {
  /* Location - Contact Block Grid */
  /*
  @Variation A: Separate blocks
  Requires PHP: layouts/layout-contact.php - @Variation A: Separate blocks
  Requires SCSS: scss/layouts/_contact.scss - @Variation A: Separate blocks
  */
}
.sidebar-contact .contact-block.contact-locations {
  /* Locations - Contact Block Grid */
  /*
  @Variation B: One block
  Requires PHP: layouts/layout-contact.php - @Variation B: One block
  Requires SCSS: scss/layouts/_contact.scss - @Variation B: One block
  */
}
/* ================================================================================
Contact Info
================================================================================ */
/* Layout Contact https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/layout/contact.md
-------------------------------------------------------------------------------- */
/* Layout contact Variables
--------------------------------------------------------------- */
/* In case contact is also as crazy as the header */
/* Tip: placing the css var on :root can allow elements outside of the layout header utilize the variable if needed ie sticky stuff, offsets, jump link scroll etc. */
:root {
  --layout-contact-offset: 6.25rem;
}
/* Layout contact Overlaps
	NOTE: Classes to use:
		.layout-contact-offset-element => the element within the layout that will have the negative margins to overlap itself
		.has-layout-contact-offset => the adjacent layouts/ child of adjacent layouts that will have the pseudo element to adjust itself if the `layout-contact-offset-element` is next to it
--------------------------------------------------------------- */
.contact-can-overlap:has(.has-layout-contact-offset) .layout-contact:has(.layout-contact-offset-element) {
  isolation: isolate;
}
.contact-can-overlap .has-layout-contact-offset:not(:has(.has-layout-contact-offset)):is(.footer-top:has(+ .footer-bottom .footer-contact:first-child),
.footer-top:has(+ .footer-bottom .footer-contact:first-child) + *,
.template-wrapper:has(:is(.main, main) .layout-contact:nth-child(n+2)))::after {
  content: "";
  flex: 0 0 auto;
  grid-column: 1/-1;
  block-size: var(--layout-contact-offset, 0px);
  display: block;
  inline-size: 100%;
}
.contact-can-overlap:has(.has-layout-contact-offset) .layout-contact-offset-element:is(.layout-contact > :last-child,
.layout-contact > :last-child *) {
  margin-block-start: max(0, (var(--layout-contact-offset, 0px) + var(--overlap-buffer)) * -1) !important;
}
.contact-can-overlap:has(.has-layout-contact-offset) .layout-contact:has(.layout-contact-offset-element),
.contact-can-overlap:has(.has-layout-contact-offset) :is(main, .main):has(.layout-contact) {
  padding-block-start: var(--overlap-buffer) !important;
}

/* Contact Main
-------------------------------------------------------------------------------- */
.footer-no-contact .contact-main {
  /* Styles/Selectors for when nested layout-contact is hidden*/
}
.footer-has-contact .contact-main {
  /* Styles/Selectors for when nested layout-contact is enabled */
}

/* Contact  Related Classes

Note: 
This file is for styles applied globally for the contact information globally

For styles applied globally for the contact information, apply styles to layouts/layout-contact.scss
For Contact Page only overrides for the contact informatio, apply styles to templates/template-contact.scss -> #contact-page
For Footer section only overrides for the contact informatio, apply styles to layout/layout-footer.scss -> .footer-contact styles section
-------------------------------------------------------------------------------- */
/* Global Stylees - Numbers (eg. header phone number, footer phone number, etc.)
-------------------------------------------------------------------------------- */
.number-link {
  font-size: 1.25rem;
  line-height: 1;
  font-family: var(--font-secondary);
  color: inherit;
  font-weight: normal;
  text-decoration: none;
  display: inline-block;
}
/* Global Stylees - Locations
-------------------------------------------------------------------------------- */
.location-content {
  display: contents;
}
.location-embed {
  --cover-aspect-w: 1;
  --cover-aspect-l: 1;
}
.location-numbers {
  display: contents;
  align-items: inherit;
  justify-content: inherit;
}
.location-number {
  flex-wrap: wrap;
}
.location-number-label {
  margin-inline-end: 0.25em;
}
/* Global Stylees - Social Links (ie. Company social media, blog share icons, etc)
-------------------------------------------------------------------------------- */
.social {
  font-size: 1.5rem;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
  list-style: none;
  padding: 0;
  margin: 0;
}
.social-item-link {
  color: inherit;
}
.social-item-link svg * {
  fill: currentColor;
}
.social-item:is(:hover, :focus) {
  color: var(--scheme-sp, var(--color-primary));
}
.social:is(.social-style-circle) {
  gap: 0.25em;
}
.social:is(.social-style-circle) .social-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  border-radius: 999em;
  height: 1.75em;
  aspect-ratio: 1/1;
  padding-bottom: 0.15em;
  background: var(--color-light);
  color: var(--color-dark);
}
.social:is(.social-style-circle) .social-item:is(:hover, :focus, :focus-within) > a {
  background: var(--color-primary);
  color: var(--color-light);
}
/* Confact Info Block - Titles
-------------------------------------------------------------------------------- */
.contact-block-title:not(.contact-block-title-custom) {
  max-inline-size: max-content;
  display: inline-block;
  margin-block-end: 0;
}
/* Confact Info Block - Basic Text Content
-------------------------------------------------------------------------------- */
.contact-block-content {
  flex: 1 1;
}
:where(.contact-block-content :where(a)) {
  color: inherit;
  text-decoration: none;
}
:where(.contact-block-content :where(a)):where(:hover, :focus) {
  text-decoration: underline;
}

.contact-block-content:not(.contact-block-content-custom) {
  font-size: 0.9375rem;
  display: contents;
}
/* Confact Info Block - Grid setup
-------------------------------------------------------------------------------- */
.contact-blocks {
  justify-items: center;
  justify-content: center;
  column-gap: 4rem;
  row-gap: 4rem;
  align-items: stretch;
}
.contact-block, .contact-blocks {
  min-inline-size: 0;
}
.contact-block {
  inline-size: 100%;
  gap: 1em;
}
.contact-block:is(:only-child, :only-of-type) {
  grid-column: 1/-1;
}
.contact-block:not(.contact-block-custom) {
  display: flex;
  flex-direction: column;
}
.contact-block:is(.contact-special) {
  justify-self: center;
}
@media only screen and (min-width: 48rem) {
  .contact-blocks {
    grid-template-columns: repeat(2, auto);
  }
}
@media only screen and (min-width: 75rem) {
  .contact-blocks {
    grid-template-columns: repeat(3, auto);
  }
}
@media only screen and (max-width: 74.9375rem) {
  .contact-block:is(.contact-special) {
    justify-self: center;
    order: 9999;
    grid-column: 1/-1;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .contact-blocks {
    justify-items: center;
    justify-content: center;
    text-align: center;
  }
  .contact-block, .contact-blocks {
    align-items: center;
    align-content: center;
  }
}
.contact-block :where(.contact-locations .location, .contact-lists .list) {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-block :where(.contact-locations .location, .contact-lists .list) :where(.contact-block-content, .location-content) {
  display: contents;
}
.contact-block.contact-special {
  text-align: center;
  max-inline-size: 100%;
  place-items: center;
  place-content: center;
}
.contact-block.contact-special .contact-logo {
  align-self: center;
}
.contact-block:is(.contact-number, .contact-numbers) {
  /* Phone number - Contact Block Grid */
  /*
  @Variation A: Separate blocks
  Requires PHP: templates/template-contact.php - @Variation A: Separate blocks
  Requires SCSS: scss/layotemplatesuts/_contact.scss - @numberColumn / @Variation A: Separate blocks
  */
}
.contact-block:is(.contact-number, .contact-numbers) .number-title {
  display: block;
  margin-block-end: 0;
}
.contact-block.contact-number {
  /* Phone number - Contact Block Grid */
  /*
  @Variation A: Separate blocks
  Requires PHP: templates/template-contact.php - @Variation A: Separate blocks
  Requires SCSS: scss/layotemplatesuts/_contact.scss - @numberColumn / @Variation A: Separate blocks
  */
}
.contact-block.contact-numbers {
  /*
  @Variation B: One block
  Requires PHP: templates/template-contact.php - @Variation B: One block
  Requires SCSS: scss/layotemplatesuts/_contact.scss - @numbersColumn / @Variation B: One block
  */
}
.contact-block.contact-numbers .contact-numbers-content {
  flex: 0 0;
  row-gap: 1rem;
}
.contact-block.contact-location {
  /* Location - Contact Block Grid */
  /*
  @Variation A: Separate blocks
  Requires PHP: layouts/layout-contact.php - @Variation A: Separate blocks
  Requires SCSS: scss/layouts/_contact.scss - @Variation A: Separate blocks
  */
}
.contact-block.contact-locations {
  /* Locations - Contact Block Grid */
  /*
  @Variation B: One block
  Requires PHP: layouts/layout-contact.php - @Variation B: One block
  Requires SCSS: scss/layouts/_contact.scss - @Variation B: One block
  */
}
.contact-block.contact-locations .contact-locations-content {
  row-gap: 4rem;
  display: grid;
}
.contact-block:is(.contact-list, .contact-lists) .list-block-items {
  display: flex;
  flex-direction: column;
}
.contact-list-email {
  /* This is an example and can be omitted if not needed. each column added here will be separated by a class named after the block's title, unless the corresponding layout-contact.php markup has been modified.  */
  font-size: 1.5em;
  font-family: var(--font-secondary);
}

.contact-block.contact-lists .contact-lists-content {
  row-gap: 4rem;
  display: grid;
}
.contact-block:is(.contact-menudir, .contact-menudirs) {
  --pa-item-height: 2em;
  --pa-item-lines: 1;
}
.contact-block:is(.contact-menudir, .contact-menudirs) .menudir-container {
  display: contents;
}
/* Contact Form
--------------------------------------------------------------- */
#contact-form .field-form {
  gap: 2rem;
}
#contact-form .gform_description {
  max-inline-size: 80ch;
}
#contact-form .gform_body {
  margin-inline: auto;
}
#contact-form .gform_footer {
  justify-content: center;
  text-align: center;
}
#contact-form .gfield.gfield--type-submit {
  /* dont stretch flex button */
  align-self: flex-start;
}
@media only screen and (max-width: 74.9375rem) {
  #contact-form .gform_fields .gfield:not(.gfield-width-full) {
    /* fix gravity forms from deciding to undo the grid columns on mobile instead of tablet now */
    grid-column: 1/-1;
  }
}
/* ================================================================================
* Footer
================================================================================ */
/* Layout Footer https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/layout/footer.md
--------------------------------------------------------------- */
/* Layout Footer Variables
--------------------------------------------------------------- */
/* In case footer is also as crazy as the header */
/* Tip: placing the css var on :root can allow elements outside of the layout header utilize the variable if needed ie sticky stuff, offsets, jump link scroll etc. */
:root {
  --layout-footer-offset: 6.25rem;
}
/* Layout Footer Overlaps
	NOTE: Classes to use:
		.layout-footer-offset-element => the element within the layout that will have the negative margins to overlap itself
		.has-layout-footer-offset => the adjacent layouts/ child of adjacent layouts that will have the pseudo element to adjust itself if the `layout-footer-offset-element` is next to it
--------------------------------------------------------------- */
.footer-can-overlap:has(.has-layout-footer-offset) .layout-footer:is(.layout-footer-offset-element, :has(.layout-footer-offset-element)) {
  isolation: isolate;
  z-index: 10;
  position: relative;
}
.footer-can-overlap .has-layout-footer-offset:not(:has(.layout-footer-offset-element)):is(:has(+ .layout-footer),
.template-wrapper:has(+ .layout-footer) :is(.template-wrapper:has(+ .layout-footer) > :last-child,
:is(.main, main, .aside, aside):last-child,
:is(.main, main):last-child > :is(section, .section):last-child,
:is(.main, main):last-child > :is(section, .section):last-child *))::after {
  content: "";
  flex: 0 0 auto;
  grid-column: 1/-1;
  block-size: var(--layout-footer-offset, 0px);
  display: block;
  inline-size: 100%;
}
@media only screen and (min-width: 75rem) {
  .footer-can-overlap .has-layout-footer-offset:not(:has(.layout-footer-offset-element)):is(:is(.main, main):has(+ :is(.aside, aside):last-child),
  :is(.main, main):has(+ :is(.aside, aside):last-child) *)::after {
    content: "";
    flex: 0 0 auto;
    grid-column: 1/-1;
    block-size: var(--layout-footer-offset, 0px);
    display: block;
    inline-size: 100%;
  }
}
.footer-can-overlap:has(.has-layout-footer-offset) .layout-footer-offset-element:is(.layout-footer > :first-child,
.layout-footer > :first-child *,
.layout-footer) {
  margin-block-start: calc((var(--layout-footer-offset, 0px) + var(--overlap-buffer)) * -1) !important;
}
.footer-can-overlap:has(.has-layout-footer-offset) .layout-footer:has(.layout-footer-offset-element) {
  padding-block-start: var(--overlap-buffer) !important;
}

/* Branding logo sizes
--------------------------------------------------------------- */
:is(.ilawyer-legacy, .ilawyer, .onep21, .ihealth) {
  color: inherit;
}

.ilawyer-legacy,
.ilawyer {
  font-size: 1.125rem;
}

.onep21 {
  font-size: 3.125rem;
}

.ihealth {
  font-size: 2.125rem;
}

/* Layout Footer
--------------------------------------------------------------- */
.layout-footer {
  background-color: var(--scheme-bg, var(--color-dark-alt));
  color: var(--scheme-fg, var(--color-light));
}
.footer-no-contact .layout-footer {
  /* Styles/Selectors for when nested layout-contact is hidden*/
}
.footer-has-contact .layout-footer {
  /* Styles/Selectors for when nested layout-contact is enabled */
}

/* Footer Company info
--------------------------------------------------------------- */
.footer-com-info {
  padding-block: 2rem;
  background: var(--color-dark);
}
.footer-com-info-header {
  text-align: center;
}
/* Footer Split - Top
--------------------------------------------------------------- */
.footer-top {
  padding-block: 2rem;
}
.footer-top:has(.layout-footer-offset-element) {
  padding-block-start: 0;
}
.footer-no-contact .footer-top {
  /* Styles/Selectors for when nested layout-contact is hidden*/
}
.footer-has-contact .footer-top {
  /* Styles/Selectors for when nested layout-contact is hidden*/
  padding-block-end: 0;
}
.footer-has-contact .footer-top {
  padding-block-end: 5rem;
}
@media only screen and (min-width: 48rem) {
  .footer-has-contact .footer-top {
    padding-block-end: 6.8125rem;
  }
}
@media only screen and (min-width: 75rem) {
  .footer-has-contact .footer-top {
    padding-block-end: 8.8125rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .footer-has-contact .footer-top {
    padding-block-end: 8.125rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .footer-has-contact .footer-top {
    padding-block-end: 8.125rem;
  }
}

/* Footer Form
--------------------------------------------------------------- */
#footer-form {
  background: var(--scheme-bg, var(--color-dark-alt));
  color: var(--scheme-fg, inherit);
  padding-block: 4rem;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.8);
  inline-size: 60rem;
  max-inline-size: 100%;
  margin-inline: auto;
}
#footer-form .field-form {
  gap: 2rem;
}
#footer-form .field-form-header {
  gap: 0.25rem;
}
#footer-form .gform_description {
  max-inline-size: 80ch;
}
#footer-form .gform_body {
  margin-inline: auto;
}
#footer-form .gform_footer {
  justify-content: center;
  text-align: center;
}
#footer-form .gfield.gfield--type-submit {
  /* dont stretch flex button */
  align-self: flex-start;
}
@media only screen and (max-width: 74.9375rem) {
  #footer-form .gform_fields .gfield:not(.gfield-width-full) {
    /* fix gravity forms from deciding to undo the grid columns on mobile instead of tablet now */
    grid-column: 1/-1;
  }
}
@media only screen and (max-width: 47.9375rem) {
  #footer-form .field-form-body {
    position: relative;
    padding-block-end: 2rem;
  }
  #footer-form .gfield.newsletter-consent-field {
    position: absolute;
    inset-inline: 0;
    text-align: center;
    inset-block-start: 100%;
  }
}
.footer-no-contact #footer-form {
  /* Styles/Selectors for when nested layout-contact is hidden*/
}
.footer-has-contact #footer-form {
  /* Styles/Selectors for when nested layout-contact is enabled */
}

/* Footer Contact

Note: 
This file is for Footer only overrides for the contact information
For Footer section only overrides for the contact informatio, apply styles to layout/layout-footer.scss -> .footer-contact styles section
For styles applied globally for the contact information, apply styles to layouts/layout-contact.scss
For Contact Page only overrides for the contact informatio, apply styles to templates/template-contact.scss -> #contact-page
--------------------------------------------------------------- */
.footer-contact {
  padding-block: 2rem;
}
.footer-contact .contact-block:is(.contact-special) {
  justify-self: center;
}
.footer-contact .contact-block:is(.contact-number, .contact-numbers) {
  /* Phone number - Contact Block Grid */
  /*
  @Variation A: Separate blocks
  Requires PHP: templates/template-contact.php - @Variation A: Separate blocks
  Requires SCSS: scss/layotemplatesuts/_contact.scss - @numberColumn / @Variation A: Separate blocks
  */
}
.footer-contact .contact-block.contact-numbers {
  /* Phone number - Contact Block Grid */
  /*
  @Variation B One Block
  Requires PHP: templates/template-contact.php - @Variation B One Block
  Requires SCSS: scss/layotemplatesuts/_contact.scss - @numberColumn / @Variation B One Block
  */
}
.footer-contact .contact-block.contact-number {
  /* Phone number - Contact Block Grid */
  /*
  @Variation A: Separate blocks
  Requires PHP: templates/template-contact.php - @Variation A: Separate blocks
  Requires SCSS: scss/layotemplatesuts/_contact.scss - @numberColumn / @Variation A: Separate blocks
  */
}
.footer-contact .contact-block.contact-location {
  /* Location - Contact Block Grid */
  /*
  @Variation A: Separate blocks
  Requires PHP: layouts/layout-contact.php - @Variation A: Separate blocks
  Requires SCSS: scss/layouts/_contact.scss - @Variation A: Separate blocks
  */
}
.footer-contact .contact-block.contact-locations {
  /* Locations - Contact Block Grid */
  /*
  @Variation B: One block
  Requires PHP: layouts/layout-contact.php - @Variation B: One block
  Requires SCSS: scss/layouts/_contact.scss - @Variation B: One block
  */
}
/* Footer Split - Bottom
--------------------------------------------------------------- */
.footer-bottom {
  background-color: var(--scheme-bg-contrast, var(--color-dark));
  /* border separation all the way to the edge */
  border-block-start: 1px solid;
}
.footer-no-contact .footer-bottom {
  /* Styles/Selectors for when nested layout-contact is hidden*/
}
.footer-has-contact .footer-bottom {
  /* Styles/Selectors for when nested layout-contact is enabled */
}

/* Footer Sitemap
--------------------------------------------------------------- */
.footer-no-contact .footer-sitemap {
  /* Styles/Selectors for when nested layout-contact is hidden*/
}
.footer-has-contact .footer-sitemap {
  /* Styles/Selectors for when nested layout-contact is enabled */
}

/* Footer utility
--------------------------------------------------------------- */
.footer-utility {
  /* border separation */
}
.footer-utility {
  padding-block: 2.25rem;
  font-size: 0.875rem;
  line-height: calc(1em + 4px);
}
.footer-utility-blocks {
  row-gap: 1.5rem;
  column-gap: 2rem;
  align-items: center;
}
.footer-utility-block:only-child {
  grid-column: 1/-1;
}
.footer-utility-content :is(li) {
  display: inline;
  margin: 0;
}
.footer-utility-content :is(li):nth-child(n+2)::before {
  content: " | ";
  display: inline-block;
  margin: 0 0.5em 0 0.25em;
}
@media only screen and (min-width: 48rem) {
  .footer-utility-content :is(p:not(.footer-disclaimer),
  ul) {
    display: inline;
    margin: 0;
  }
  .footer-utility-content :is(p:not(.footer-disclaimer),
  ul):nth-child(n+2)::before {
    content: " | ";
    display: inline-block;
    margin: 0 0.5em 0 0.25em;
  }
}
@media only screen and (min-width: 75rem) {
  .footer-utility-blocks {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-utility-content {
    margin-inline-end: auto;
    order: -1;
  }
  .footer-utility-content:first-child:nth-last-child(2) {
    grid-column: span 2;
  }
  .footer-utility .social {
    text-align: center;
  }
  .footer-utility .social::before {
    content: none;
  }
  .footer-utility :is(.footer-brand) {
    order: 99;
    justify-self: self-end;
    text-align: right;
    align-self: center;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .footer-utility-blocks {
    text-align: center;
    justify-content: center;
    justify-items: center;
  }
}
.footer-no-contact .footer-utility {
  /* Styles/Selectors for when nested layout-contact is hidden*/
}
.footer-has-contact .footer-utility {
  /* Styles/Selectors for when nested layout-contact is enabled */
}

/* Footer logo
--------------------------------------------------------------- */
/* Footer disclaimer
--------------------------------------------------------------- */
.footer-disclaimer {
  margin-block-start: 1em;
}
/* Oklahoma Heat & Air footer
--------------------------------------------------------------- */
.layout-footer {
  position: relative;
  z-index: 2;
  isolation: isolate;
  background: linear-gradient(to bottom, #0059c9, #001837);
  color: var(--color-white);
}

.footer-gauge {
  position: absolute;
  inset-block-start: -11.375rem;
  inset-inline-start: 0.125rem;
  z-index: 2;
  display: block;
  inline-size: 17.4375rem;
  block-size: 18.875rem;
  pointer-events: none;
}
.footer-gauge-picture, .footer-gauge-image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.footer-gauge-image {
  object-fit: contain;
}
@media only screen and (min-width: 48rem) {
  .footer-gauge {
    inset-block-start: -6.0625rem;
    inset-inline-start: -0.0625rem;
  }
}
@media only screen and (min-width: 75rem) {
  .footer-gauge {
    inset-block-start: -3.125rem;
    inset-inline-start: -7.75rem;
    inline-size: 29.85rem;
    block-size: 32.4rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .footer-gauge {
    inset-block-start: -11.3125rem;
    inset-inline-start: -6.4375rem;
    inline-size: 37.3125rem;
    block-size: 40.5rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .footer-gauge {
    inset-block-start: -10.0625rem;
    inset-inline-start: 0;
  }
}

.footer-top {
  padding-block: 2.5rem 5rem;
}
.footer-top-container {
  --container-gutter: 1.5625rem;
}
@media only screen and (min-width: 48rem) {
  .footer-top {
    padding-block: 4.0625rem 6.875rem;
  }
  .footer-top-container {
    --container-gutter: 3.0625rem;
  }
}
@media only screen and (min-width: 75rem) {
  .footer-top {
    padding-block: 7.0625rem 8.75rem;
  }
  .footer-top-container {
    --container-gutter: 5.3125rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .footer-top {
    padding-block-end: 8.125rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .footer-top {
    padding-block-end: 8.125rem;
  }
}

#footer-form {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 64.375rem;
  block-size: 73.4375rem;
  padding-block: 3.6875rem 3.125rem;
  border: 4px solid transparent;
  border-radius: 10px;
  background: linear-gradient(to bottom, #001837, #0047A0) padding-box, linear-gradient(to top right, var(--color-blue-200), var(--color-red-200)) border-box;
  box-shadow: none;
  color: var(--color-white);
}
#footer-form .footer-form-container {
  --container-gutter: 0px;
  inline-size: 100%;
  padding-inline: 0;
}
#footer-form .footer-field-form {
  inline-size: calc(100% - 2.625rem);
  max-inline-size: 47.1875rem;
  margin-inline: auto;
  gap: 2.1875rem;
}
#footer-form .footer-field-form-header,
#footer-form .field-form-heading {
  align-items: center;
  inline-size: 100%;
  text-align: center;
}
#footer-form .footer-field-form-header {
  justify-content: center;
  justify-items: center;
}
#footer-form .field-form-heading {
  gap: 0.6875rem;
}
#footer-form .gform_title {
  margin: 0;
  max-inline-size: 11.5rem;
  font-family: var(--font-secondary);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-blue-100);
}
#footer-form .gform_description {
  max-inline-size: none;
  margin: 0;
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  color: var(--color-white);
}
#footer-form .gform_description p {
  margin: 0;
}
#footer-form .gform_description p:first-child {
  font-family: var(--font-secondary);
  font-size: 4.0625rem;
  font-weight: 600;
  line-height: 0.85;
  text-transform: uppercase;
}
#footer-form .gform_description p:first-child strong {
  font-weight: inherit;
}
#footer-form .gform_description p + p {
  margin-block-start: 0.375rem;
}
#footer-form .field-form-body,
#footer-form .gform_body,
#footer-form .gform_wrapper,
#footer-form .gform_wrapper form {
  inline-size: 100%;
}
#footer-form .gform_wrapper .gform_fields {
  column-gap: 0.8125rem;
  row-gap: 0.8125rem;
}
#footer-form .gfield {
  --field-border-width: 0px;
  --field-border-radius: 3px;
  --field-padding-x: 1.125rem;
  --field-padding-y: .90625rem;
  --field-required-color: var(--color-red-200);
  --field-line-height: 1;
  font-size: 1rem;
  line-height: 1;
}
#footer-form .gfield_label {
  margin-block-end: 0.4375rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
}
#footer-form .gfield .ginput_container :is(input:not([type=checkbox]):not([type=radio]), select) {
  block-size: 2.8125rem;
}
#footer-form .gfield--type-phone {
  order: 3;
  margin-block-start: 0.75rem;
}
#footer-form .gfield--type-email {
  order: 4;
}
#footer-form .gfield--type-select {
  order: 5;
  margin-block-start: 0.75rem;
}
#footer-form .gfield--type-select .ginput_container::before {
  border-color: var(--color-blue-300);
}
#footer-form .gfield--type-textarea {
  order: 6;
  margin-block-start: 0.75rem;
}
#footer-form .gfield--type-textarea textarea {
  block-size: 4.25rem;
}
#footer-form .gfield.newsletter-consent-field {
  order: 7;
  position: static;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  inset: auto;
  margin-block-start: 0.75rem;
  font-family: var(--font-primary);
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  color: var(--color-white);
}
#footer-form .field-form-body {
  position: static;
  gap: 1.25rem;
  padding-block-end: 0;
}
#footer-form .footer-newsletter-choice {
  display: flex;
  gap: 0.4375rem;
  align-items: center;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
  cursor: pointer;
}
#footer-form .footer-newsletter-choice input {
  appearance: none;
  display: grid;
  place-content: center;
  flex: 0 0 1rem;
  inline-size: 1rem;
  block-size: 0.9375rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-gray);
  border-radius: 3px;
  background: var(--color-white);
}
#footer-form .footer-newsletter-choice input::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 1px;
  background: var(--color-red-200);
  transform: scale(0);
  transition: transform 0.125s ease-in-out;
}
#footer-form .footer-newsletter-choice input:checked::before {
  transform: scale(1);
}
#footer-form .footer-newsletter-choice input:focus-visible {
  outline: 2px solid var(--color-blue-100);
  outline-offset: 2px;
}
#footer-form .footer-consent-copy {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-white);
}
#footer-form .gform_footer {
  align-items: flex-start;
  justify-content: center;
  text-align: center;
}
@media only screen and (min-width: 48rem) {
  #footer-form {
    block-size: 67.8125rem;
    padding-block: 6.875rem;
  }
  #footer-form .footer-field-form {
    inline-size: calc(100% - 2.625rem);
    max-inline-size: 31.625rem;
    gap: 2.9375rem;
  }
  #footer-form .gform_title {
    max-inline-size: none;
    font-size: 1.5rem;
  }
  #footer-form .gform_description p:first-child {
    font-size: 5.3125rem;
    line-height: 1;
    white-space: nowrap;
  }
  #footer-form .field-form-body {
    position: relative;
    gap: 1.5625rem;
  }
  #footer-form .gform_footer {
    min-block-size: 5.5rem;
    justify-content: flex-end;
    text-align: right;
  }
  #footer-form .gfield.newsletter-consent-field {
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    inline-size: 20.125rem;
    margin-block-start: 0;
  }
}
@media only screen and (min-width: 75rem) {
  #footer-form {
    block-size: 55.9375rem;
    padding-block: 6.875rem;
  }
  #footer-form .footer-field-form {
    inline-size: calc(100% - 3rem);
    max-inline-size: 47.1875rem;
  }
  #footer-form .gform_wrapper .gform_fields {
    row-gap: 1.5625rem;
  }
  #footer-form .gfield:is(.gfield--type-phone, .gfield--type-select, .gfield--type-textarea) {
    margin-block-start: 0;
  }
  #footer-form .gfield.newsletter-consent-field {
    inline-size: 28.8125rem;
  }
  #footer-form .gform_footer {
    min-block-size: 4.75rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  #footer-form {
    block-size: 55.9375rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  #footer-form {
    block-size: 55.9375rem;
  }
}

.footer-bottom {
  background: transparent;
  border-block-start: 0;
}
.footer-bottom-container {
  --container-gutter: 1.5625rem;
}
@media only screen and (min-width: 48rem) {
  .footer-bottom-container {
    --container-gutter: 8.0625rem;
  }
}
@media only screen and (min-width: 75rem) {
  .footer-bottom-container {
    --container-gutter: 5.3125rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .footer-bottom-container {
    --container-gutter: 5.75rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .footer-bottom-container {
    --container-gutter: 17.8125rem;
  }
}

.footer-contact {
  padding-block: 0 2.6875rem;
}
.footer-contact .contact-blocks {
  display: grid;
  grid-template-columns: minmax(0, 19.375rem);
  inline-size: 100%;
  max-inline-size: 19.375rem;
  margin-inline: auto;
  column-gap: 0;
  row-gap: 3.75rem;
  align-items: start;
  justify-content: center;
  justify-items: center;
  text-align: start;
}
.footer-contact .contact-block {
  margin: 0;
  gap: 0;
  align-items: flex-start;
  align-self: start;
  text-align: start;
}
.footer-contact .contact-block-title {
  margin: 0 0 0.625rem;
  font-family: var(--font-secondary);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-blue-100);
}
.footer-contact .contact-block-content {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-white);
}
.footer-contact .contact-special {
  order: 1;
  inline-size: 19.375rem;
  align-items: center;
  justify-self: center;
  text-align: center;
}
.footer-contact .contact-special .contact-special-content,
.footer-contact .contact-special .contact-logo,
.footer-contact .contact-special .logo-wrapper,
.footer-contact .contact-special .logo-image,
.footer-contact .contact-special picture {
  display: block;
  inline-size: 100%;
}
.footer-contact .contact-special .logo-image {
  block-size: 6.875rem;
  object-fit: contain;
}
.footer-contact .contact-location {
  order: 2;
  inline-size: 15rem;
}
.footer-contact .contact-location + .contact-location {
  margin-block-start: 0.6875rem;
}
.footer-contact .contact-location .location-title {
  margin: 0 0 0.625rem;
  font-family: var(--font-secondary);
  font-size: 2.375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-white);
}
.footer-contact .contact-location .location-address {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-white);
}
.footer-contact .contact-location .location-directions {
  display: flex;
  margin-block: 0.625rem 0;
}
.footer-contact .contact-location .location-directions-button {
  padding: 0;
  border: 0;
  font-family: var(--font-accent);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: underline;
  color: var(--color-blue-100);
}
.footer-contact .contact-location .location-directions-button:is(:hover, :focus) {
  color: var(--color-red-100);
}
.footer-contact .contact-location .location-numbers {
  margin: 0;
}
.footer-contact .contact-location .location-number {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  margin-block-start: 2rem;
}
.footer-contact .contact-location .location-number-icon {
  flex: 0 0 1.1875rem;
  inline-size: 1.1875rem;
  color: var(--color-red-200);
}
.footer-contact .contact-location .location-number-label {
  display: none;
}
.footer-contact .contact-location .location-number-link {
  font-family: var(--font-primary);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
}
.footer-contact .contact-list {
  order: 3;
  inline-size: 15rem;
  margin-block-start: 0.3125rem;
}
.footer-contact .contact-list .list-item-el {
  color: inherit;
}
.footer-contact .contact-menudir {
  order: 4;
  inline-size: 15rem;
  margin-block-start: -0.9375rem;
}
.footer-contact .contact-menudir .contact-menudir-title {
  padding-inline: 0;
  white-space: nowrap;
}
.footer-contact .contact-menudir .menu,
.footer-contact .contact-menudir .menudir-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-contact .contact-menudir .menu a,
.footer-contact .contact-menudir .menudir-menu a {
  display: block;
  min-block-size: 0;
  padding: 0;
  font-size: 1.125rem;
  line-height: 1.5;
}
.footer-contact .contact-social {
  order: 5;
  inline-size: 15rem;
  margin-block-start: -0.0625rem;
}
.footer-contact .contact-social .contact-block-title {
  margin-block-end: 0.875rem;
}
.footer-contact .contact-social .social {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-contact .contact-social .social-item-link {
  display: grid;
  place-items: center;
  inline-size: 2.625rem;
  block-size: 2.625rem;
  padding: 0.5rem;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy-100);
}
.footer-contact .contact-social .social-item-link:is(:hover, :focus) {
  background: var(--color-blue-100);
}
.footer-contact .contact-social .social-item-link-svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}
@media only screen and (min-width: 48rem) {
  .footer-contact {
    padding-block-end: 6.75rem;
  }
  .footer-contact .contact-blocks {
    grid-template-columns: 15rem 4.4375rem 15rem;
    max-inline-size: 34.4375rem;
    row-gap: 3.6875rem;
  }
  .footer-contact .contact-special {
    grid-column: 1/-1;
    grid-row: 1;
    margin-block-end: 1.3125rem;
  }
  .footer-contact .contact-location {
    grid-column: 1;
    grid-row: 2;
    margin-block-start: 0;
  }
  .footer-contact .contact-location + .contact-location {
    grid-column: 3;
    margin-block-start: 0;
  }
  .footer-contact .contact-list {
    grid-column: 1;
    grid-row: 3;
    margin-block-start: 1.3125rem;
  }
  .footer-contact .contact-menudir {
    grid-column: 3;
    grid-row: 3;
    margin-block-start: 1.3125rem;
  }
  .footer-contact .contact-social {
    grid-column: 1;
    grid-row: 4;
    margin-block-start: 0;
  }
}
@media only screen and (min-width: 75rem) {
  .footer-contact {
    padding-block-end: 8.875rem;
  }
  .footer-contact .contact-blocks {
    grid-template-columns: 19.375rem 4.5rem 15.0625rem 4.5rem 9.4375rem 3.0625rem 8.5rem;
    max-inline-size: 64.4375rem;
    row-gap: 3.6875rem;
  }
  .footer-contact .contact-special {
    grid-column: 1;
    grid-row: 1;
    margin-block-end: 0;
  }
  .footer-contact .contact-location {
    grid-column: 3;
    grid-row: 1;
  }
  .footer-contact .contact-location + .contact-location {
    grid-column: 3;
    grid-row: 2;
    margin-block-start: 0;
  }
  .footer-contact .contact-list {
    grid-column: 5;
    grid-row: 1;
    margin-block-start: 0;
  }
  .footer-contact .contact-menudir {
    grid-column: 7;
    grid-row: 1;
    margin-block-start: 0;
  }
  .footer-contact .contact-social {
    grid-column: 5;
    grid-row: 2;
  }
}
@media only screen and (min-width: 87.5rem) {
  .footer-contact {
    padding-block-end: 8.125rem;
  }
  .footer-contact .contact-blocks {
    grid-template-columns: 22.125rem 7.5rem 15.0625rem 7.5rem 9.4375rem 5.9375rem 8.5rem;
    max-inline-size: 76.0625rem;
  }
  .footer-contact .contact-special {
    inline-size: 22.125rem;
  }
  .footer-contact .contact-special .logo-image {
    block-size: 7.84375rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .footer-contact {
    padding-block-end: 7.3125rem;
  }
  .footer-contact .contact-blocks {
    grid-template-columns: 19.375rem 13.0625rem 15.0625rem 13.0625rem 9.4375rem 5.9375rem 8.5rem;
    max-inline-size: 84.4375rem;
  }
  .footer-contact .contact-special {
    inline-size: 19.375rem;
  }
  .footer-contact .contact-special .logo-image {
    block-size: 6.875rem;
  }
}

.footer-utility {
  padding-block: 1.40625rem;
  border-block-start: 0;
  background: var(--color-navy-200);
  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.4;
}
.footer-utility-container {
  --container-gutter: 1.5625rem;
}
.footer-utility-blocks {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.footer-utility-content {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.footer-utility-content p,
.footer-utility-content ul {
  margin: 0;
}
.footer-utility-content .footer-copyright {
  flex-basis: 100%;
}
.footer-utility-content .footer-menu {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-utility-content .footer-menu::before {
  content: "I";
  margin-inline-end: 0.5rem;
}
.footer-utility-content .footer-menu .menu-item:nth-child(n+2) {
  display: none;
}
.footer-utility-content .footer-license::before {
  content: "I";
  margin-inline-end: 0.5rem;
}
.footer-utility-brand {
  margin: 0;
  color: inherit;
}
.footer-utility-brand a {
  text-decoration: underline;
}
@media only screen and (min-width: 48rem) {
  .footer-utility {
    padding-block: 0.96875rem;
  }
  .footer-utility-container {
    --container-gutter: 3.0625rem;
  }
  .footer-utility-content {
    max-inline-size: 39.125rem;
  }
}
@media only screen and (min-width: 75rem) {
  .footer-utility {
    padding-block: 2.75rem;
    line-height: 1.2;
  }
  .footer-utility-container {
    --container-gutter: 5.3125rem;
  }
  .footer-utility-blocks {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  .footer-utility-content {
    max-inline-size: none;
    justify-content: flex-start;
  }
  .footer-utility-content .footer-copyright {
    flex-basis: auto;
  }
  .footer-utility-brand {
    margin-inline-start: auto;
    text-align: right;
  }
}
@media only screen and (min-width: 87.5rem) {
  .footer-utility {
    padding-block: 2.71875rem;
  }
  .footer-utility-container {
    --container-gutter: 5.75rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .footer-utility-container {
    --container-gutter: 17.8125rem;
  }
}

/* ================================================================================
* Internals/ Default
================================================================================ */
/*!
* Default Sections: Main + Aside: Can also be reused on other templates with similar wireframes (eg. Profile Page, etc.)
-------------------------------------------------------------------------------- */
/* Default Sections: Main + Aside: Skeletons - no need to edit
--------------------------------------------------------------- */
.default-sections {
  gap: var(--default-gap-y, 0) var(--default-gap-x, 0);
}
.default-sections, .default-section, .default-section-main, .default-section-sidebar {
  min-inline-size: 0; /* grid/flex fixes*/
  max-inline-size: 100%;
}
.default-section-main {
  inline-size: 100%;
}
.default-section-sidebar {
  inline-size: var(--default-sidebar-width);
}
.default-sections.default-sections-float {
  display: block;
}
.default-sections.default-sections-float :where(.default-section, .default-section-main, .default-section-sidebar) {
  margin-inline: auto;
}
.default-sections.default-sections-float :where(.default-section, .default-section-main, .default-section-sidebar):where(:nth-last-child(n+2)) {
  margin-block-end: var(--default-gap-y);
}
.default-sections:is(.default-sections-split, .default-sections-full) {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.default-sections.default-sections-grid {
  display: grid;
  grid-template-columns: 100%;
  justify-content: center;
}
@media only screen and (min-width: 75rem) {
  .default-section-main {
    max-inline-size: calc(var(--comp) - var(--default-sidebar-width) - var(--container-gutter, 0px) * 2 - var(--default-gap-x));
  }
  .default-section-sidebar {
    order: 9;
  }
  .default-sections:is(.default-sections-split, .default-sections-full) {
    flex-direction: row;
    align-items: normal;
    justify-content: center;
  }
  .default-sections.default-sections-reverse .default-section-sidebar {
    order: -1;
  }
  .default-sections.default-sections-reverse .default-section-main {
    order: 9;
  }
  .default-sections.default-sections-float::after {
    content: "";
    font-size: 0;
    visibility: hidden;
    block-size: 0;
    clear: both;
    display: table;
    inline-size: 100%;
    flex: 0 0 auto;
  }
  .default-sections.default-sections-float .default-section-sidebar {
    float: inline-end;
    clear: inline-end;
  }
  .default-sections.default-sections-float .default-section-main {
    float: inline-start;
    clear: inline-start;
    inline-size: calc(100% - (var(--default-sidebar-width)) - var(--default-gap-x));
  }
  .default-sections.default-sections-float .default-section-main:only-child {
    /* no sidebar adjust */
    float: none;
  }
  .default-sections.default-sections-float.default-sections-reverse .default-section-sidebar {
    float: inline-start;
    clear: inline-start;
  }
  .default-sections.default-sections-float.default-sections-reverse .default-section-main {
    float: inline-end;
    clear: inline-end;
  }
  .default-sections:is(.default-sections-split, .default-sections-full) .default-section-sidebar {
    flex: 0 0 auto;
  }
  .default-sections:is(.default-sections-split, .default-sections-full) .default-section-main {
    flex: 1 1;
  }
  .default-sections.default-sections-full {
    --default-gap-x: 0rem;
  }
  .default-sections.default-sections-full .default-section-main {
    margin-inline: auto;
  }
  .default-sections.default-sections-grid {
    grid-template-columns: 1fr var(--default-sidebar-width);
    grid-column-gap: var(--default-gap-x);
  }
  .default-sections.default-sections-grid .default-section-main {
    justify-self: center;
    grid-column: 1;
  }
  .default-sections.default-sections-grid:not(.default-sections-no-autocenter) .default-section-main:not(.default-sections:has(.default-section-sidebar) .default-section) {
    /* no sidebar adjust */
    grid-column: 1/-1 !important;
  }
  .default-sections.default-sections-grid .default-section-sidebar {
    grid-column: 2;
  }
  .default-sections.default-sections-grid .default-section-main, .default-sections.default-sections-grid .default-section-sidebar {
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 0;
  }
  .default-sections.default-sections-grid.default-sections-reverse {
    grid-template-columns: var(--default-sidebar-width) 1fr;
  }
  .default-sections.default-sections-grid.default-sections-reverse .default-section-main {
    grid-column: 2;
  }
  .default-sections.default-sections-grid.default-sections-reverse .default-section-sidebar {
    grid-column: 1;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .default-sections:is(.default-sections-split, s.default-sections-grid) :is(.default-section-main, .default-section-sidebar) {
    display: contents;
  }
  .default-sections.default-sections-full .default-section-sidebar {
    align-self: stretch;
    inline-size: 100%;
  }
  .default-sections:not(.default-sections-full) > .default-section:is(aside, .aside):not(:only-child) {
    padding-block-start: 0;
  }
  .default-sections:not(.default-sections-full) > .default-section:is(main, .main):not(:only-child) {
    padding-block-end: 0;
  }
}

/* Default Sections Customizations
--------------------------------------------------------------- */
.default-sections {
  --default-sidebar-width: 100%;
  --default-gap-x: 3.75rem;
  --default-gap-y: 1.875rem;
}
@media only screen and (min-width: 75rem) {
  .default-sections {
    --default-sidebar-width: 19.375rem;
    --default-gap-y: 4rem;
  }
}
@media only screen and (min-width: 75rem) {
  .default-sections.default-sections-split .default-section-sidebar-container {
    --container-gutter: 1rem;
  }
}
.default-sections.default-sections-full .default-section-sidebar {
  background: var(--scheme-bg, var(--color-light-alt));
}
@media only screen and (min-width: 75rem) {
  .default-sections.default-sections-full .default-section-main-container {
    --container-gutter: 7.5rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .default-sections.default-sections-full .default-section-main-container {
    --container-gutter: 15.625rem;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .default-sections.default-sections-full {
    row-gap: 0rem;
  }
}
/* Entry Skeletons. No need to edit 
--------------------------------------------------------------- */
.entry-thumbnail {
  --cover-aspect-w: var(--entry-thumbnail-aspect-w);
  --cover-aspect-l: var(--entry-thumbnail-aspect-l);
  flex: 0 0 auto;
  background-color: var(--color-light-alt);
}

/* Default Entries
-------------------------------------------------------------------------------- */
.entry-thumbnail {
  --entry-thumbnail-aspect-w: 648;
  --entry-thumbnail-aspect-l: 260;
  margin-block-end: 2rem;
}
.entry-thumbnail:nth-child(n+2) {
  margin-block-start: 2rem;
}
.entry-thumbnail:is(a) {
  color: inherit;
}
.entry-thumbnail:empty::after {
  content: "No Image Available";
  opacity: 0.2;
  font-size: 1.5rem;
  line-height: 1.125;
  font-family: var(--font-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  inset: 0;
  margin: auto;
  padding: 2em;
}
.entry-thumbnail img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: 50% 30%;
  z-index: 1;
}
.entry-meta a:not(:hover, :focus) {
  text-decoration: underline;
}
.entry-meta-category a:not(:hover, :focus) {
  color: var(--color-primary);
}
.layout-banner .entry-meta-category a:not(:hover, :focus) {
  color: var(--color-blue-100);
}
.entry-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.entries .entry {
  display: grid;
  justify-content: space-between;
  column-gap: 3rem;
  row-gap: 2rem;
}
.entries .entry:nth-child(n+2) {
  padding-block-start: 3rem;
  margin-block-start: 3rem;
  border-block-start: 1px solid var(--color-neutral-light);
}
.entries .entry-thumbnail {
  margin-block-end: 0;
}
.entries .entry-thumbnail, .entries .entry-body {
  /* grid fix */
  min-inline-size: 0;
}
@media only screen and (min-width: 87.5rem) {
  .entries .entry {
    grid-template-columns: 250px 1fr;
  }
  .entries .entry-thumbnail {
    --entry-thumbnail-aspect-w: 250;
    --entry-thumbnail-aspect-l: 200;
  }
  .entries .entry-body {
    align-self: center;
  }
  .entries .entry-body:only-child {
    grid-column: 1/-1;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .entry-thumbnail {
    --entry-thumbnail-aspect-w: 648;
    --entry-thumbnail-aspect-l: 260;
  }
}
/*!
* Default Header
-------------------------------------------------------------------------------- */
@media only screen and (max-width: 47.9375rem) {
  .default-header {
    text-align: center;
  }
}
@media only screen and (min-width: 48rem) {
  .banner-has-h1.banner-button-shift .default-header {
    margin-block-end: 0;
  }
}
/*
* Default Layout/Template https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/layout/default.md
-------------------------------------------------------------------------------- */
.layout-default-sections {
  --default-gap-x: 0rem;
  --default-gap-y: 4.375rem;
  padding-block: 2.5rem;
}
.layout-default-sections > :is(.layout-default-main, .layout-default-aside) {
  padding-block: 0;
}
.layout-default-aside {
  justify-self: center;
}
@media only screen and (min-width: 48rem) {
  .layout-default-sections {
    --default-sidebar-width: 19.375rem;
    --default-gap-y: 4.6875rem;
    padding-block: 3.75rem;
  }
}
@media only screen and (min-width: 75rem) {
  .layout-default-sections {
    --default-gap-x: 5rem;
    padding-block: 5.625rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .layout-default-sections {
    --default-gap-x: 10rem;
    padding-block: 6.25rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .layout-default-sections {
    --default-gap-x: 10.5rem;
    padding-block: 7.8125rem;
  }
}

/* Blog Listing
-------------------------------------------------------------------------------- */
.layout-default-blog .default-header-blog {
  margin-block-end: 1.875rem;
}
.layout-default-blog .default-heading {
  font-size: 3rem;
  line-height: 0.85;
  font-family: var(--font-secondary);
  color: var(--color-blue-400);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
}
@media only screen and (max-width: 47.9375rem) {
  .layout-default-blog .default-heading {
    text-align: left;
  }
}
.layout-default-blog .entries {
  display: flex;
  flex-direction: column;
}
.layout-default-blog .entries .entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.875rem;
}
.layout-default-blog .entries .entry:nth-child(n+2) {
  margin-block-start: 3.25rem;
  padding-block-start: 3.25rem;
  border-block-start: 1px solid var(--color-gray);
}
.layout-default-blog .entry-thumbnail {
  --entry-thumbnail-aspect-w: 1;
  --entry-thumbnail-aspect-l: 1;
  margin-block: 0;
  border-radius: 0.625rem;
  overflow: hidden;
}
.layout-default-blog .entry-body,
.layout-default-blog .entry-copy {
  display: flex;
  flex-direction: column;
}
.layout-default-blog .entry-body {
  align-self: center;
  gap: 1.5625rem;
}
.layout-default-blog .entry-copy {
  gap: 0.9375rem;
}
.layout-default-blog .entry-copy > * {
  margin-block: 0;
}
.layout-default-blog .entry-meta {
  font-size: 1rem;
  line-height: 1.5;
  font-family: var(--font-primary);
  color: var(--color-blue-400);
  font-weight: 700;
}
.layout-default-blog .entry-meta a {
  color: inherit;
}
.layout-default-blog .entry-meta-separator {
  margin-inline: 0.25em;
}
.layout-default-blog .entry-title {
  font-size: 1.5625rem;
  line-height: 1.15;
  font-family: var(--font-accent);
  color: var(--color-blue-300);
  letter-spacing: 0em;
  text-transform: none;
  font-weight: 700;
}
.layout-default-blog .entry-title a:not(:hover, :focus) {
  color: inherit;
  text-decoration: none;
}
.layout-default-blog .entry-excerpt {
  font-size: 1.125rem;
  line-height: 1.5;
  font-family: var(--font-primary);
  color: var(--color-black);
  font-weight: 400;
}
.layout-default-blog .entry-excerpt > :first-child {
  margin-block-start: 0;
}
.layout-default-blog .entry-excerpt > :last-child {
  margin-block-end: 0;
}
.layout-default-blog .entry-button {
  --button-height: 2.6875rem;
  font-size: 1.0625rem;
}
.layout-default-blog .pagination {
  font-size: 1.0625rem;
  line-height: 1;
  font-family: var(--font-accent);
  color: var(--color-blue-400);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 800;
  margin-block-start: 3.25rem;
  padding-block-start: 1.125rem;
  border-color: var(--color-gray);
  inline-size: 100%;
}
.layout-default-blog .pagination-num-list :is(a, span) {
  margin-inline: 0.5em;
}
@media only screen and (min-width: 48rem) {
  .layout-default-blog .default-heading {
    font-size: 3.5rem;
  }
}
@media only screen and (min-width: 75rem) {
  .layout-default-blog .entries .entry:has(.entry-thumbnail) {
    grid-template-columns: 16.5625rem minmax(0, 1fr);
    column-gap: 2.3125rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .layout-default-blog .layout-default-sections-blog {
    --default-gap-x: 9.875rem;
  }
  .layout-default-blog .default-heading {
    font-size: 4.0625rem;
  }
}

/*!
* Default Heading
-------------------------------------------------------------------------------- */
@media only screen and (min-width: 48rem) {
  .default-heading {
    text-wrap: auto;
  }
}
/*!
* Default Divider - Optional
-------------------------------------------------------------------------------- */
.default-divider {
  --fancy-border-margin-y: 3rem;
}
/*!
* Search Form
* Although optional, some builds may include this OR request this in the long run. Since it's built in to wordpress, we might as well at least give it some basic styles. Overhaul as needed
-------------------------------------------------------------------------------- */
.searchform {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
}
.searchform:nth-last-child(n+2) {
  margin-block-end: 2rem;
}
.searchform-field {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.searchform-button {
  order: 99;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/* ================================================================================
* Home Template
================================================================================ */
/* Template Home https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/template/home.md
-------------------------------------------------------------------------------- */
/*
* Home Related Classes
-------------------------------------------------------------------------------- */
/* Add helper classes specific to this template as needed */
/*
* Home Template
-------------------------------------------------------------------------------- */
@keyframes home-banner-marquee-scroll {
  from {
    transform: translate3d(var(--home-banner-marquee-start, 0px), 0, 0);
  }
  to {
    transform: translate3d(calc(var(--home-banner-marquee-start, 0px) - var(--home-banner-marquee-distance, 0px)), 0, 0);
  }
}
#home-banner {
  --scheme-bg: var(--color-navy-100);
  --scheme-fg: var(--color-white);
  --scheme-sp: var(--color-blue-100);
}
#home-banner .home-banner-main {
  position: relative;
  display: block;
  min-block-size: 35.75rem;
  block-size: 35.75rem;
  padding: 0;
  overflow: clip;
  isolation: isolate;
  text-align: center;
  background-color: var(--color-navy-100);
}
#home-banner .home-banner-main::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 3;
  block-size: 0.375rem;
  background: linear-gradient(90deg, var(--color-blue-200), var(--color-red-200));
  pointer-events: none;
}
#home-banner .home-banner-container {
  --container-fallback: 0rem;
  --container-gutter: 0rem;
  --home-banner-gutter: 1.4375rem;
  position: relative;
  z-index: 1;
  block-size: 100%;
}
#home-banner .home-banner-copy {
  position: absolute;
  inset-block-start: 3.75rem;
  inset-inline-start: 50%;
  inline-size: min(100% - var(--home-banner-gutter) * 2, 19.5625rem);
  transform: translateX(-50%);
  text-align: center;
  text-transform: uppercase;
}
#home-banner .home-banner-secondary-heading {
  font-size: 1rem;
  line-height: 1.25;
  font-family: var(--font-accent);
  color: var(--color-blue-100);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 800;
  text-align: center;
  inline-size: min(100%, 16.5625rem);
  margin: 0 auto 0.9375rem;
}
#home-banner .home-banner-primary-heading {
  font-size: 2.625rem;
  line-height: 0.85;
  font-family: var(--font-secondary);
  color: var(--color-white);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  inline-size: 100%;
  max-inline-size: none;
  margin: 0;
}
#home-banner .home-banner-rating {
  --home-rating-border: .36rem;
  --home-rating-radius: .4rem;
  position: absolute;
  inset-block-start: calc(16.5rem - var(--home-rating-border));
  inset-inline-start: 50%;
  z-index: 2;
  box-sizing: content-box;
  inline-size: 15.24rem;
  block-size: 5.96rem;
  border: var(--home-rating-border) solid transparent;
  border-radius: var(--home-rating-radius);
  transform: translateX(-50%);
  overflow: hidden;
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box, linear-gradient(90deg, color-mix(in srgb, var(--color-blue-200) 40%, transparent), color-mix(in srgb, var(--color-red-200) 40%, transparent)) border-box;
  color: var(--color-blue-400);
  text-align: start;
}
#home-banner .home-banner-rating-image-wrapper,
#home-banner .home-banner-rating-image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
#home-banner .home-banner-rating-image-wrapper {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1;
  inline-size: 6rem;
  margin: 0;
  overflow: hidden;
}
#home-banner .home-banner-rating-image {
  object-fit: cover;
  object-position: center;
}
#home-banner .home-banner-rating-details {
  position: absolute;
  inset-block-start: 0.8rem;
  inset-inline-start: 7.12rem;
  z-index: 2;
  inline-size: 6.8rem;
}
#home-banner .home-banner-rating-stars-wrapper,
#home-banner .home-banner-rating-stars {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
#home-banner .home-banner-rating-stars-wrapper {
  margin: 0;
}
#home-banner .home-banner-rating-summary {
  display: grid;
  gap: 0.28rem;
  margin-block-start: 0.16rem;
  text-transform: uppercase;
}
#home-banner .home-banner-rating-row {
  display: flex;
  align-items: flex-end;
  gap: 0.32rem;
}
#home-banner .home-banner-rating-score {
  font-size: 2.5625rem;
  line-height: 0.78;
  font-family: var(--font-secondary);
  color: var(--color-blue-400);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  flex: 0 0 3rem;
  margin-block-end: -0.3rem;
}
#home-banner .home-banner-rating-label {
  font-size: 0.875rem;
  line-height: 1.05;
  font-family: var(--font-accent);
  color: var(--color-blue-400);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 800;
  inline-size: 3.44rem;
  overflow-wrap: normal;
}
#home-banner .home-banner-rating-clients {
  font-size: 0.68rem;
  line-height: 1;
  font-family: var(--font-accent);
  color: var(--color-blue-400);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}
#home-banner .home-banner-background {
  --responsive-background-bg-position: center center;
  --responsive-background-overlay-background: none;
  --responsive-background-overlay-opacity: 0;
  inset-block-end: 0.375rem;
  background-color: var(--color-navy-100);
}
#home-banner .home-banner-marquee {
  position: relative;
  z-index: 1;
  block-size: 4.75rem;
  overflow: hidden;
  background-color: var(--color-navy-200);
  color: var(--color-white);
}
#home-banner .home-banner-marquee-track {
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  column-gap: 1.25rem;
  inline-size: max-content;
  block-size: 2.25rem;
  will-change: transform;
}
#home-banner .home-banner-marquee-initialized .home-banner-marquee-track {
  animation: home-banner-marquee-scroll var(--home-banner-marquee-duration, 20s) linear infinite;
}
#home-banner .home-banner-marquee-paused .home-banner-marquee-track {
  animation-play-state: paused;
}
#home-banner .home-banner-marquee-item {
  display: flex;
  flex: none;
  align-items: center;
  column-gap: 1.25rem;
  block-size: 2.25rem;
}
#home-banner .home-banner-marquee-text {
  font-size: 1.75rem;
  line-height: 1;
  font-family: var(--font-secondary);
  color: var(--color-white);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}
#home-banner .home-banner-marquee-icon {
  display: block;
  flex: none;
  block-size: 2.25rem;
  object-fit: contain;
}
#home-banner .home-banner-marquee-icon-heat {
  inline-size: 2.25rem;
}
#home-banner .home-banner-marquee-icon-air {
  inline-size: 3.4375rem;
}
@media only screen and (min-width: 48rem) {
  #home-banner .home-banner-main {
    min-block-size: 55.125rem;
    block-size: 55.125rem;
  }
  #home-banner .home-banner-container {
    --home-banner-gutter: 3.125rem;
  }
  #home-banner .home-banner-copy {
    inset-block-start: 5.3125rem;
    inline-size: min(100% - var(--home-banner-gutter) * 2, 41.8125rem);
  }
  #home-banner .home-banner-secondary-heading {
    font-size: 1.25rem;
    line-height: 1.25;
    inline-size: min(100%, 32.1875rem);
    margin-block-end: 1.125rem;
  }
  #home-banner .home-banner-primary-heading {
    font-size: 5.1875rem;
    line-height: 0.85;
  }
  #home-banner .home-banner-rating {
    --home-rating-border: .5625rem;
    --home-rating-radius: .625rem;
    inset-block-start: calc(24.9375rem - var(--home-rating-border));
    inline-size: 23.8125rem;
    block-size: 9.3125rem;
  }
  #home-banner .home-banner-rating-image-wrapper {
    inline-size: 9.375rem;
  }
  #home-banner .home-banner-rating-details {
    inset-block-start: 1.25rem;
    inset-inline-start: 11.125rem;
    inline-size: 10.625rem;
  }
  #home-banner .home-banner-rating-summary {
    gap: 0.4375rem;
    margin-block-start: 0.25rem;
  }
  #home-banner .home-banner-rating-row {
    gap: 0.5rem;
  }
  #home-banner .home-banner-rating-score {
    font-size: 4.05rem;
    line-height: 0.78;
    flex-basis: 4.75rem;
    margin-block-end: -0.5rem;
  }
  #home-banner .home-banner-rating-label {
    font-size: 1.375rem;
    line-height: 1.05;
    inline-size: 5.375rem;
  }
  #home-banner .home-banner-rating-clients {
    font-size: 1.0625rem;
    line-height: 1;
  }
}
@media only screen and (min-width: 75rem) {
  #home-banner .home-banner-main {
    min-block-size: 53.1875rem;
    block-size: 53.1875rem;
    text-align: start;
  }
  #home-banner .home-banner-container {
    --home-banner-gutter: 4.8125rem;
  }
  #home-banner .home-banner-copy {
    inset-block-start: 7.625rem;
    inset-inline-start: var(--home-banner-gutter);
    inline-size: 54.25rem;
    transform: none;
    text-align: start;
  }
  #home-banner .home-banner-secondary-heading {
    margin-inline: 0;
    text-align: start;
  }
  #home-banner .home-banner-primary-heading {
    font-size: 6.875rem;
    line-height: 0.85;
    text-align: start;
  }
  #home-banner .home-banner-rating {
    inset-block-start: calc(34rem - var(--home-rating-border));
    inset-inline-start: calc(var(--home-banner-gutter) + 0.125rem - var(--home-rating-border));
    transform: none;
  }
}
@media only screen and (min-width: 87.5rem) {
  #home-banner .home-banner-container {
    --home-banner-gutter: 5.5625rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  #home-banner .home-banner-container {
    --home-banner-gutter: 9.6875rem;
  }
}

:is(.home-page, #home-page) {
  padding-block: 0;
}
/* Home Section 1
-------------------------------------------------------------------------------- */
#home-section-1 {
  --home-section-1-next-overlap: 12.9125rem;
  position: relative;
  z-index: 2;
  isolation: isolate;
  padding-block-start: 3.375rem;
  overflow: hidden;
  background-color: transparent;
  color: var(--color-white);
}
#home-section-1::before {
  position: absolute;
  z-index: -1;
  inset-block-start: 0;
  inset-block-end: var(--home-section-1-next-overlap);
  inset-inline: 0;
  background: linear-gradient(180deg, #001837 0%, #0059c9 100%);
  content: "";
}
#home-section-1 .home-section-1-intro {
  inline-size: calc(100% - 3.125rem);
  margin-inline: auto;
}
#home-section-1 .home-section-1-content {
  display: grid;
  gap: 1.0625rem;
}
#home-section-1 .home-section-1-heading {
  font-size: 2.625rem;
  line-height: 0.85;
  font-family: var(--font-secondary);
  color: var(--color-white);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}
#home-section-1 .home-section-1-copy {
  display: grid;
  gap: 2.25rem;
}
#home-section-1 .home-section-1-feature {
  display: grid;
  gap: 0.875rem;
}
#home-section-1 .home-section-1-feature-heading {
  font-size: 1.5625rem;
  line-height: 1.15;
  font-family: var(--font-accent);
  color: var(--color-blue-100);
  font-weight: 700;
  margin: 0;
}
#home-section-1 .home-section-1-button {
  margin-block-start: 0.5625rem;
}
#home-section-1 .home-section-1-visual {
  --home-section-1-visual-width: 20.3875rem;
  --home-section-1-visual-height: 20.3144rem;
  --home-section-1-graphic-size: 18rem;
  --home-section-1-image-size: 17.8125rem;
  --home-section-1-image-x: 1.4375rem;
  --home-section-1-image-y: 1.1875rem;
  --home-section-1-badge-size: 5.7444rem;
  --home-section-1-badge-x: 14.6431rem;
  --home-section-1-badge-y: 7.2975rem;
  position: relative;
  inline-size: var(--home-section-1-visual-width);
  block-size: var(--home-section-1-visual-height);
  margin: 1.875rem auto 0;
}
#home-section-1 .home-section-1-graphic,
#home-section-1 .home-section-1-image,
#home-section-1 .home-section-1-badge {
  position: absolute;
  display: block;
  margin: 0;
}
#home-section-1 .home-section-1-graphic img,
#home-section-1 .home-section-1-image img,
#home-section-1 .home-section-1-badge img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
#home-section-1 .home-section-1-graphic {
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: var(--home-section-1-graphic-size);
  block-size: var(--home-section-1-visual-height);
  opacity: 27%;
}
#home-section-1 .home-section-1-graphic img {
  object-fit: fill;
}
#home-section-1 .home-section-1-image {
  inset-block-start: var(--home-section-1-image-y);
  inset-inline-start: var(--home-section-1-image-x);
  inline-size: var(--home-section-1-image-size);
  block-size: var(--home-section-1-image-size);
  border-radius: 50%;
  overflow: hidden;
  margin-left: -1px;
}
#home-section-1 .home-section-1-image img {
  object-fit: cover;
}
#home-section-1 .home-section-1-badge {
  z-index: 1;
  inset-block-start: var(--home-section-1-badge-y);
  inset-inline-start: var(--home-section-1-badge-x);
  inline-size: var(--home-section-1-badge-size);
  block-size: var(--home-section-1-badge-size);
}
#home-section-1 .home-section-1-services-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.125rem;
  inline-size: calc(100% - 2.8125rem);
  margin: 2.1875rem auto 2.1rem;
  padding: 3.4375rem 0.9375rem 3.125rem;
  border: 0.25rem solid transparent;
  border-radius: 0.625rem;
  background: linear-gradient(var(--color-navy-100), var(--color-navy-100)) padding-box, linear-gradient(90deg, var(--color-blue-200), var(--color-red-200)) border-box;
}
#home-section-1 .home-section-1-services-header {
  display: grid;
  gap: 1.0625rem;
  inline-size: 16.3125rem;
  text-align: center;
}
#home-section-1 .home-section-1-services-eyebrow {
  font-size: 1.25rem;
  line-height: 1;
  font-family: var(--font-secondary);
  color: var(--color-blue-100);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}
#home-section-1 .home-section-1-services-heading {
  font-size: 3rem;
  line-height: 0.85;
  font-family: var(--font-secondary);
  color: var(--color-white);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}
#home-section-1 .home-section-1-services-mobile,
#home-section-1 .home-section-1-service-slider {
  inline-size: 17.8125rem;
}
#home-section-1 .home-section-1-service-slider {
  overflow: hidden;
}
#home-section-1 .home-section-1-services-grid {
  display: none;
}
#home-section-1 .home-section-1-service-card,
#home-section-1 .home-section-1-service-link {
  inline-size: 17.8125rem;
  block-size: 17.8125rem;
}
#home-section-1 .home-section-1-service-card {
  position: relative;
}
#home-section-1 .home-section-1-service-link {
  position: relative;
  display: flex;
  background-color: transparent;
  text-align: center;
  text-decoration: none;
  color: var(--color-white);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  isolation: isolate;
}
#home-section-1 .home-section-1-service-link::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(49.35% 50% at 50% 50%, #01397f 0%, #001b3b 100%);
  opacity: 0;
  transition: opacity 0.35s ease-out;
  content: "";
}
#home-section-1 .home-section-1-service-link:is(:hover, :focus-visible)::before {
  opacity: 1;
}
#home-section-1 .home-section-1-service-link:is(:hover, :focus-visible) .home-section-1-service-icon::after {
  opacity: 1;
}
#home-section-1 .home-section-1-service-link:is(:hover, :focus-visible) .home-section-1-service-icon-picture {
  opacity: 0;
}
#home-section-1 .home-section-1-service-link:is(:hover, :focus-visible) .home-section-1-service-title-line::after {
  background-color: var(--color-red-200);
}
#home-section-1 .home-section-1-service-icon,
#home-section-1 .home-section-1-service-icon-picture,
#home-section-1 .home-section-1-service-icon-image {
  display: block;
}
#home-section-1 .home-section-1-service-icon {
  position: relative;
  z-index: 1;
  inline-size: 9.8125rem;
  block-size: 9.125rem;
  isolation: isolate;
}
#home-section-1 .home-section-1-service-icon::after {
  position: absolute;
  inset: 0;
  background: var(--home-section-1-service-hover-icon, none) center/contain no-repeat;
  opacity: 0;
  transition: opacity 0.35s ease-out;
  content: "";
}
#home-section-1 .home-section-1-service-icon-picture {
  inline-size: 100%;
  block-size: 100%;
  opacity: 1;
  transition: opacity 0.35s ease-out;
}
#home-section-1 .home-section-1-service-icon-image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}
#home-section-1 .home-section-1-service-label {
  position: relative;
  z-index: 1;
}
#home-section-1 .home-section-1-service-title {
  display: inline-block;
  font-size: 1.5625rem;
  line-height: 1;
  font-family: var(--font-secondary);
  color: inherit;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  max-inline-size: 13rem;
  text-wrap: balance;
}
#home-section-1 .home-section-1-service-title-line {
  display: inline;
}
#home-section-1 .home-section-1-service-title-line::after {
  display: inline-block;
  inline-size: 1.2982rem;
  block-size: 1.2982rem;
  margin-inline-start: 0.5625rem;
  background-color: var(--color-blue-200);
  -webkit-mask: var(--icon-arrow) center/contain no-repeat;
  mask: var(--icon-arrow) center/contain no-repeat;
  transition: background-color 0.25s ease;
  vertical-align: -0.2em;
  content: "";
}
#home-section-1 .home-section-1-services-panel .swiper-pagination {
  --swiper-pagination-bullet-size: .4125rem;
  --swiper-pagination-bullet-horizontal-gap: .825rem;
  position: absolute;
  inset-block-start: calc(100% + 1.6875rem);
  inset-inline-start: 50%;
  inline-size: auto;
  transform: translateX(-50%);
}
#home-section-1 .home-section-1-services-panel .swiper-pagination-bullet {
  background-color: var(--color-blue-200);
  opacity: 1;
}
#home-section-1 .home-section-1-services-panel .swiper-pagination-bullet-active {
  background-color: var(--color-red-200);
}
#home-section-1 .home-section-1-services-button {
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 48rem) {
  #home-section-1 {
    --home-section-1-next-overlap: 23.8125rem;
    padding-block-start: 4.5rem;
  }
  #home-section-1 .home-section-1-intro {
    inline-size: calc(100% - 6.375rem);
  }
  #home-section-1 .home-section-1-heading {
    font-size: 4.375rem;
    line-height: 0.85;
  }
  #home-section-1 .home-section-1-visual {
    --home-section-1-visual-width: 29.125rem;
    --home-section-1-visual-height: 29.0206rem;
    --home-section-1-graphic-size: 25.7125rem;
    --home-section-1-image-size: 25.625rem;
    --home-section-1-image-x: 2rem;
    --home-section-1-image-y: 1.75rem;
    --home-section-1-badge-size: 8.2063rem;
    --home-section-1-badge-x: 20.9188rem;
    --home-section-1-badge-y: 10.425rem;
    margin-block-start: 2.6875rem;
  }
  #home-section-1 .home-section-1-services-panel {
    gap: 1.75rem;
    inline-size: 42rem;
    margin-block-start: 4.0419rem;
    margin-block-end: 0;
    padding: 5rem 3.1875rem;
  }
  #home-section-1 .home-section-1-services-header {
    gap: 1.0625rem;
    inline-size: 35.625rem;
  }
  #home-section-1 .home-section-1-services-eyebrow {
    font-size: 1.5rem;
    line-height: 1;
  }
  #home-section-1 .home-section-1-services-heading {
    font-size: 5.3125rem;
    line-height: 0.85;
  }
  #home-section-1 .home-section-1-services-mobile,
  #home-section-1 .home-section-1-services-button {
    display: none;
  }
  #home-section-1 .home-section-1-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 17.8125rem);
    grid-auto-rows: 17.8125rem;
  }
}
@media only screen and (min-width: 75rem) {
  #home-section-1 {
    --home-section-1-next-overlap: 14.4375rem;
    padding-block-start: 6.5rem;
  }
  #home-section-1 .home-section-1-intro {
    display: grid;
    grid-template-columns: 31.6875rem 29.125rem;
    justify-content: space-between;
    inline-size: calc(100% - 9.625rem);
  }
  #home-section-1 .home-section-1-visual {
    margin-block-start: 6.1875rem;
  }
  #home-section-1 .home-section-1-services-panel {
    inline-size: 65.625rem;
    margin-block-start: 6.25rem;
    padding: 5.625rem 6.0938rem;
  }
  #home-section-1 .home-section-1-services-header {
    inline-size: 48.375rem;
  }
  #home-section-1 .home-section-1-services-grid {
    grid-template-columns: repeat(3, 17.8125rem);
  }
}
@media only screen and (min-width: 87.5rem) {
  #home-section-1 {
    padding-block-start: 9rem;
  }
  #home-section-1 .home-section-1-intro {
    grid-template-columns: 38.1875rem 29.125rem;
    inline-size: calc(100% - 14.625rem);
  }
  #home-section-1 .home-section-1-visual {
    margin-block-start: 2.0625rem;
  }
  #home-section-1 .home-section-1-services-panel {
    margin-block-start: 8.8125rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  #home-section-1 {
    padding-block-start: 7.5rem;
  }
  #home-section-1 .home-section-1-intro {
    grid-template-columns: 38.4375rem 40.825rem;
    justify-content: start;
    column-gap: 8.625rem;
    inline-size: 85.375rem;
  }
  #home-section-1 .home-section-1-content {
    margin-block-start: 1.75rem;
  }
  #home-section-1 .home-section-1-visual {
    --home-section-1-visual-width: 40.825rem;
    --home-section-1-visual-height: 40.7138rem;
    --home-section-1-graphic-size: 36.1656rem;
    --home-section-1-image-size: 35.9375rem;
    --home-section-1-image-x: 2.8125rem;
    --home-section-1-image-y: 2.4375rem;
    --home-section-1-badge-size: 11.5125rem;
    --home-section-1-badge-x: 29.3125rem;
    --home-section-1-badge-y: 14.625rem;
    margin-block-start: 0;
  }
  #home-section-1 .home-section-1-services-panel {
    margin-block-start: 7rem;
    padding-block: 5.375rem;
  }
}

/*
 * Home Section 2: Reviews
 *
 * Content-bearing elements stay in grid flow so headings, buttons, truck art,
 * and testimonials can grow without relying on a fixed section height.
-------------------------------------------------------------------------------- */
#home-section-2 {
  --home-section-2-red-stop: 23%;
  --home-section-2-white-stop: 77%;
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  margin-block-start: -12.9125rem;
  padding: 19.3125rem 1.5625rem 3.5rem;
  overflow: clip;
  background: linear-gradient(to bottom, #0059c9 0, #ed1c24 var(--home-section-2-red-stop), #f5f5f5 var(--home-section-2-white-stop), #f5f5f5 100%);
}
#home-section-2 .home-section-2-background-text {
  position: absolute;
  inset-block-start: 15.875rem;
  inset-inline-start: 50%;
  z-index: 0;
  margin: 0;
  transform: translateX(-50%);
  font-family: var(--font-secondary);
  font-size: 5.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-red-200);
  pointer-events: none;
}
#home-section-2 .home-section-2-header {
  position: relative;
  z-index: 3;
  inline-size: min(100%, 19.625rem);
  text-align: center;
}
#home-section-2 .home-section-2-rating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5063rem;
  min-block-size: 2.3288rem;
  padding: 0.6581rem 0.7594rem;
  border: 0.0506rem solid var(--color-white);
  border-radius: 6.25rem;
  background-color: rgba(245, 245, 245, 0.2);
  -webkit-backdrop-filter: blur(0.2531rem);
  backdrop-filter: blur(0.2531rem);
  color: var(--color-white);
}
#home-section-2 .home-section-2-rating-copy {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5063rem;
  font-family: var(--font-secondary);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 0.81;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-block-end: -0.3rem;
}
#home-section-2 .home-section-2-rating-copy strong {
  font: inherit;
  padding-inline: 0.1091em;
}
#home-section-2 .home-section-2-rating-stars,
#home-section-2 .home-section-2-rating-stars-image {
  display: block;
  inline-size: 5.1771rem;
  block-size: 0.9113rem;
}
#home-section-2 .home-section-2-title {
  margin-block-start: 1.25rem;
}
#home-section-2 .home-section-2-heading {
  font-size: 3rem;
  line-height: 0.85;
  font-family: var(--font-secondary);
  color: var(--color-white);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  inline-size: min(100%, 17.75rem);
  max-inline-size: none;
  margin: 0 auto;
}
#home-section-2 .home-section-2-button {
  margin-block-start: 0.625rem;
}
#home-section-2 .home-section-2-button .button {
  --button-padding-x: 1.0588em;
  inline-size: 12.375rem;
  justify-content: center;
  white-space: nowrap;
}
#home-section-2 .home-section-2-truck {
  position: relative;
  z-index: 2;
  justify-self: end;
  inline-size: min(25.4375rem, 100vw + 3.375rem);
  aspect-ratio: 1069/601;
  margin: 0.75rem -3.375rem 0 0;
}
#home-section-2 .home-section-2-truck-picture,
#home-section-2 .home-section-2-truck-image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}
#home-section-2 .home-section-2-reviews {
  position: relative;
  z-index: 4;
  inline-size: min(100%, 19.375rem);
  margin-block-start: 0.625rem;
}
#home-section-2 .home-section-2-testimonials-slider {
  inline-size: 100%;
}
#home-section-2 .home-section-2-testimonial-slide {
  display: flex;
  block-size: auto;
}
#home-section-2 .home-section-2-testimonial {
  display: flex;
  box-sizing: border-box;
  inline-size: 100%;
  padding: 2.4375rem 1.6875rem;
  border-radius: 0.625rem;
  background: linear-gradient(180deg, #0059c9 0%, #001837 100%);
  color: var(--color-white);
}
#home-section-2 .home-section-2-testimonial-container {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  text-align: center;
}
#home-section-2 .home-section-2-testimonial-stars {
  display: block;
  flex: 0 0 auto;
  inline-size: 10.3125rem;
  block-size: 3.288rem;
  margin: 0 auto 1.1875rem;
}
#home-section-2 .home-section-2-testimonial-stars :is(img, svg, picture),
#home-section-2 .home-section-2-testimonial-stars img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}
#home-section-2 .home-section-2-testimonial-highlight {
  font-size: 1.4375rem;
  line-height: 1.15;
  font-family: var(--font-accent);
  color: var(--color-white);
  font-weight: 800;
  text-align: center;
  max-inline-size: none;
  margin: 0;
}
#home-section-2 .home-section-2-testimonial-quote {
  font-size: 1rem;
  line-height: 1.5;
  font-family: var(--font-primary);
  font-weight: 400;
  text-align: center;
  margin-block-start: 1rem;
}
#home-section-2 .home-section-2-testimonial-divider {
  flex: 0 0 auto;
  inline-size: 100%;
  block-size: 1px;
  margin: auto 0 1.4375rem;
  border: 0;
  background-color: rgba(217, 217, 217, 0.2);
}
#home-section-2 .home-section-2-testimonial-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  font-family: var(--font-accent);
  font-size: 1rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: start;
  text-transform: uppercase;
  color: var(--color-white);
}
#home-section-2 .home-section-2-testimonial-source > span::after {
  content: none;
}
#home-section-2 .home-section-2-testimonial-source-logo,
#home-section-2 .home-section-2-testimonial-source-logo-image {
  display: block;
  flex: 0 0 auto;
  inline-size: 4.375rem;
  block-size: 1.4402rem;
}
#home-section-2 .home-section-2-arrows {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-block-start: 0.9375rem;
}
#home-section-2 .home-section-2-arrow.button {
  --button-height: 3.125rem;
  --button-border-radius: 50%;
  --button-padding-x: .75rem;
  position: static;
  inline-size: 3.125rem;
  block-size: 3.125rem;
  margin: 0;
  transform: none;
  font-size: 1rem;
}
@media only screen and (min-width: 48rem) {
  #home-section-2 {
    --home-section-2-red-stop: 31%;
    --home-section-2-white-stop: 100%;
    margin-block-start: -23.8125rem;
    padding-block-start: 33.25rem;
    padding-inline: 3.1875rem;
  }
  #home-section-2 .home-section-2-background-text {
    inset-block-start: 25.75rem;
    font-size: 12.5rem;
  }
  #home-section-2 .home-section-2-header {
    inline-size: min(100%, 35.5rem);
  }
  #home-section-2 .home-section-2-rating {
    gap: 0.625rem;
    min-block-size: 2.875rem;
    padding: 0.8125rem 0.9375rem;
    border-width: 0.0625rem;
    -webkit-backdrop-filter: blur(0.3125rem);
    backdrop-filter: blur(0.3125rem);
  }
  #home-section-2 .home-section-2-rating-copy {
    gap: 0.625rem;
    font-size: 1.375rem;
    line-height: 0.81818;
  }
  #home-section-2 .home-section-2-rating-stars,
  #home-section-2 .home-section-2-rating-stars-image {
    inline-size: 6.3916rem;
    block-size: 1.125rem;
  }
  #home-section-2 .home-section-2-title {
    margin-block-start: 2.125rem;
  }
  #home-section-2 .home-section-2-heading {
    font-size: 6.875rem;
    line-height: 0.85455;
    inline-size: min(100%, 35.5rem);
  }
  #home-section-2 .home-section-2-button {
    margin-block-start: 1.25rem;
  }
  #home-section-2 .home-section-2-truck {
    inline-size: 49.6875rem;
    margin-block-start: 1rem;
    margin-inline-end: -3.3125rem;
  }
  #home-section-2 .home-section-2-reviews {
    inline-size: min(100%, 33.125rem);
    margin-block-start: 0.25rem;
  }
  #home-section-2 .home-section-2-testimonials-slider {
    inline-size: min(100%, 25rem);
    margin-inline: auto;
  }
  #home-section-2 .home-section-2-testimonial {
    padding-inline: 1.9063rem;
  }
  #home-section-2 .home-section-2-arrows {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
    pointer-events: none;
  }
  #home-section-2 .home-section-2-arrow.button {
    position: absolute;
    inset-block-start: 50%;
    margin: 0;
    transform: translateY(-50%);
    pointer-events: auto;
  }
  #home-section-2 .home-section-2-arrow.prev {
    inset-inline-start: 0;
  }
  #home-section-2 .home-section-2-arrow.next {
    inset-inline-end: 0;
  }
}
@media only screen and (min-width: 75rem) {
  #home-section-2 {
    --home-section-2-red-stop: 33%;
    margin-block-start: -14.4375rem;
    padding-block-start: 30.75rem;
    padding-block-end: 7.3125rem;
    padding-inline: 5.0625rem;
    grid-template-columns: minmax(0, 35.5rem) minmax(0, 1fr);
    justify-items: start;
  }
  #home-section-2 .home-section-2-background-text {
    inset-block-start: 19.8125rem;
    font-size: 19.375rem;
  }
  #home-section-2 .home-section-2-header {
    z-index: 3;
    grid-column: 1;
    grid-row: 1;
    inline-size: 35.5rem;
    text-align: start;
  }
  #home-section-2 .home-section-2-rating {
    margin-inline-start: 0;
  }
  #home-section-2 .home-section-2-heading {
    font-size: 6.875rem;
    line-height: 0.79091;
    margin-inline: 0;
    text-align: start;
  }
  #home-section-2 .home-section-2-button {
    margin-block-start: 1.4375rem;
  }
  #home-section-2 .home-section-2-truck {
    z-index: 2;
    grid-column: 1/-1;
    grid-row: 1;
    justify-self: end;
    inline-size: 49.6875rem;
    margin-block-start: -1.3125rem;
    margin-inline-end: -16.4375rem;
  }
  #home-section-2 .home-section-2-reviews {
    grid-column: 1/-1;
    grid-row: 2;
    justify-self: center;
    inline-size: min(100%, 59.0625rem);
    margin-block-start: 3.3125rem;
  }
  #home-section-2 .home-section-2-testimonials-slider {
    inline-size: min(100%, 50.9375rem);
  }
}
@media only screen and (min-width: 75rem) and (max-width: 112.4375rem) {
  #home-section-2 .home-section-2-arrow.prev {
    inset-inline-start: -65px;
  }
  #home-section-2 .home-section-2-arrow.next {
    inset-inline-end: -65px;
  }
}
@media only screen and (min-width: 87.5rem) {
  #home-section-2 {
    --home-section-2-red-stop: 36%;
    padding-block-end: 7.625rem;
    padding-inline: 5.625rem;
  }
  #home-section-2 .home-section-2-background-text {
    font-size: 22.5rem;
  }
  #home-section-2 .home-section-2-truck {
    inline-size: 66.8125rem;
    margin-block-start: -6.625rem;
    margin-inline-end: -21.8125rem;
  }
  #home-section-2 .home-section-2-reviews {
    inline-size: min(100%, 85rem);
    margin-block-start: 0.25rem;
  }
  #home-section-2 .home-section-2-testimonials-slider {
    inline-size: min(100%, 76.875rem);
  }
  #home-section-2 .home-section-2-testimonial {
    min-block-size: 29.6875rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  #home-section-2 {
    --home-section-2-red-stop: 38.04%;
    --home-section-2-white-stop: 100%;
    padding-block-end: 11.0625rem;
  }
  #home-section-2 .home-section-2-background-text {
    inset-block-start: 18.5625rem;
    font-size: 27.1875rem;
  }
  #home-section-2 .home-section-2-header {
    align-self: start;
    justify-self: end;
    transform: translateX(16.0625rem);
  }
  #home-section-2 .home-section-2-button {
    margin-block-start: 1.875rem;
  }
  #home-section-2 .home-section-2-truck {
    margin-inline-end: -5.625rem;
  }
}

/*
* Home Section 3: Service Areas
-------------------------------------------------------------------------------- */
:is(.home-section-3, #home-section-3) {
  padding-block: 3.25rem 2.875rem;
  background-color: var(--color-white);
}
:is(.home-section-3, #home-section-3) .home-section-3-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  inline-size: calc(100% - 3.125rem);
  margin-inline: auto;
}
:is(.home-section-3, #home-section-3) .home-section-3-details {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
:is(.home-section-3, #home-section-3) .home-section-3-intro,
:is(.home-section-3, #home-section-3) .home-section-3-description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
:is(.home-section-3, #home-section-3) .home-section-3-intro {
  gap: 1.25rem;
}
:is(.home-section-3, #home-section-3) .home-section-3-description {
  gap: 0.625rem;
}
:is(.home-section-3, #home-section-3) .home-section-3-heading {
  font-size: 2.625rem;
  line-height: 0.85;
  font-family: var(--font-secondary);
  color: var(--color-blue-400);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}
:is(.home-section-3, #home-section-3) .home-section-3-button .button {
  white-space: nowrap;
}
:is(.home-section-3, #home-section-3) .home-section-3-areas {
  display: grid;
  justify-items: center;
  inline-size: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-accent);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 2.2353;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-blue-400);
}
:is(.home-section-3, #home-section-3) .home-section-3-areas > .menu-item {
  inline-size: 10rem;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}
:is(.home-section-3, #home-section-3) .home-section-3-areas > .menu-item a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.375rem;
  text-decoration: none;
  color: inherit;
}
:is(.home-section-3, #home-section-3) .home-section-3-areas > .menu-item a:is(:hover, :focus-visible) {
  color: var(--color-blue-300);
}
:is(.home-section-3, #home-section-3) .home-section-3-areas > .menu-item a:is(:hover, :focus-visible) .button-glyph {
  opacity: 1;
  transform: translate(0, -50%);
}
:is(.home-section-3, #home-section-3) .home-section-3-areas > .menu-item .button-glyph {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: calc(100% + 0.45rem);
  inline-size: 0.9902rem;
  block-size: 0.9902rem;
  font-size: 0.9902rem;
  opacity: 0;
  transform: translate(-0.25rem, -50%);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
:is(.home-section-3, #home-section-3) .home-section-3-map,
:is(.home-section-3, #home-section-3) .home-section-3-map-picture,
:is(.home-section-3, #home-section-3) .home-section-3-map-image {
  display: block;
}
:is(.home-section-3, #home-section-3) .home-section-3-map {
  inline-size: 100%;
  margin: 0;
}
:is(.home-section-3, #home-section-3) .home-section-3-map-picture,
:is(.home-section-3, #home-section-3) .home-section-3-map-image {
  inline-size: 100%;
  block-size: auto;
}
@media only screen and (min-width: 48rem) {
  :is(.home-section-3, #home-section-3) {
    margin-block-start: -1.1875rem;
    padding-block: 5.625rem 4.75rem;
  }
  :is(.home-section-3, #home-section-3) .home-section-3-container {
    gap: 2.8125rem;
    inline-size: 41.875rem;
  }
  :is(.home-section-3, #home-section-3) .home-section-3-details {
    gap: 2.5rem;
  }
  :is(.home-section-3, #home-section-3) .home-section-3-heading {
    font-size: 4.375rem;
    line-height: 0.85;
  }
  :is(.home-section-3, #home-section-3) .home-section-3-areas {
    grid-template-rows: repeat(9, 2.375rem);
    grid-auto-flow: column;
    grid-auto-columns: 10rem;
    justify-content: start;
    justify-items: start;
    column-gap: 4.875rem;
  }
  :is(.home-section-3, #home-section-3) .home-section-3-areas > .menu-item {
    text-align: start;
  }
  :is(.home-section-3, #home-section-3) .home-section-3-areas > .menu-item a {
    justify-content: flex-start;
  }
  :is(.home-section-3, #home-section-3) .home-section-3-map {
    inline-size: 32.2535rem;
    margin-inline: auto;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.home-section-3, #home-section-3) {
    margin-block-start: -7.3125rem;
    padding-block: 7.3125rem 5.5rem;
  }
  :is(.home-section-3, #home-section-3) .home-section-3-container {
    gap: 3.625rem;
    inline-size: 46.875rem;
  }
  :is(.home-section-3, #home-section-3) .home-section-3-areas {
    column-gap: 8.375rem;
  }
  :is(.home-section-3, #home-section-3) .home-section-3-map {
    inline-size: 32.2045rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.home-section-3, #home-section-3) {
    margin-block-start: -7.625rem;
    padding-block: 7.625rem 4.25rem;
  }
  :is(.home-section-3, #home-section-3) .home-section-3-container {
    position: relative;
    display: grid;
    grid-template-columns: 32.2045rem 38.25rem;
    gap: 5.9205rem;
    align-items: start;
    inline-size: 76.375rem;
    margin-inline-start: calc((100% - 76.375rem) / 2 + 0.0625rem);
    margin-inline-end: 0;
  }
  :is(.home-section-3, #home-section-3) .home-section-3-details {
    grid-column: 2;
    gap: 3.125rem;
  }
  :is(.home-section-3, #home-section-3) .home-section-3-map {
    grid-column: 1;
    grid-row: 1;
    inline-size: 32.2045rem;
    margin-block-start: 4.9375rem;
  }
  :is(.home-section-3, #home-section-3) .home-section-3-areas {
    column-gap: 4.125rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.home-section-3, #home-section-3) {
    margin-block-start: -11.0625rem;
    padding-block: 9.25rem 5.125rem;
  }
  :is(.home-section-3, #home-section-3) .home-section-3-container {
    z-index: 2;
    grid-template-columns: 44.8125rem 38.25rem;
    gap: 8.4375rem;
    inline-size: 91.5rem;
    margin-inline-start: 11.25rem;
    transform: translateX(-3rem);
  }
  :is(.home-section-3, #home-section-3) .home-section-3-details {
    margin-block-start: 1.8125rem;
  }
  :is(.home-section-3, #home-section-3) .home-section-3-map {
    inline-size: 44.8125rem;
    margin-block-start: 0;
  }
}

/*
 * Home Section 4: Financing, services, and equipment brands
-------------------------------------------------------------------------------- */
:is(.home-section-4, #home-section-4) {
  overflow: hidden;
  background-color: var(--color-white);
  color: var(--color-black);
}
:is(.home-section-4, #home-section-4) .home-section-4-container {
  --container-gutter: 1.5625rem;
}
:is(.home-section-4, #home-section-4) .home-section-4-financing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 1.125rem 1.5625rem 2.875rem;
  border-radius: 0.625rem;
  background: linear-gradient(90deg, #001837 0%, #0047A0 100%);
  color: var(--color-white);
  text-align: center;
}
:is(.home-section-4, #home-section-4) .home-section-4-financing-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  min-inline-size: 0;
}
:is(.home-section-4, #home-section-4) .home-section-4-financing-icon,
:is(.home-section-4, #home-section-4) .home-section-4-financing-icon-image {
  display: block;
  inline-size: 6.75rem;
  block-size: 6.75rem;
  flex: 0 0 auto;
}
:is(.home-section-4, #home-section-4) .home-section-4-financing-content {
  font-size: 1.4375rem;
  line-height: 1.4;
  font-family: var(--font-primary);
  font-weight: 700;
}
:is(.home-section-4, #home-section-4) .home-section-4-financing-button {
  flex: 0 0 auto;
}
:is(.home-section-4, #home-section-4) .home-section-4-financing-button .button {
  white-space: nowrap;
}
:is(.home-section-4, #home-section-4) .home-section-4-services {
  display: grid;
  gap: 1.875rem;
  margin-block-start: 3.75rem;
}
:is(.home-section-4, #home-section-4) .home-section-4-brands {
  --home-section-4-brands-distance: 0px;
  --home-section-4-brands-duration: 70s;
  overflow: hidden;
  margin-block-start: 5rem;
  inline-size: 100%;
}
:is(.home-section-4, #home-section-4) .home-section-4-brands-track,
:is(.home-section-4, #home-section-4) .home-section-4-brands-group {
  display: flex;
  align-items: center;
  inline-size: max-content;
}
:is(.home-section-4, #home-section-4) .home-section-4-brands-track {
  column-gap: 9.3125rem;
  will-change: transform;
}
:is(.home-section-4, #home-section-4) .home-section-4-brands-group {
  column-gap: 9.3125rem;
  flex: 0 0 auto;
}
:is(.home-section-4, #home-section-4) .home-section-4-brand,
:is(.home-section-4, #home-section-4) .home-section-4-brand-picture,
:is(.home-section-4, #home-section-4) .home-section-4-brand-image {
  display: block;
  flex: 0 0 auto;
}
:is(.home-section-4, #home-section-4) .home-section-4-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 4.375rem;
}
:is(.home-section-4, #home-section-4) .home-section-4-brand-image {
  inline-size: auto;
  max-inline-size: none;
  block-size: auto;
  max-block-size: 4.375rem;
}
:is(.home-section-4, #home-section-4) .home-section-4-brands-initialized .home-section-4-brands-track {
  animation: home-section-4-brands-scroll var(--home-section-4-brands-duration) linear infinite;
}
:is(.home-section-4, #home-section-4) .home-section-4-brands-paused .home-section-4-brands-track {
  animation-play-state: paused;
}
@media only screen and (min-width: 48rem) {
  :is(.home-section-4, #home-section-4) .home-section-4-container {
    --container-gutter: 3.125rem;
  }
  :is(.home-section-4, #home-section-4) .home-section-4-financing {
    padding-inline: 3.125rem;
  }
  :is(.home-section-4, #home-section-4) .home-section-4-brands {
    margin-block-start: 7.5rem;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.home-section-4, #home-section-4) .home-section-4-container {
    --container-gutter: 4.875rem;
  }
  :is(.home-section-4, #home-section-4) .home-section-4-financing {
    flex-direction: row;
    justify-content: space-between;
    gap: 2rem;
    min-block-size: 9.0625rem;
    padding: 1.125rem 3.125rem;
    text-align: start;
  }
  :is(.home-section-4, #home-section-4) .home-section-4-financing-message {
    flex-direction: row;
    gap: 0.9375rem;
    max-inline-size: 41.125rem;
  }
  :is(.home-section-4, #home-section-4) .home-section-4-services {
    max-inline-size: 46.875rem;
    margin-block-start: 5.1875rem;
    margin-inline: auto;
  }
  :is(.home-section-4, #home-section-4) .home-section-4-brands {
    margin-block-start: 5rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.home-section-4, #home-section-4) .home-section-4-container {
    --container-gutter: 5.625rem;
  }
  :is(.home-section-4, #home-section-4) .home-section-4-financing-message {
    max-inline-size: 48.4375rem;
  }
  :is(.home-section-4, #home-section-4) .home-section-4-services {
    grid-template-columns: 34.375rem 33.75rem;
    align-items: start;
    column-gap: 8.5625rem;
    max-inline-size: none;
  }
  :is(.home-section-4, #home-section-4) .home-section-4-services-column > :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
    margin-block-start: 1.875rem;
  }
  :is(.home-section-4, #home-section-4) .home-section-4-services-column > p:not(:last-child) {
    margin-block-end: 1.875rem;
  }
  :is(.home-section-4, #home-section-4) .home-section-4-brands {
    margin-block-start: 9.734375rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.home-section-4, #home-section-4) .home-section-4-container {
    --container-gutter: 21.875rem;
  }
  :is(.home-section-4, #home-section-4) .home-section-4-services {
    grid-template-columns: repeat(2, 35.625rem);
    column-gap: 5.5625rem;
  }
}

@keyframes home-section-4-brands-scroll {
  to {
    transform: translate3d(calc(var(--home-section-4-brands-distance) * -1), 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.home-section-4, #home-section-4) .home-section-4-brands-track {
    animation: none;
    transform: none;
  }
}
/*
 * Home Section 5: Services callout and selling points
-------------------------------------------------------------------------------- */
:is(.home-section-5, #home-section-5) {
  --home-section-5-next-overlap: 15.725rem;
  --home-section-5-gradient-end-inset: 25.474472rem;
  --home-section-5-background-end-inset: var(--home-section-5-next-overlap);
  position: relative;
  z-index: 3;
  padding-block: 1.1875rem 0;
  overflow: hidden;
  background-color: transparent;
  color: var(--color-black);
}
:is(.home-section-5, #home-section-5) .home-section-5-stage {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
:is(.home-section-5, #home-section-5) .home-section-5-gradient {
  position: absolute;
  inset-block-start: 0;
  inset-block-end: var(--home-section-5-gradient-end-inset);
  inset-inline: 0;
  z-index: -2;
  background: linear-gradient(to bottom, var(--color-white) 2.1%, #8ad5fb 100%);
  pointer-events: none;
}
:is(.home-section-5, #home-section-5) .home-section-5-background {
  --responsive-background-bg-color: transparent;
  --responsive-background-bg-size: fill;
  --responsive-background-overlay-background: linear-gradient(to bottom, rgba(1, 90, 200, 0) 82.613%, #001938 100%);
  --responsive-background-overlay-opacity: 1;
  position: absolute;
  inset-block-start: 33rem;
  inset-block-end: var(--home-section-5-background-end-inset);
  inset-inline-start: 50%;
  inset-inline-end: auto;
  z-index: -1;
  inline-size: 50rem;
  transform: translateX(-50%);
  pointer-events: none;
}
:is(.home-section-5, #home-section-5) .home-section-5-background-image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
:is(.home-section-5, #home-section-5) .home-section-5-container {
  --container-gutter: 1.5625rem;
  position: relative;
  z-index: 1;
  padding-block-start: 3.8125rem;
}
:is(.home-section-5, #home-section-5) .home-section-5-intro {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  inline-size: 100%;
}
:is(.home-section-5, #home-section-5) .home-section-5-heading {
  font-size: 5.5rem;
  line-height: 0.8;
  font-family: var(--font-secondary);
  color: var(--color-blue-400);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  inline-size: 100%;
  margin: 0;
}
:is(.home-section-5, #home-section-5) .home-section-5-services {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6875rem;
  inline-size: 100%;
}
:is(.home-section-5, #home-section-5) .home-section-5-services-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  inline-size: 100%;
}
:is(.home-section-5, #home-section-5) .home-section-5-services-heading {
  font-size: 1.5625rem;
  line-height: 1.15;
  font-family: var(--font-accent);
  color: var(--color-blue-300);
  font-weight: 700;
  inline-size: 17.875rem;
  margin: 0 0.4375rem;
}
:is(.home-section-5, #home-section-5) .home-section-5-services-list {
  display: grid;
  gap: 0;
  inline-size: 100%;
  margin: 0;
  padding: 0 0 0 1.5rem;
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-black);
}
:is(.home-section-5, #home-section-5) .home-section-5-services-list li {
  padding-inline-start: 0.1875rem;
}
:is(.home-section-5, #home-section-5) .home-section-5-button .button {
  white-space: nowrap;
}
:is(.home-section-5, #home-section-5) .home-section-5-selling-points {
  position: relative;
  z-index: 2;
  inline-size: 18.4338rem;
  margin: 24rem auto 0;
}
:is(.home-section-5, #home-section-5) .home-section-5-selling-point-slider-wrapper {
  align-items: stretch;
}
:is(.home-section-5, #home-section-5) .home-section-5-selling-point-slide {
  block-size: auto;
}
:is(.home-section-5, #home-section-5) .home-section-5-selling-point {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  box-sizing: border-box;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 20.1619rem;
  padding: 2.0162rem 2.0162rem 2.5923rem;
  border: 0.2304rem solid transparent;
  border-radius: 0.625rem;
  background: linear-gradient(var(--color-navy-100), var(--color-navy-100)) padding-box, linear-gradient(90deg, var(--color-blue-200), var(--color-red-200)) border-box;
  color: var(--color-white);
}
:is(.home-section-5, #home-section-5) .home-section-5-selling-point:is(:hover, :focus) {
  background: linear-gradient(#001837, #0059C9) padding-box, linear-gradient(90deg, var(--color-blue-200), var(--color-red-200)) border-box;
}
:is(.home-section-5, #home-section-5) .home-section-5-selling-point-icon,
:is(.home-section-5, #home-section-5) .home-section-5-selling-point-icon-image {
  display: block;
  inline-size: auto;
  max-inline-size: 4.125rem;
  block-size: auto;
  max-block-size: 4.625rem;
}
:is(.home-section-5, #home-section-5) .home-section-5-selling-point-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8641rem;
  inline-size: 100%;
}
:is(.home-section-5, #home-section-5) .home-section-5-selling-point-eyebrow {
  font-size: 1.0944rem;
  line-height: 1;
  font-family: var(--font-secondary);
  color: var(--color-blue-200);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}
:is(.home-section-5, #home-section-5) .home-section-5-selling-point-heading {
  font-size: 1.6706rem;
  line-height: 1.1;
  font-family: var(--font-accent);
  color: var(--color-white);
  font-weight: 700;
  inline-size: 100%;
  margin: 0;
}
@media only screen and (min-width: 48rem) {
  :is(.home-section-5, #home-section-5) {
    --home-section-5-next-overlap: 13.224472rem;
    --home-section-5-gradient-end-inset: 32.161972rem;
    padding-block-start: 7.4375rem;
  }
  :is(.home-section-5, #home-section-5) .home-section-5-background {
    inset-block-start: 22.3125rem;
    inline-size: 75rem;
  }
  :is(.home-section-5, #home-section-5) .home-section-5-container {
    --container-gutter: 3.125rem;
    padding-block-start: 0;
  }
  :is(.home-section-5, #home-section-5) .home-section-5-intro {
    gap: 2.5rem;
    inline-size: 36.8125rem;
    margin-inline-start: 2.46875rem;
  }
  :is(.home-section-5, #home-section-5) .home-section-5-heading {
    font-size: 10.625rem;
    line-height: 0.8;
    inline-size: 38.9375rem;
  }
  :is(.home-section-5, #home-section-5) .home-section-5-services {
    inline-size: 31.0625rem;
  }
  :is(.home-section-5, #home-section-5) .home-section-5-services-heading {
    inline-size: 100%;
    margin-inline: 0;
  }
  :is(.home-section-5, #home-section-5) .home-section-5-services-list {
    grid-template-columns: 15.1875rem 12.5625rem;
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    column-gap: 3.75rem;
  }
  :is(.home-section-5, #home-section-5) .home-section-5-selling-points {
    inline-size: 38.1176rem;
    margin-block-start: 24rem;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.home-section-5, #home-section-5) {
    --home-section-5-next-overlap: 10.1rem;
    --home-section-5-gradient-end-inset: 31.911972rem;
    --home-section-5-background-end-inset: 9.786972rem;
    padding-block-start: 7.5rem;
  }
  :is(.home-section-5, #home-section-5) .home-section-5-gradient {
    inset-block-start: 6.625rem;
  }
  :is(.home-section-5, #home-section-5) .home-section-5-background {
    inset-block-start: 16.5rem;
    inline-size: 104.875rem;
  }
  :is(.home-section-5, #home-section-5) .home-section-5-container {
    --container-gutter: 4.875rem;
  }
  :is(.home-section-5, #home-section-5) .home-section-5-intro {
    margin-inline: auto;
  }
  :is(.home-section-5, #home-section-5) .home-section-5-selling-points {
    inline-size: 57.8014rem;
    margin-block-start: 25.265625rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.home-section-5, #home-section-5) {
    --home-section-5-next-overlap: 11.081rem;
    --home-section-5-gradient-end-inset: 35.8935rem;
    --home-section-5-background-end-inset: var(--home-section-5-next-overlap);
    padding-block-start: 8.8125rem;
  }
  :is(.home-section-5, #home-section-5) .home-section-5-gradient {
    inset-block-start: 0;
  }
  :is(.home-section-5, #home-section-5) .home-section-5-background {
    --responsive-background-bg-size: cover;
    inset-block-start: 4.6875rem;
    inline-size: max(120rem, 100vw);
  }
  :is(.home-section-5, #home-section-5) .home-section-5-container {
    --container-gutter: 5.625rem;
    padding-block-start: 0.875rem;
  }
  :is(.home-section-5, #home-section-5) .home-section-5-intro {
    display: grid;
    grid-template-columns: 38.9375rem 31.0625rem;
    align-items: center;
    column-gap: 6.375rem;
    inline-size: 76.375rem;
    margin-inline-start: -0.0625rem;
  }
  :is(.home-section-5, #home-section-5) .home-section-5-selling-points {
    inline-size: 76.1727rem;
    margin-block-start: 40.4816rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.home-section-5, #home-section-5) {
    --home-section-5-next-overlap: 10.0995rem;
    --home-section-5-gradient-end-inset: 35.412rem;
    padding-block-start: 7.9375rem;
  }
  :is(.home-section-5, #home-section-5) .home-section-5-background {
    inset-block-start: 5.1875rem;
  }
  :is(.home-section-5, #home-section-5) .home-section-5-container {
    --container-gutter: 21.875rem;
    padding-block-start: 1.75rem;
  }
  :is(.home-section-5, #home-section-5) .home-section-5-selling-points {
    margin-block-start: 39.125rem;
  }
}

/*
 * Home Section 6: Company trust statement and reasons to choose us
-------------------------------------------------------------------------------- */
:is(.home-section-6, #home-section-6) {
  --home-section-6-next-overlap: 17.595625rem;
  --home-section-6-background-end-inset: var(--home-section-6-next-overlap);
  position: relative;
  z-index: 2;
  margin-block-start: -15.725rem;
  overflow: visible;
  color: var(--color-white);
}
:is(.home-section-6, #home-section-6) .home-section-6-background {
  position: absolute;
  inset-block-start: 0;
  inset-block-end: var(--home-section-6-background-end-inset);
  inset-inline: 0;
  z-index: -1;
  background: linear-gradient(to bottom, #001837 0%, #0059c9 100%);
  pointer-events: none;
}
:is(.home-section-6, #home-section-6) .home-section-6-container {
  --container-gutter: 1.5625rem;
  display: flex;
  flex-direction: column;
  gap: 3.125rem;
  padding-block-start: 19.9375rem;
}
:is(.home-section-6, #home-section-6) .home-section-6-copy,
:is(.home-section-6, #home-section-6) .home-section-6-intro,
:is(.home-section-6, #home-section-6) .home-section-6-reasons {
  display: flex;
  flex-direction: column;
}
:is(.home-section-6, #home-section-6) .home-section-6-copy {
  gap: 2.5625rem;
}
:is(.home-section-6, #home-section-6) .home-section-6-intro {
  gap: 0.875rem;
}
:is(.home-section-6, #home-section-6) .home-section-6-heading {
  font-size: 2.625rem;
  line-height: 0.85;
  font-family: var(--font-secondary);
  color: var(--color-white);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}
:is(.home-section-6, #home-section-6) .home-section-6-content {
  font-weight: 500;
}
:is(.home-section-6, #home-section-6) .home-section-6-reasons {
  gap: 1.25rem;
}
:is(.home-section-6, #home-section-6) .home-section-6-reasons-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
:is(.home-section-6, #home-section-6) .home-section-6-reasons-heading {
  font-size: 1.4375rem;
  line-height: 1.15;
  font-family: var(--font-accent);
  color: var(--color-blue-100);
  font-weight: 700;
  flex: 0 0 auto;
  margin: 0;
}
:is(.home-section-6, #home-section-6) .home-section-6-reasons-line {
  flex: 1 1 auto;
  block-size: 0.0625rem;
  background-color: var(--color-gray);
  opacity: 0.3;
}
:is(.home-section-6, #home-section-6) .home-section-6-reasons-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding-inline-start: 1.6875rem;
  font-size: 1.125rem;
  line-height: 1.5;
}
:is(.home-section-6, #home-section-6) .home-section-6-image {
  inline-size: 100%;
  aspect-ratio: 538/599;
  margin: 0;
  border-radius: 0.625rem;
  overflow: hidden;
}
:is(.home-section-6, #home-section-6) .home-section-6-picture,
:is(.home-section-6, #home-section-6) .home-section-6-image-element {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
:is(.home-section-6, #home-section-6) .home-section-6-image-element {
  object-fit: cover;
}
@media only screen and (min-width: 48rem) {
  :is(.home-section-6, #home-section-6) {
    --home-section-6-next-overlap: 31.6875rem;
    margin-block-start: -13.224472rem;
  }
  :is(.home-section-6, #home-section-6) .home-section-6-container {
    --container-gutter: 3.0625rem;
    gap: 5.625rem;
    padding-block-start: 19.5rem;
  }
  :is(.home-section-6, #home-section-6) .home-section-6-copy {
    inline-size: 36.875rem;
    margin-inline: auto;
  }
  :is(.home-section-6, #home-section-6) .home-section-6-intro {
    inline-size: 36.3125rem;
  }
  :is(.home-section-6, #home-section-6) .home-section-6-heading {
    font-size: 4.375rem;
    line-height: 0.85;
  }
  :is(.home-section-6, #home-section-6) .home-section-6-reasons-heading {
    font-size: 1.5625rem;
    line-height: 1.15;
  }
  :is(.home-section-6, #home-section-6) .home-section-6-reasons-list {
    grid-template-columns: 15.5rem 18.8125rem;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: 2.5625rem;
  }
  :is(.home-section-6, #home-section-6) .home-section-6-image {
    inline-size: 33.625rem;
    margin-inline: auto;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.home-section-6, #home-section-6) {
    --home-section-6-next-overlap: 53.25rem;
    --home-section-6-background-end-inset: 52.8125rem;
    margin-block-start: -10.1rem;
  }
  :is(.home-section-6, #home-section-6) .home-section-6-container {
    --container-gutter: 14.0625rem;
    padding-block-start: 17.6875rem;
    transform: translateX(-1.5rem);
  }
  :is(.home-section-6, #home-section-6) .home-section-6-copy,
  :is(.home-section-6, #home-section-6) .home-section-6-intro {
    inline-size: 100%;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.home-section-6, #home-section-6) {
    --home-section-6-next-overlap: 21.3125rem;
    --home-section-6-background-end-inset: 21.125rem;
    margin-block-start: -11.081rem;
  }
  :is(.home-section-6, #home-section-6) .home-section-6-container {
    --container-gutter: 5.625rem;
    display: grid;
    grid-template-columns: 33.625rem 36.875rem;
    align-items: center;
    gap: 5.625rem;
    padding-block-start: 20.0625rem;
    transform: none;
  }
  :is(.home-section-6, #home-section-6) .home-section-6-copy {
    grid-column: 2;
    grid-row: 1;
  }
  :is(.home-section-6, #home-section-6) .home-section-6-image {
    grid-column: 1;
    grid-row: 1;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.home-section-6, #home-section-6) {
    --home-section-6-next-overlap: 21.75rem;
    --home-section-6-background-end-inset: 21.6875rem;
    margin-block-start: -10.0995rem;
  }
  :is(.home-section-6, #home-section-6) .home-section-6-container {
    --container-gutter: 21.875rem;
    padding-block-start: 20.625rem;
  }
}

/*
 * Home Section 7: Offers, maintenance plans, and FAQs
-------------------------------------------------------------------------------- */
:is(.home-section-7, #home-section-7) {
  position: relative;
  z-index: 1;
  margin-block-start: -17.595625rem;
  padding-block: 24.875rem 10rem;
  overflow: hidden;
  color: var(--color-white);
}
:is(.home-section-7, #home-section-7) .home-section-7-background {
  position: absolute;
  inset-inline: 0;
  z-index: -2;
  pointer-events: none;
}
:is(.home-section-7, #home-section-7) .home-section-7-background-offers {
  inset-block-start: 0;
  block-size: 24.5rem;
  background: linear-gradient(180deg, #0059c9 0%, #5d467d 52%, #ed1c24 100%);
}
:is(.home-section-7, #home-section-7) .home-section-7-background-faq {
  inset-block-start: 24.4375rem;
  inset-block-end: 0;
  background: linear-gradient(180deg, #ed1c24 0%, #6b3a78 47%, #0059c9 100%);
}
:is(.home-section-7, #home-section-7) .home-section-7-word {
  font-size: 5.75rem;
  line-height: 0.7;
  font-family: var(--font-secondary);
  color: var(--color-red-200);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  text-wrap: nowrap;
  position: absolute;
  inset-block-start: 19.6875rem;
  inset-inline-start: calc(50% - 11.5rem);
  z-index: -1;
  margin: 0;
  line-height: 1;
  transform: none;
  pointer-events: none;
}
:is(.home-section-7, #home-section-7) .home-section-7-offers,
:is(.home-section-7, #home-section-7) .home-section-7-faq {
  position: relative;
  margin-inline: auto;
}
:is(.home-section-7, #home-section-7) .home-section-7-offers {
  --container-gutter: 0;
  display: flex;
  inline-size: 19.3125rem;
  flex-direction: column;
  gap: 1.25rem;
}
:is(.home-section-7, #home-section-7) .home-section-7-coupon-group {
  inline-size: 100%;
}
:is(.home-section-7, #home-section-7) .home-section-7-badge {
  inset-block-start: -4.1875rem;
  inline-size: 7.55rem;
  block-size: 7.55rem;
}
:is(.home-section-7, #home-section-7) .home-section-7-badge-image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
:is(.home-section-7, #home-section-7) .coupon-badge-label {
  inset-block-start: 1.8125rem;
  inline-size: 4.875rem;
  font-size: 1.4rem;
  line-height: 1.25rem;
}
:is(.home-section-7, #home-section-7) .coupon-badge-label span {
  display: block;
  margin-block-end: 0.125rem;
}
:is(.home-section-7, #home-section-7) .home-section-7-coupons {
  --swiper-pagination-bottom: .9375rem;
  --swiper-pagination-bullet-size: .375rem;
  --swiper-pagination-bullet-horizontal-gap: .5775rem;
  --swiper-pagination-bullet-inactive-color: var(--color-white);
  --swiper-pagination-bullet-inactive-opacity: .45;
  inline-size: 100%;
}
:is(.home-section-7, #home-section-7) .home-section-7-coupon-slider-wrapper {
  align-items: stretch;
}
:is(.home-section-7, #home-section-7) .home-section-7-coupon-slide,
:is(.home-section-7, #home-section-7) .home-section-7-coupon {
  display: flex;
  block-size: auto;
}
:is(.home-section-7, #home-section-7) .home-section-7-coupon-container {
  --coupon-border-width: .1875rem;
  block-size: 100%;
  min-block-size: 26.5rem;
  padding: 4.3125rem 1.5625rem 3.125rem;
  border-radius: 0.4375rem;
}
:is(.home-section-7, #home-section-7) .home-section-7-coupon-title {
  font-size: 2.625rem;
  line-height: 0.85;
  inline-size: 15.25rem;
  margin-block-end: 0.5rem;
  text-wrap: balance;
}
:is(.home-section-7, #home-section-7) .home-section-7-coupon-type {
  font-size: 1.125rem;
  line-height: 1.15;
  inline-size: 15.25rem;
  margin-block-end: 0.3125rem;
}
:is(.home-section-7, #home-section-7) .home-section-7-coupon-description {
  font-size: 1rem;
  line-height: 1.5;
  inline-size: 15.25rem;
  margin-block-end: 0.75rem;
}
:is(.home-section-7, #home-section-7) .home-section-7-coupon-cta {
  margin-block-end: 1.625rem;
}
:is(.home-section-7, #home-section-7) .home-section-7-coupon-expiration {
  font-size: 0.875rem;
  line-height: 1;
}
:is(.home-section-7, #home-section-7) .home-section-7-pagination.swiper-pagination {
  position: static;
  display: flex;
  inline-size: 100%;
  block-size: var(--swiper-pagination-bullet-size);
  margin-block-start: var(--swiper-pagination-bottom);
  transform: none;
}
:is(.home-section-7, #home-section-7) .home-section-7-pagination .swiper-pagination-bullet {
  background-color: var(--swiper-pagination-bullet-inactive-color);
  opacity: var(--swiper-pagination-bullet-inactive-opacity);
}
:is(.home-section-7, #home-section-7) .home-section-7-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-blue-200);
  opacity: 1;
}
:is(.home-section-7, #home-section-7) .home-section-7-maintenance {
  display: flex;
  flex-direction: column;
  padding: 3.125rem 2.40625rem 2.625rem;
  border: 0.1875rem solid transparent;
  border-radius: 0.4375rem;
  background: linear-gradient(var(--color-navy-100), var(--color-navy-100)) padding-box, linear-gradient(90deg, var(--color-blue-200), var(--color-red-200)) border-box;
}
:is(.home-section-7, #home-section-7) .home-section-7-maintenance-header {
  margin-block-end: 2.5rem;
}
:is(.home-section-7, #home-section-7) .home-section-7-maintenance-eyebrow {
  font-size: 1.25rem;
  line-height: 1;
  font-family: var(--font-secondary);
  color: var(--color-blue-100);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 0.4375rem;
}
:is(.home-section-7, #home-section-7) .home-section-7-maintenance-heading {
  font-size: 2.625rem;
  line-height: 0.85;
  font-family: var(--font-secondary);
  color: var(--color-white);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  inline-size: calc(100% + 0.75rem);
  max-inline-size: none;
  margin: 0;
  text-wrap: balance;
}
:is(.home-section-7, #home-section-7) .home-section-7-plans {
  display: grid;
  gap: 2.7rem;
}
:is(.home-section-7, #home-section-7) .home-section-7-plan-label {
  font-size: 1rem;
  line-height: 1;
  font-family: var(--font-secondary);
  color: var(--color-white);
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-flex;
  inline-size: max-content;
  margin: 0 0 0.9375rem;
  padding-block: 0.2rem 0;
  padding-inline: 0.55rem;
  height: 21px;
  align-items: center;
  border-radius: 0.125rem;
  background-color: var(--color-red-200);
}
:is(.home-section-7, #home-section-7) .home-section-7-plan-title {
  font-size: 1.6875rem;
  line-height: 1;
  font-family: var(--font-accent);
  color: var(--color-white);
  font-weight: 800;
  margin: 0 0 0.4rem;
}
:is(.home-section-7, #home-section-7) .home-section-7-plan-pricing {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-block-end: 0.8rem;
  white-space: nowrap;
}
:is(.home-section-7, #home-section-7) .home-section-7-plan-price,
:is(.home-section-7, #home-section-7) .home-section-7-plan-old-price {
  font-size: 1.1875rem;
  line-height: 1;
  margin: 0;
  color: var(--color-blue-100);
}
:is(.home-section-7, #home-section-7) .home-section-7-plan-old-price {
  opacity: 0.38;
  text-decoration: line-through;
}
:is(.home-section-7, #home-section-7) .home-section-7-plan-description {
  font-size: 1rem;
  line-height: 1.5;
}
:is(.home-section-7, #home-section-7) .home-section-7-maintenance-footer {
  margin-block-start: 1.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 0.0625rem solid rgba(255, 255, 255, 0.14);
}
:is(.home-section-7, #home-section-7) .home-section-7-maintenance-link {
  font-size: 1rem;
  line-height: 1.2;
  font-family: var(--font-accent);
  color: var(--color-white);
  text-transform: uppercase;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  inline-size: 100%;
  text-decoration: none;
}
:is(.home-section-7, #home-section-7) .home-section-7-maintenance-link::after {
  content: "";
  display: grid;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background-color: var(--color-blue-300);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.6557 6.01225L15.5954 5.95197L15.6009 5.94656L9.65429 -8.33662e-06L8.3017 1.35258L11.8553 4.90622L0.000395254 4.69701L0.0352133 6.64438L12.0086 6.8557L8.46213 10.4022L9.86396 11.804L15.6557 6.01225Z' fill='%23F5F5F5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1rem 0.75rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-white);
}
:is(.home-section-7, #home-section-7) .home-section-7-maintenance-link:is(:hover, :focus)::after {
  background-color: var(--color-red-200);
}
:is(.home-section-7, #home-section-7) .home-section-7-faq {
  --container-gutter: 0;
  display: grid;
  inline-size: 19.375rem;
  margin-block-start: 7rem;
  gap: 2.5rem;
}
:is(.home-section-7, #home-section-7) .home-section-7-faq-header {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1.25rem;
}
:is(.home-section-7, #home-section-7) .home-section-7-faq-heading {
  font-size: 3rem;
  line-height: 0.85;
  font-family: var(--font-secondary);
  color: var(--color-white);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  margin: 0;
}
:is(.home-section-7, #home-section-7) .home-section-7-faq-heading-line {
  display: block;
  white-space: nowrap;
}
:is(.home-section-7, #home-section-7) .home-section-7-faq-list,
:is(.home-section-7, #home-section-7) .home-section-7-faq-item {
  inline-size: 100%;
}
:is(.home-section-7, #home-section-7) .home-section-7-faq-item {
  margin: 0;
  padding: 0;
  border: 0;
  border-block-end: 0.0625rem solid rgba(255, 255, 255, 0.16);
}
:is(.home-section-7, #home-section-7) .home-section-7-faq-question {
  font-size: 1.5rem;
  line-height: 1.25;
  font-family: var(--font-accent);
  color: var(--color-white);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin: 0;
  padding-block: 1.875rem;
  overflow-wrap: anywhere;
  cursor: pointer;
}
:is(.home-section-7, #home-section-7) .home-section-7-faq-question::after {
  content: "";
  display: block;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: var(--color-blue-300);
  border: 1px solid #1768DD;
  background-image: url("/wp-content/themes/1p21-boilerplate/images/icon-accordion-chevron.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.9375rem 0.5rem;
  transition: transform 0.25s ease-in-out;
}
:is(.home-section-7, #home-section-7) .home-section-7-faq-question.open {
  color: var(--color-white);
}
:is(.home-section-7, #home-section-7) .home-section-7-faq-question.open::after {
  content: "";
  transform: rotate(180deg);
}
:is(.home-section-7, #home-section-7) .home-section-7-faq-item:first-child .home-section-7-faq-question {
  padding-block-start: 0;
}
:is(.home-section-7, #home-section-7) .home-section-7-faq-answer {
  padding-block-end: 1.875rem;
}
:is(.home-section-7, #home-section-7) .home-section-7-faq-answer-content {
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 400;
}
@media only screen and (min-width: 48rem) {
  :is(.home-section-7, #home-section-7) {
    margin-block-start: -31.6875rem;
    padding-block: 44.9375rem 6rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-background-offers {
    block-size: 44.0625rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-background-faq {
    inset-block-start: 44.0625rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-word {
    inset-block-start: 34.8125rem;
    inset-inline-start: calc(50% - 25rem);
    font-size: 12.5rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-offers {
    inline-size: 41.8125rem;
    gap: 1.625rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-coupon-group {
    inline-size: 26.875rem;
    margin-inline: auto;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-badge {
    inset-block-start: -5.375rem;
    inline-size: 9.4375rem;
    block-size: 9.4375rem;
  }
  :is(.home-section-7, #home-section-7) .coupon-badge-label {
    inset-block-start: 2.375rem;
    inline-size: 5.75rem;
    font-size: 1.75rem;
    line-height: 1.5625rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-coupon-container {
    --coupon-border-width: .25rem;
    min-block-size: 35.9375rem;
    padding: 7.25rem 2.8125rem 4.0625rem;
    border-radius: 0.625rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-coupon-title {
    font-size: 3.5rem;
    line-height: 0.85;
    inline-size: 21.25rem;
    margin-block-end: 0.625rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-coupon-type {
    font-size: 1.4375rem;
    line-height: 1.15;
    inline-size: 21.25rem;
    margin-block-end: 0.4375rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-coupon-description {
    font-size: 1.125rem;
    line-height: 1.5;
    inline-size: 21.25rem;
    margin-block-end: 1.125rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-coupon-cta {
    margin-block-end: 2rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-coupon-expiration {
    font-size: 1rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-pagination {
    --swiper-pagination-bottom: 1.375rem;
    --swiper-pagination-bullet-size: .4125rem;
    --swiper-pagination-bullet-horizontal-gap: .825rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-maintenance {
    padding: 4.6875rem 3.4375rem 4.0625rem;
    border-width: 0.25rem;
    border-radius: 0.625rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-maintenance-header {
    margin-block-end: 2.8125rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-maintenance-eyebrow {
    margin-block-end: 0.5625rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-maintenance-heading {
    font-size: 3.5rem;
    line-height: 0.85;
    inline-size: 100%;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-plans {
    grid-template-columns: repeat(2, 15.625rem);
    gap: 3.875rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-plan-label {
    font-size: 1.125rem;
    margin-block-end: 1.25rem;
    padding: 0.5rem 0.75rem 0.4375rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-plan-title {
    font-size: 2.0625rem;
    line-height: 1;
    margin-block-end: 0.5rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-plan-pricing {
    gap: 0.5rem;
    margin-block-end: 1.125rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-plan-price,
  :is(.home-section-7, #home-section-7) .home-section-7-plan-old-price {
    font-size: 1.4375rem;
    line-height: 1;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-plan-description {
    font-size: 1rem;
    line-height: 1.5;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-maintenance-footer {
    margin-block-start: 2rem;
    padding-block-start: 2rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-maintenance-link {
    font-size: 1.0625rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-maintenance-link::after {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    mask-size: 0.9375rem auto;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-faq {
    inline-size: 38.125rem;
    margin-block-start: 6.8375rem;
    gap: 5.625rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-faq-header {
    gap: 1.875rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-faq-heading {
    font-size: 5.3125rem;
    line-height: 0.85;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.home-section-7, #home-section-7) {
    margin-block-start: -53.25rem;
    padding-block: 69.5625rem 3.125rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-background-offers {
    block-size: 69.5625rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-background-faq {
    inset-block-start: 68.6875rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-word {
    inset-block-start: 57.5rem;
    inset-inline-start: calc(50% - 37.5rem);
    font-size: 18.75rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-offers {
    inline-size: 54.6875rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-coupon-group {
    inline-size: 54.6875rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-coupons {
    inline-size: 100%;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-maintenance {
    padding-inline: 7.625rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-plans {
    grid-template-columns: 17.8125rem 17.8125rem;
    gap: 3.75rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-faq {
    inline-size: 45rem;
    margin-block-start: 8.8375rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-faq-header {
    gap: 1.5625rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-faq-question {
    gap: 0.5rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.home-section-7, #home-section-7) {
    margin-block-start: -21.3125rem;
    padding-block: 41.375rem 6.25rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-background-offers {
    block-size: 47.6875rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-background-faq {
    inset-block-start: 47.6875rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-word {
    inset-block-start: 23.875rem;
    inset-inline-start: calc(50% - 45rem);
    font-size: 22.5rem;
    line-height: 31.25rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-offers {
    inline-size: 75.8125rem;
    flex-direction: row;
    align-items: stretch;
    gap: 0.9375rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-coupon-group {
    display: flex;
    inline-size: 26.875rem;
    min-block-size: 0;
    flex-direction: column;
    margin-inline: 0;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-coupons {
    display: flex;
    min-block-size: 0;
    flex: 1 1 auto;
    overflow: visible;
    clip-path: inset(0 0 -2rem);
  }
  :is(.home-section-7, #home-section-7) .home-section-7-coupon-slider-wrapper,
  :is(.home-section-7, #home-section-7) .home-section-7-coupon-slide,
  :is(.home-section-7, #home-section-7) .home-section-7-coupon,
  :is(.home-section-7, #home-section-7) .home-section-7-coupon-container {
    block-size: 100%;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-pagination.swiper-pagination {
    position: absolute;
    inset-block-start: calc(100% + 1.375rem);
    inset-inline: 0;
    margin-block-start: 0;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-maintenance {
    inline-size: 48rem;
    padding-inline: 4.0625rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-faq {
    display: grid;
    grid-template-columns: 25.6875rem 44.875rem;
    align-items: start;
    inline-size: 76.1875rem;
    margin-block-start: 9.75rem;
    gap: 5.625rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-faq-header {
    align-items: flex-start;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-faq-heading {
    text-align: start;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-faq-heading-line {
    display: inline;
    white-space: normal;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-faq-heading-line + .home-section-7-faq-heading-line::before {
    content: " ";
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.home-section-7, #home-section-7) {
    margin-block-start: -21.75rem;
    padding-block: 44.6875rem 3.625rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-background-offers {
    block-size: 50.8125rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-background-faq {
    inset-block-start: 49.625rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-word {
    inset-block-start: 27.5rem;
    inset-inline-start: calc(50% - 54.0625rem);
    font-size: 27.1875rem;
    line-height: 31.25rem;
    transform: none;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-offers {
    inline-size: 76.75rem;
    gap: 1.875rem;
  }
  :is(.home-section-7, #home-section-7) .home-section-7-faq {
    margin-block-start: 10.0875rem;
  }
}

/* ================================================================================
Contact Template
================================================================================ */
/* Template Contact  https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/template/contact.md
-------------------------------------------------------------------------------- */
/*
Note: 
This file is for Contact Page only overrides for the contact information
For Contact Page only overrides for the contact informatio, apply styles to templates/template-contact.scss -> #contact-page
For styles applied globally for the contact information, apply styles to layouts/layout-contact.scss
For Footer section only overrides for the contact informatio, apply styles to layout/layout-footer.scss -> .footer-contact styles section
-------------------------------------------------------------------------------- */
/*
* Contact Related Classes
-------------------------------------------------------------------------------- */
/* Add helper classes specific to this template as needed */
/*
* Contact Template
-------------------------------------------------------------------------------- */
:is(.contact-page, #contact-page) .contact-block:is(.contact-special) {
  justify-self: center;
}
@media only screen and (max-width: 74.9375rem) {
  :is(.contact-page, #contact-page) .contact-blocks {
    inline-size: max-content;
    max-inline-size: 100%;
    margin-inline: auto;
  }
}
:is(.contact-page, #contact-page) .contact-block:is(.contact-number, .contact-numbers) {
  /* Phone number - Contact Block Grid */
  /*
  @Variation A: Separate blocks
  Requires PHP: templates/template-contact.php - @Variation A: Separate blocks
  Requires SCSS: scss/layotemplatesuts/_contact.scss - @numberColumn / @Variation A: Separate blocks
  */
}
:is(.contact-page, #contact-page) .contact-block.contact-number {
  /* Phone number - Contact Block Grid */
  /*
  @Variation A: Separate blocks
  Requires PHP: templates/template-contact.php - @Variation A: Separate blocks
  Requires SCSS: scss/layotemplatesuts/_contact.scss - @numberColumn / @Variation A: Separate blocks
  */
}
:is(.contact-page, #contact-page) .contact-block.contact-numbers {
  /*
  @Variation B: One block
  Requires PHP: templates/template-contact.php - @Variation B: One block
  Requires SCSS: scss/layotemplatesuts/_contact.scss - @numbersColumn / @Variation B: One block
  */
}
:is(.contact-page, #contact-page) .contact-block.contact-location {
  /* Location - Contact Block Grid */
  /*
  @Variation A: Separate blocks
  Requires PHP: layouts/layout-contact.php - @Variation A: Separate blocks
  Requires SCSS: scss/layouts/_contact.scss - @Variation A: Separate blocks
  */
}
:is(.contact-page, #contact-page) .contact-block.contact-locations {
  /* Locations - Contact Block Grid */
  /*
  @Variation B: One block
  Requires PHP: layouts/layout-contact.php - @Variation B: One block
  Requires SCSS: scss/layouts/_contact.scss - @Variation B: One block
  */
}
/* Oklahoma HVAC contact page
-------------------------------------------------------------------------------- */
#contact-page {
  padding-block: 0 4.875rem;
}
#contact-page > .section-container {
  --container-gutter: 1.5625rem;
}
#contact-page .section-blocks {
  gap: 0;
  inline-size: 100%;
  max-inline-size: none;
}
#contact-page .contact-page-image {
  aspect-ratio: 16/9;
  inline-size: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 0.625rem;
}
#contact-page .contact-page-picture,
#contact-page .contact-page-image-element {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
#contact-page .contact-page-image-element {
  object-fit: cover;
  object-position: center;
}
#contact-page .section-contact {
  margin-block-start: 4rem;
}
#contact-page .contact-blocks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  inline-size: 100%;
  max-inline-size: none;
  margin: 0;
}
#contact-page .contact-block {
  min-inline-size: 0;
}
#contact-page .contact-block-title,
#contact-page .location-title {
  margin: 0;
  text-align: start;
}
#contact-page .contact-location {
  display: grid;
  gap: 0.625rem;
  align-content: start;
}
@media only screen and (max-width: 47.9375rem) {
  #contact-page .contact-location {
    justify-content: center;
    align-content: center;
  }
}
#contact-page .location-title {
  font-family: var(--font-secondary);
  font-size: 2.375rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-blue-400);
}
@media only screen and (max-width: 47.9375rem) {
  #contact-page .location-title {
    margin-inline: auto;
  }
}
#contact-page .location-content {
  display: grid;
  gap: 0.625rem;
}
#contact-page .location-address {
  margin: 0;
  font-size: 1.125rem;
  font-style: normal;
  line-height: 1.3;
  color: var(--color-black);
}
#contact-page .location-directions {
  margin: 0;
}
#contact-page .location-directions-button {
  min-inline-size: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-accent);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
  text-decoration: underline;
  text-transform: uppercase;
  color: var(--color-blue-300);
}
#contact-page .location-numbers {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 1.375rem 0 0;
}
#contact-page .location-number,
#contact-page .location-number-link {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
#contact-page .location-number-icon {
  flex: 0 0 auto;
  inline-size: 1.1875rem;
  block-size: 1.1875rem;
  color: var(--color-red-200);
}
#contact-page .location-number-link {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  color: var(--color-blue-400);
}
#contact-page .contact-list,
#contact-page .contact-social {
  align-self: start;
}
#contact-page .contact-list .contact-block-title,
#contact-page .contact-social-title {
  font-family: var(--font-secondary);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-blue-300);
}
@media only screen and (max-width: 47.9375rem) {
  #contact-page .contact-list .contact-block-title,
  #contact-page .contact-social-title {
    margin-inline: auto;
  }
}
#contact-page .contact-list .list-block-items {
  margin-block-start: 0.625rem;
}
#contact-page .contact-list .contact-block-content {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--color-black);
}
#contact-page .contact-list .contact-block-content p {
  margin: 0;
}
#contact-page .contact-social {
  display: grid;
  gap: 0.875rem;
}
@media only screen and (max-width: 47.9375rem) {
  #contact-page .contact-social {
    justify-content: center;
  }
}
#contact-page .contact-social-content > div,
#contact-page .contact-social .social {
  display: flex;
  align-items: center;
  gap: 1rem;
}
#contact-page .contact-social .social {
  margin: 0;
  padding: 0;
  list-style: none;
}
#contact-page .contact-social .social-item-link {
  display: grid;
  place-items: center;
  inline-size: 2.625rem;
  block-size: 2.625rem;
  border-radius: 50%;
  background: var(--color-blue-400);
  color: var(--color-white);
}
#contact-page .contact-social .social-item-link-svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}
#contact-page .contact-social svg {
  inline-size: 100%;
  block-size: 100%;
}
@media only screen and (min-width: 48rem) {
  #contact-page {
    padding-block-end: 6.25rem;
  }
  #contact-page > .section-container {
    --container-gutter: 3.125rem;
  }
  #contact-page .contact-page-image {
    aspect-ratio: 2/1;
  }
  #contact-page .section-contact {
    margin-block-start: 5rem;
  }
  #contact-page .contact-blocks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 4rem;
  }
}
@media only screen and (min-width: 75rem) {
  #contact-page {
    padding-block-end: 9.25rem;
  }
  #contact-page > .section-container {
    --container-gutter: 5rem;
  }
  #contact-page .contact-page-image {
    aspect-ratio: 1230/536;
  }
  #contact-page .section-contact {
    margin-block-start: 6.25rem;
  }
  #contact-page .contact-blocks {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(10rem, 0.85fr) auto;
    column-gap: clamp(2rem, 6.5625vi, 7.875rem);
    row-gap: 3rem;
  }
  #contact-page .location-address {
    font-size: 1.25rem;
  }
  #contact-page .location-number-link {
    font-size: 1.375rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  #contact-page > .section-container {
    --container-gutter: 5.625rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  #contact-page > .section-container {
    --container-gutter: 21.625rem;
  }
  #contact-page .section-contact {
    margin-block-start: 7.8125rem;
  }
}

/* ================================================================================
* 404
================================================================================ */
/* Template 404 https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/template/404.md
-------------------------------------------------------------------------------- */
/*
* 404 Related Classes
-------------------------------------------------------------------------------- */
/* Add helper classes specific to this template as needed */
/*
* 404 Template
-------------------------------------------------------------------------------- */
:is(.error404-page, #error404-page) {
  text-align: center;
}
/* Oklahoma HVAC 404 page
-------------------------------------------------------------------------------- */
#error404-page {
  display: grid;
  align-items: center;
  min-block-size: 28.6875rem;
  padding-block: clamp(5rem, 13vw, 9.8125rem) clamp(5rem, 10.5vw, 7.8125rem);
  background-color: var(--color-white);
  text-align: center;
}
#error404-page > .section-container {
  --container-gutter: 1.5625rem;
}
#error404-page .section-blocks {
  inline-size: 100%;
  max-inline-size: 57.375rem;
  gap: 0.8125rem;
  justify-items: center;
}
#error404-page .section-heading {
  margin: 0;
  font-size: clamp(3.75rem, 8.5vw, 5.3125rem);
  line-height: 0.85;
  font-family: var(--font-secondary);
  color: var(--color-blue-400);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
}
#error404-page .section-content {
  inline-size: 100%;
  max-inline-size: 27.8125rem;
}
#error404-page .error404-content {
  font-size: 1.125rem;
  line-height: 1.5;
  font-family: var(--font-primary);
  color: var(--color-dark);
  font-weight: 400;
  text-align: center;
}
#error404-page .section-buttons {
  inline-size: min(15.283rem, 100%);
}
#error404-page .section-buttons .button {
  inline-size: 100%;
}
@media only screen and (min-width: 75rem) {
  #error404-page {
    min-block-size: 28.6875rem;
    padding-block: 8.0625rem 7.8125rem;
  }
}

/* ================================================================================
* About Template
================================================================================ */
/* About Template
-------------------------------------------------------------------------------- */
body.onep21-template-about .template-wrapper {
  overflow: clip;
}

:is(#about-page, .about-page) {
  padding-block-end: 0;
}

/* About Banner
-------------------------------------------------------------------------------- */
#about-banner {
  --scheme-bg: var(--color-navy-100);
  --scheme-fg: var(--color-white);
  --scheme-sp: var(--color-blue-100);
}
#about-banner .about-banner-main {
  padding-block: 4.5rem 2.5rem;
  background: linear-gradient(180deg, #001837 0%, #0059c9 65.385%, var(--color-white) 98.077%);
}
#about-banner .about-banner-blocks {
  display: grid;
  gap: 2.5rem;
}
#about-banner .about-banner-intro {
  max-inline-size: 40rem;
}
#about-banner .about-banner-heading {
  font-size: 2.625rem;
  line-height: 0.85;
  font-family: var(--font-secondary);
  color: var(--color-white);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: start;
  margin-block: 0 1.25rem;
  text-wrap: balance;
}
#about-banner .about-banner-buttons {
  margin-block-end: 2.5rem;
}
#about-banner .about-banner-buttons .button {
  min-inline-size: 0;
}
#about-banner .about-banner-content {
  font-size: 1.125rem;
  line-height: 1.5;
}
#about-banner .about-banner-services {
  padding: 2rem 1.75rem;
  border: 0.25rem solid transparent;
  border-radius: 0.625rem;
  background: linear-gradient(var(--color-navy-100), var(--color-navy-100)) padding-box, linear-gradient(90deg, var(--color-blue-200), var(--color-red-200)) border-box;
  color: var(--color-white);
}
#about-banner .about-banner-services-heading {
  margin-block-end: 1.25rem;
  color: var(--color-blue-100);
}
#about-banner .about-banner-service-list {
  display: grid;
  gap: 1.25rem;
}
#about-banner .about-banner-service-heading {
  margin-block-end: 0.625rem;
  color: var(--color-white);
}
#about-banner .about-banner-service-content {
  font-size: 1.125rem;
  line-height: 1.5;
}
#about-banner .about-banner-gallery {
  margin-block-start: 4.5rem;
}
#about-banner .about-gallery-slider {
  --about-gallery-gap: 1rem;
  block-size: 20.625rem;
  overflow: visible;
}
#about-banner .about-gallery-slider .swiper-wrapper {
  inline-size: max-content;
  align-items: center;
  gap: var(--about-gallery-gap);
  transition: none !important;
  will-change: transform;
}
#about-banner .about-gallery-slide {
  flex: 0 0 auto;
  inline-size: 15rem;
  block-size: 15rem;
  margin: 0 !important;
}
#about-banner .about-gallery-slide-variant-1,
#about-banner .about-gallery-slide-variant-3,
#about-banner .about-gallery-slide-variant-5 {
  block-size: 11.75rem;
}
#about-banner .about-gallery-slide-variant-2,
#about-banner .about-gallery-slide-variant-6 {
  block-size: 18.75rem;
}
#about-banner .about-gallery-slide-variant-4 {
  block-size: 20.625rem;
}
#about-banner .about-gallery-image,
#about-banner .about-gallery-image picture,
#about-banner .about-gallery-image-itself {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
#about-banner .about-gallery-image {
  margin: 0;
}
#about-banner .about-gallery-image-itself {
  border-radius: 0.625rem;
  object-fit: cover;
}
@media only screen and (min-width: 48rem) {
  #about-banner .about-gallery-slider {
    --about-gallery-gap: 1.25rem;
  }
  #about-banner .about-banner-main {
    padding-block-start: 6.25rem;
  }
  #about-banner .about-banner-heading {
    font-size: 4.0625rem;
    line-height: 0.85;
  }
  #about-banner .about-banner-services {
    padding: 3rem;
  }
  #about-banner .about-banner-gallery {
    margin-block-start: 5.5rem;
  }
  #about-banner .about-gallery-slider {
    block-size: 25rem;
  }
  #about-banner .about-gallery-slide {
    inline-size: 19.375rem;
    block-size: 19.375rem;
  }
  #about-banner .about-gallery-slide-variant-1,
  #about-banner .about-gallery-slide-variant-3,
  #about-banner .about-gallery-slide-variant-5 {
    block-size: 14.375rem;
  }
  #about-banner .about-gallery-slide-variant-2,
  #about-banner .about-gallery-slide-variant-6 {
    block-size: 22.5rem;
  }
  #about-banner .about-gallery-slide-variant-4 {
    block-size: 25rem;
  }
}
@media only screen and (min-width: 75rem) {
  #about-banner .about-gallery-slider {
    --about-gallery-gap: 1.5rem;
  }
  #about-banner .about-banner-main {
    padding-block-start: 7.5rem;
  }
  #about-banner .about-banner-blocks {
    grid-template-columns: minmax(0, 1.35fr) minmax(21rem, 0.9fr);
    align-items: start;
    gap: 4rem;
  }
  #about-banner .about-banner-services {
    padding: 3.25rem 2.75rem;
  }
  #about-banner .about-banner-gallery {
    margin-block-start: 6.5rem;
  }
  #about-banner .about-gallery-slider {
    block-size: 29.5rem;
  }
  #about-banner .about-gallery-slide {
    inline-size: 21.875rem;
  }
  #about-banner .about-gallery-slide-variant-1,
  #about-banner .about-gallery-slide-variant-3,
  #about-banner .about-gallery-slide-variant-5 {
    block-size: 17.5rem;
  }
  #about-banner .about-gallery-slide-variant-2,
  #about-banner .about-gallery-slide-variant-6 {
    block-size: 26.5rem;
  }
  #about-banner .about-gallery-slide-variant-4 {
    block-size: 29.5rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  #about-banner .about-gallery-slider {
    --about-gallery-gap: 1.875rem;
  }
  #about-banner .about-banner-blocks {
    gap: 7rem;
  }
  #about-banner .about-banner-gallery {
    margin-block-start: 7rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  #about-banner .about-banner-main {
    padding-block: 10.3125rem 1.0625rem;
  }
  #about-banner .about-banner-blocks {
    grid-template-columns: 40rem 27.3125rem;
    gap: 9.4375rem;
  }
  #about-banner .about-banner-heading {
    font-size: 5.3125rem;
    line-height: 0.85;
    margin-block-end: 0.796875rem;
  }
  #about-banner .about-banner-buttons {
    margin-block-end: 3.125rem;
  }
  #about-banner .about-banner-services {
    min-block-size: 29.5625rem;
    margin-block-start: -0.8125rem;
    padding: 3.5rem 3.5625rem;
  }
  #about-banner .about-banner-gallery {
    margin-block-start: 7.8125rem;
  }
  #about-banner .about-gallery-slider {
    block-size: 34rem;
  }
  #about-banner .about-gallery-slide {
    inline-size: 24.25rem;
  }
  #about-banner .about-gallery-slide-variant-1 {
    block-size: 18.75rem;
  }
  #about-banner .about-gallery-slide-variant-3,
  #about-banner .about-gallery-slide-variant-5 {
    block-size: 19.25rem;
  }
  #about-banner .about-gallery-slide-variant-2,
  #about-banner .about-gallery-slide-variant-6 {
    block-size: 30.25rem;
  }
  #about-banner .about-gallery-slide-variant-4 {
    inline-size: 25.5rem;
    block-size: 34rem;
  }
}
@media only screen and (max-width: 47.9375rem) {
  #about-banner .about-banner-heading {
    text-align: center;
  }
  #about-banner .about-banner-buttons {
    display: flex;
    justify-content: center;
  }
}

/* About Content Area
-------------------------------------------------------------------------------- */
#about-content-area {
  --scheme-bg: var(--color-white);
  --responsive-background-bg-position: center bottom;
  --responsive-background-bg-size: cover;
  min-block-size: 76rem;
  padding-block: 4.5rem 13.75rem;
  background-color: var(--color-white);
}
#about-content-area::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 19.947917vi;
  z-index: -2;
  block-size: 35.520833vi;
  background: linear-gradient(180deg, var(--color-white) 2.1%, #8ad5fb 100%);
  pointer-events: none;
}
#about-content-area .about-content-grid {
  display: grid;
  gap: 4rem;
}
#about-content-area .about-content-services,
#about-content-area .about-content-main {
  max-inline-size: 40rem;
}
#about-content-area .about-content-services-heading {
  margin-block-end: 1.25rem;
  color: var(--color-blue-300);
}
#about-content-area .about-content-heading {
  margin-block-end: 0.9375rem;
  color: var(--color-blue-300);
}
#about-content-area .about-content-service-list {
  display: grid;
  gap: 1.25rem;
}
#about-content-area .about-content-service-heading,
#about-content-area .about-content-feature-heading {
  margin-block-end: 0.625rem;
  color: var(--color-blue-400);
}
#about-content-area .about-content-service-copy,
#about-content-area .about-content-copy,
#about-content-area .about-content-feature-copy {
  font-size: 1.125rem;
  line-height: 1.5;
}
#about-content-area .about-content-visual-wrapper {
  justify-self: center;
  inline-size: min(100%, 29.125rem);
}
#about-content-area .about-content-visual {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
}
#about-content-area .about-content-image-frame {
  position: absolute;
  inset: auto;
  inset-inline-start: 6.813305%;
  inset-block-start: 5.905579%;
  display: block;
  inline-size: 87.830472%;
  block-size: 87.830472%;
  border-radius: 50%;
  overflow: hidden;
}
#about-content-area .about-content-image-frame picture,
#about-content-area .about-content-image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
#about-content-area .about-content-image {
  border-radius: 50%;
  object-fit: cover;
}
#about-content-area .about-content-graphic {
  position: absolute;
  inset: auto;
  inset-inline-start: 0;
  inset-block-start: 0;
  z-index: 2;
  inline-size: 89.511588%;
  block-size: 99.641202%;
}
#about-content-area .about-content-graphic-itself {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}
#about-content-area .about-content-badge {
  position: absolute;
  inset-inline-start: 71.738197%;
  inset-block-start: 35.791845%;
  z-index: 3;
  inline-size: 28.175536%;
}
#about-content-area .about-content-badge-itself {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
#about-content-area .about-content-features {
  display: grid;
  gap: 2rem;
  max-inline-size: 40rem;
}
#about-content-area .about-content-background {
  --responsive-background-bg-color: transparent;
  --responsive-background-bg-position: center bottom;
  --responsive-background-bg-size: cover;
  inset-block-start: auto;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 800/418;
  background-color: transparent;
}
#about-content-area .about-content-background .responsive-background-bg {
  background-repeat: no-repeat;
}
@media only screen and (min-width: 48rem) {
  #about-content-area {
    min-block-size: 88rem;
    padding-block: 6rem 25rem;
  }
  #about-content-area .about-content-grid {
    gap: 5rem;
  }
  #about-content-area .about-content-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
  }
  #about-content-area .about-content-background {
    aspect-ratio: 1200/628;
  }
}
@media only screen and (min-width: 75rem) {
  #about-content-area {
    min-block-size: 106.25rem;
    padding-block: 6.75rem 43rem;
  }
  #about-content-area .about-content-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(21rem, 0.8fr);
    grid-template-areas: "services visual" "main visual" "features visual";
    align-items: start;
    column-gap: 4.5rem;
    row-gap: 5rem;
  }
  #about-content-area .about-content-services {
    grid-area: services;
  }
  #about-content-area .about-content-main {
    grid-area: main;
  }
  #about-content-area .about-content-features {
    grid-area: features;
  }
  #about-content-area .about-content-visual-wrapper {
    grid-area: visual;
    position: sticky;
    inset-block-start: 11rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  #about-content-area {
    min-block-size: 112rem;
    padding-block-end: 46rem;
  }
  #about-content-area .about-content-grid {
    grid-template-columns: minmax(0, 40rem) minmax(0, 29.125rem);
    column-gap: 7.625rem;
  }
  #about-content-area .about-content-background {
    aspect-ratio: 1800/1004;
  }
}
@media only screen and (min-width: 112.5rem) {
  #about-content-area {
    min-block-size: 115.5625rem;
    padding-block: 6.75rem 0;
  }
  #about-content-area .about-content-grid {
    grid-template-columns: 40rem 29.125rem;
    column-gap: 7.4375rem;
    row-gap: 0;
    padding-inline-start: 0.1875rem;
  }
  #about-content-area .about-content-main {
    margin-block-start: 3.75rem;
  }
  #about-content-area .about-content-features {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    margin-block-start: 1.875rem;
  }
  #about-content-area .about-content-feature:nth-child(n+3) {
    max-inline-size: 36.5625rem;
  }
  #about-content-area .about-content-background {
    aspect-ratio: 1800/1004;
  }
}
@media only screen and (min-width: 120rem) {
  #about-content-area .about-content-background {
    aspect-ratio: 1920/1004;
  }
}

/* ================================================================================
Coupons Template
================================================================================ */
/* Template Coupons - Grid
-------------------------------------------------------------------------------- */
/*
* Coupons Related Classes
-------------------------------------------------------------------------------- */
/* Add helper classes specific to this template as needed */
/*
* Coupons Template
-------------------------------------------------------------------------------- */
#coupons-page {
  padding-block: 0 5rem;
}
#coupons-page .coupons:is(.columns) {
  --columns-gap-x: 2.8125rem;
  --columns-gap-y: 2.8125rem;
}
#coupons-page .section-container {
  --container-gutter: .9375rem;
}
#coupons-page .section-blocks {
  max-inline-size: 19.3125rem;
  margin-inline: auto;
}
@media only screen and (min-width: 48rem) {
  #coupons-page {
    padding-block-end: 6.25rem;
  }
  #coupons-page .coupons:is(.columns) {
    --columns-number: 2;
  }
  #coupons-page .section-container {
    --container-gutter: 2.8125rem;
  }
  #coupons-page .section-blocks {
    max-inline-size: 41.4375rem;
  }
}
@media only screen and (min-width: 75rem) {
  #coupons-page {
    padding-block-end: 7rem;
  }
  #coupons-page .coupons:is(.columns) {
    --columns-number: 3;
  }
  #coupons-page .section-container {
    --container-gutter: 3.75rem;
  }
  #coupons-page .section-blocks {
    max-inline-size: 63.5625rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  #coupons-page {
    padding-block-end: 7.5rem;
  }
  #coupons-page .section-container {
    --container-gutter: 3.75rem;
  }
  #coupons-page .section-blocks {
    max-inline-size: 63.5625rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  #coupons-page {
    padding-block-end: 7.8125rem;
  }
  #coupons-page .coupons:is(.columns) {
    --columns-number: 4;
  }
  #coupons-page .section-container {
    --container-gutter: 3.75rem;
  }
  #coupons-page .section-blocks {
    max-inline-size: 85.5rem;
  }
}
/* ================================================================================
FAQs Template
================================================================================ */
/* FAQs Template
-------------------------------------------------------------------------------- */
#faqs-page {
  padding-block: 0 4.6875rem;
}
#faqs-page .section-container {
  --container-gutter: 1.25rem;
}
#faqs-page .section-blocks {
  inline-size: 100%;
  max-inline-size: 46.875rem;
  gap: 0;
}
#faqs-page .section-header:empty,
#faqs-page .section-content:empty {
  display: none;
}
#faqs-page .section-header,
#faqs-page .section-content {
  margin-block-end: 3rem;
}
#faqs-page .section-categories {
  inline-size: 100%;
}
#faqs-page .faq-category-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9375rem;
  inline-size: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media only screen and (max-width: 47.9375rem) {
  #faqs-page .faq-category-list {
    justify-content: center;
  }
}
#faqs-page .faq-category-item {
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
}
#faqs-page .faq-category-link {
  --button-height: 3.5625rem;
  --button-border-width: 1px;
  --button-padding-x: 1.1177em;
  background: var(--color-white);
  border-color: var(--color-blue-200);
  color: var(--color-blue-400);
  white-space: nowrap;
}
#faqs-page .faq-category-link:is(.is-active, :hover, :focus) {
  background: var(--color-blue-300);
  border-color: var(--color-blue-300);
  color: var(--color-white);
}
#faqs-page .section-categories + .faq-sections {
  margin-block-start: 4rem;
}
#faqs-page .faq-sections {
  display: grid;
  gap: 4.6875rem;
}
#faqs-page .faq-section {
  inline-size: 100%;
  scroll-margin-block-start: calc(var(--layout-header-height, 0px) + 2rem);
}
#faqs-page .faq-section-title {
  font-size: 2.25rem;
  line-height: 0.9;
  font-family: var(--font-secondary);
  color: var(--color-blue-300);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 600;
  margin-block: 0 2rem;
}
#faqs-page .faq-list {
  inline-size: 100%;
}
#faqs-page .faq-section .faq-item {
  inline-size: 100%;
  max-inline-size: none;
  padding: 0;
  margin: 0;
  border: 0;
}
#faqs-page .faq-section .faq-item + .faq-item {
  margin-block-start: 1.5rem;
}
#faqs-page .faq-section .faq-item:has(> .faq-answer.open) + .faq-item {
  margin-block-start: 2rem;
}
#faqs-page .faq-question {
  font-size: 1.25rem;
  line-height: 1.25;
  font-family: var(--font-accent);
  color: var(--color-blue-400);
  letter-spacing: 0em;
  text-transform: none;
  font-style: normal;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: 4rem;
  padding-block: 0 1.5rem;
  margin: 0;
  border-block-end: 1px solid var(--color-gray);
  overflow-wrap: anywhere;
}
#faqs-page .faq-question::after {
  content: "";
  display: block;
  flex: 0 0 2rem;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background-color: var(--color-red-200);
  background-image: url("/wp-content/themes/1p21-boilerplate/images/icon-accordion-chevron.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.75rem auto;
  transition: transform 0.25s ease-in-out;
}
#faqs-page .faq-question.open {
  color: var(--color-blue-400);
}
#faqs-page .faq-question.open::after {
  content: "";
  transform: rotate(180deg);
}
#faqs-page .faq-answer {
  padding: 0;
  margin: 1.5rem 0 0;
}
#faqs-page .faq-answer-item,
#faqs-page .faq-answer-content {
  padding: 0;
  margin: 0;
}
#faqs-page .faq-answer-content {
  font-size: 1rem;
  line-height: 1.5;
  font-family: var(--font-primary);
  color: var(--color-black);
  font-weight: 400;
}
#faqs-page .section-empty {
  text-align: center;
}
@media only screen and (min-width: 75rem) {
  #faqs-page {
    padding-block-end: 7.8125rem;
  }
  #faqs-page .section-header,
  #faqs-page .section-content {
    margin-block-end: 4rem;
  }
  #faqs-page .section-categories + .faq-sections {
    margin-block-start: 5.3125rem;
  }
  #faqs-page .faq-sections {
    gap: 7.8125rem;
  }
  #faqs-page .faq-section-title {
    font-size: 2.8125rem;
    line-height: 0.9;
    margin-block-end: 2.0625rem;
  }
  #faqs-page .faq-section .faq-item + .faq-item {
    margin-block-start: 1.875rem;
  }
  #faqs-page .faq-section .faq-item:has(> .faq-answer.open) + .faq-item {
    margin-block-start: 2.5rem;
  }
  #faqs-page .faq-question {
    font-size: 1.5rem;
    line-height: 1.25;
    gap: 2.0625rem;
    min-block-size: 4.4375rem;
    padding-block-end: 1.875rem;
  }
  #faqs-page .faq-question::after {
    flex-basis: 2.5rem;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    background-size: 0.9375rem auto;
  }
  #faqs-page .faq-answer {
    margin-block-start: 1.875rem;
  }
  #faqs-page .faq-answer-content {
    font-size: 1.125rem;
    line-height: 1.5;
  }
}

/* ================================================================================
Careers Template
================================================================================ */
/* Careers Template
-------------------------------------------------------------------------------- */
#careers-page {
  padding-block: 0 4.6875rem;
}
#careers-page .section-container {
  --container-gutter: 1.25rem;
}
#careers-page .section-blocks {
  inline-size: 100%;
  max-inline-size: 57.375rem;
  gap: 3.75rem;
}
#careers-page .section-header:empty {
  display: none;
}
#careers-page .careers-introduction {
  display: grid;
  gap: 0.9375rem;
}
#careers-page .careers-introduction-heading {
  font-size: 1.375rem;
  line-height: 1.15;
  font-family: var(--font-accent);
  color: var(--color-blue-300);
  letter-spacing: 0em;
  text-transform: none;
  font-style: normal;
  font-weight: 700;
  margin: 0;
}
#careers-page .careers-introduction-content {
  font-size: 1rem;
  line-height: 1.5;
  font-family: var(--font-primary);
  color: var(--color-black);
  font-weight: 400;
}
#careers-page .careers-jobs {
  inline-size: 100%;
}
#careers-page .careers-jobs-heading {
  font-size: 2.25rem;
  line-height: 0.9;
  font-family: var(--font-secondary);
  color: var(--color-blue-300);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 600;
  margin: 0 0 2.1875rem;
}
#careers-page .careers-job-list {
  inline-size: 100%;
}
#careers-page .career-job:is(.list) {
  inline-size: 100%;
  max-inline-size: none;
  padding: 0;
  margin: 0;
  border: 0;
  border-block-end: 1px solid var(--color-gray);
}
#careers-page .career-job-title {
  font-size: 1.25rem;
  line-height: 1.15;
  font-family: var(--font-accent);
  color: var(--color-navy-100);
  letter-spacing: 0em;
  text-transform: none;
  font-style: normal;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: 4.375rem;
  padding-block: 0.9375rem;
  margin: 0;
  overflow-wrap: anywhere;
}
#careers-page .career-job-title::after {
  content: "";
  display: block;
  flex: 0 0 2.5rem;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background-color: var(--color-red-200);
  background-image: url("/wp-content/themes/1p21-boilerplate/images/icon-accordion-chevron.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.9375rem auto;
  transition: transform 0.25s ease-in-out;
}
#careers-page .career-job-title.open {
  color: var(--color-navy-100);
}
#careers-page .career-job-title.open::after {
  content: "";
  transform: rotate(180deg);
}
#careers-page .career-job-content {
  padding: 0;
  margin: 0;
}
#careers-page .career-job-content-item,
#careers-page .career-job-content-inner {
  padding: 0;
  margin: 0;
}
#careers-page .career-job-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  padding-block: 0 2.1875rem;
}
#careers-page .career-job-meta,
#careers-page .career-job-description {
  font-size: 1rem;
  line-height: 1.5;
  font-family: var(--font-primary);
  color: var(--color-black);
  font-weight: 400;
  margin: 0;
}
#careers-page .career-job-meta strong {
  font-weight: 700;
}
#careers-page .career-job-cta {
  --button-height: 2.75rem;
  font-size: 1rem;
}
#careers-page .careers-empty {
  text-align: center;
}
@media only screen and (min-width: 48rem) {
  #careers-page {
    padding-block: 0 7.8125rem;
  }
  #careers-page .section-blocks {
    gap: 4.6875rem;
  }
  #careers-page .careers-introduction-heading {
    font-size: 1.5625rem;
    line-height: 1.15;
  }
  #careers-page .careers-introduction-content,
  #careers-page .career-job-meta,
  #careers-page .career-job-description {
    font-size: 1.125rem;
    line-height: 1.5;
  }
  #careers-page .careers-jobs-heading {
    font-size: 2.8125rem;
    line-height: 0.85;
  }
  #careers-page .career-job-title {
    font-size: 1.5625rem;
    line-height: 1.15;
    gap: 2rem;
  }
}
@media only screen and (min-width: 75rem) {
  #careers-page {
    padding-block: 0 13.125rem;
  }
  #careers-page .section-blocks {
    gap: 6.25rem;
  }
}

/* ================================================================================
Gallery Template
================================================================================ */
/* Template gallery https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/template/gallery.md
-------------------------------------------------------------------------------- */
/*
* gallery Template
-------------------------------------------------------------------------------- */
body.onep21-template-gallery .popup-frame {
  padding: 0;
  background: none;
  box-shadow: none;
}
body.onep21-template-gallery .popup-close-button {
  top: -0.5em;
  right: -0.5em;
  margin-top: 0;
  inline-size: 1.5em;
  height: 1.5em;
  padding: 0.5em;
  background: var(--color-light);
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.15);
}
:is(.gallery-page, #gallery-page) .gallery:is(.columns) {
  --columns-gap-x: 1.875rem;
  --columns-gap-y: 1.875rem;
  place-content: center;
  place-items: center;
  max-inline-size: max-content;
  inline-size: 100%;
  margin-inline: auto;
}
:is(.gallery-page, #gallery-page) .gallery-item {
  inline-size: 25.625rem;
  overflow: clip;
}
:is(.gallery-page, #gallery-page) .gallery-item:is(:hover, :focus) .gallery-item-img img {
  opacity: 0.4;
}
:is(.gallery-page, #gallery-page) .gallery-item-img {
  background: var(--scheme-bg, var(--color-dark-alt));
  --cover-aspect-w: 1;
  --cover-aspect-l: 1;
}
:is(.gallery-page, #gallery-page) .section-blocks-outer {
  row-gap: 6.75rem;
}
@media only screen and (min-width: 48rem) {
  :is(.gallery-page, #gallery-page) .gallery:is(.columns) {
    --columns-number: 2;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.gallery-page, #gallery-page) .gallery:is(.columns) {
    --columns-number: 3;
  }
  :is(.gallery-page, #gallery-page) .section-blocks {
    --default-gap-y: 5rem;
  }
  :is(.gallery-page, #gallery-page) .section-blocks-outer {
    row-gap: 4.75rem;
  }
  :is(.gallery-page, #gallery-page) .section-body {
    order: 99;
    grid-column: 1/-1;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.gallery-page, #gallery-page) .section-blocks-outer {
    row-gap: 3rem;
  }
}
/* Oklahoma HVAC gallery
-------------------------------------------------------------------------------- */
#gallery-page {
  padding-block: 0 5rem;
}
#gallery-page .section-blocks {
  gap: 0;
  inline-size: 100%;
  max-inline-size: none;
}
#gallery-page .section-body {
  inline-size: 100%;
}
#gallery-page .gallery:is(.columns) {
  --columns-number: 1;
  --columns-gap-x: 1.8125rem;
  --columns-gap-y: 1.8125rem;
  inline-size: 100%;
  max-inline-size: none;
  margin: 0;
  place-content: initial;
  place-items: stretch;
}
#gallery-page .gallery-item {
  inline-size: 100%;
  border-radius: 0.625rem;
  overflow: clip;
}
#gallery-page .gallery-item-thumbnail {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 390/515;
  margin: 0;
  padding: 0;
  overflow: clip;
  border: 0;
  border-radius: 0.625rem;
  background: var(--color-navy-100);
  color: var(--color-white);
  cursor: pointer;
}
#gallery-page .gallery-item-thumbnail::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  border-radius: inherit;
  background: linear-gradient(to top, rgba(31, 34, 37, 0.7), rgba(153, 159, 164, 0.7));
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.25s ease;
}
#gallery-page .gallery-item-thumbnail:focus-visible {
  outline: 0.1875rem solid var(--color-blue-200);
  outline-offset: 0.1875rem;
}
#gallery-page .gallery-item-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border-radius: inherit;
  background: var(--color-navy-100);
  --cover-aspect-w: 390;
  --cover-aspect-l: 515;
}
#gallery-page .gallery-item-img img {
  inline-size: 100%;
  block-size: 100%;
  border-radius: inherit;
  object-fit: cover;
  opacity: 1;
  transition: transform 0.25s ease;
}
#gallery-page .gallery-item-overlay {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem 1.5rem;
  opacity: 0;
  transition: opacity 0.25s ease;
}
#gallery-page .gallery-item-overlay-label {
  font-size: 2rem;
  line-height: 1;
  font-family: var(--font-secondary);
  color: var(--color-white);
  text-transform: uppercase;
  font-weight: 600;
  text-align: start;
}
#gallery-page .gallery-item-overlay-action {
  position: relative;
  flex: 0 0 3.125rem;
  inline-size: 3.125rem;
  block-size: 3.125rem;
}
#gallery-page .gallery-item-overlay-circle {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}
#gallery-page .gallery-item-overlay-arrow {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 0.9375rem;
  block-size: 0.9375rem;
  transform: translate(-50%, -50%) rotate(135deg);
}
#gallery-page .gallery-item-thumbnail:is(:hover, :focus-visible)::before,
#gallery-page .gallery-item-thumbnail:is(:hover, :focus-visible) .gallery-item-overlay {
  opacity: 1;
}
#gallery-page .gallery-item-thumbnail:is(:hover, :focus-visible) .gallery-item-img img {
  opacity: 1;
  transform: scale(1.015);
}
@media only screen and (min-width: 48rem) {
  #gallery-page {
    padding-block-end: 6.25rem;
  }
  #gallery-page .gallery:is(.columns) {
    --columns-number: 2;
  }
}
@media only screen and (min-width: 75rem) {
  #gallery-page {
    padding-block-end: 7.8125rem;
  }
  #gallery-page .gallery:is(.columns) {
    --columns-number: 3;
  }
  #gallery-page .gallery-item-overlay {
    padding: 2.5rem 2rem;
  }
  #gallery-page .gallery-item-overlay-label {
    font-size: 2.375rem;
    line-height: 1;
  }
}
@media only screen and (min-width: 112.5rem) {
  #gallery-page .gallery-item-thumbnail {
    aspect-ratio: auto;
    block-size: 32.1875rem;
  }
  #gallery-page .gallery-item-overlay {
    padding: 3.75rem 2.5rem;
  }
}

/* ================================================================================
* Directory Grid Template
================================================================================ */
/* Template Menu Directories https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/template/menudirs.md
-------------------------------------------------------------------------------- */
/*
* Menu Directories Related Classes
-------------------------------------------------------------------------------- */
/* Add helper classes specific to this template as needed */
/*
* Menu Directories Grid Template
-------------------------------------------------------------------------------- */
:is(.menudirs-page, #menudirs-page) .menudir-menu:is(.columns) {
  --columns-gap-x: 4rem;
  justify-content: center;
  justify-items: center;
}
:is(.menudirs-page, #menudirs-page) .menudir {
  padding-block: 4rem;
  padding-inline: 2.5rem;
  border: 1px solid var(--color-light-alt);
}
:is(.menudirs-page, #menudirs-page) .menudir:nth-child(even) {
  background-color: var(--color-light-alt);
}
:is(.menudirs-page, #menudirs-page) .menudir:nth-last-child(n+2) {
  margin-block-end: 3.75rem;
}
@media only screen and (min-width: 48rem) {
  :is(.menudirs-page, #menudirs-page) .menudir-menu:is(.columns) {
    --columns-number: 2;
  }
  :is(.menudirs-page, #menudirs-page) .menudir-menu li:nth-child(-n+2) {
    border-block-start: 0;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.menudirs-page, #menudirs-page) .menudir-menu:is(.columns) {
    --columns-number: 3;
  }
  :is(.menudirs-page, #menudirs-page) .menudir-menu li:nth-child(-n+3) {
    border-block-start: 0;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.menudirs-page, #menudirs-page) .menudir-menu:is(.columns) {
    --columns-number: 4;
  }
  :is(.menudirs-page, #menudirs-page) .menudir-menu li:nth-child(-n+4) {
    border-block-start: 0;
  }
}
/* Oklahoma HVAC service-area directory
-------------------------------------------------------------------------------- */
#menudirs-page {
  padding-block: 4rem 5rem;
}
#menudirs-page .section-blocks {
  gap: 0;
  inline-size: 100%;
  max-inline-size: none;
}
#menudirs-page .section-intro {
  display: grid;
  gap: 3rem;
}
#menudirs-page .section-intro-copy {
  max-inline-size: 38.4375rem;
}
#menudirs-page .section-header {
  display: grid;
  justify-items: start;
  gap: 0.8125rem;
  margin-block-end: 2.5625rem;
}
@media only screen and (max-width: 47.9375rem) {
  #menudirs-page .section-header {
    justify-items: center;
  }
}
#menudirs-page .section-heading {
  font-size: 3.5rem;
  line-height: 0.85;
  font-family: var(--font-secondary);
  color: var(--color-blue-400);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}
#menudirs-page .section-cta {
  white-space: nowrap;
}
#menudirs-page .section-content {
  font-size: 1.125rem;
  line-height: 1.5;
  font-family: var(--font-primary);
}
#menudirs-page .section-content .content > p:first-child {
  margin-block-end: 0;
}
#menudirs-page .section-content .content > :is(h2, h3) {
  font-size: 1.5625rem;
  line-height: 1.15;
  font-family: var(--font-accent);
  color: var(--color-blue-300);
  font-weight: 700;
  margin-block-start: 2.5rem;
}
#menudirs-page .section-map {
  align-self: start;
  justify-self: center;
  margin: 0.4375rem 0 0;
  inline-size: min(100%, 32.25rem);
}
#menudirs-page .section-map-image {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
#menudirs-page .section-menudirs {
  display: grid;
  gap: 5rem;
  margin-block-start: 6rem;
}
#menudirs-page .menudir {
  padding: 0;
  border: 0;
  background: transparent;
  text-align: start;
}
#menudirs-page .menudir:nth-child(even) {
  background: transparent;
}
#menudirs-page .menudir:nth-last-child(n+2) {
  margin-block-end: 0;
}
#menudirs-page .menudir-title {
  font-size: 2.25rem;
  line-height: 0.85;
  font-family: var(--font-secondary);
  color: var(--color-blue-400);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 2.5rem;
  padding-inline: 0;
}
#menudirs-page .menudir-title::after {
  display: block;
  content: "";
  margin-block-start: 0.375rem;
  inline-size: 100%;
  block-size: 0.25rem;
  background: linear-gradient(90deg, var(--color-blue-200), var(--color-red-200));
}
#menudirs-page .menudir-menu:is(.columns) {
  --columns-number: 1;
  --columns-gap-x: 0rem;
  --columns-gap-y: 1.25rem;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 1fr);
  justify-content: initial;
  justify-items: stretch;
  margin: 0;
}
#menudirs-page .menudir-menu li {
  padding-block-end: 1.0625rem;
  border-block-start: 0;
  border-block-end: 1px solid var(--color-gray);
}
#menudirs-page .menudir-menu a {
  font-size: 1.0625rem;
  line-height: 1.1765;
  font-family: var(--font-accent);
  color: var(--color-blue-400);
  letter-spacing: 0.025em;
  text-transform: uppercase;
  font-weight: 800;
  display: block;
  min-block-size: 0;
  padding: 0;
}
#menudirs-page .menudir-menu a::after {
  display: inline-block;
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="12" viewBox="0 0 15 12" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.9245 5.73221L14.8671 5.67474L14.8722 5.66958L9.20273 9.19222e-05L7.91317 1.28965L11.3012 4.67771L-0.00134718 4.47825L0.0318483 6.33489L11.4473 6.53637L8.06612 9.91759L9.40263 11.2541L14.9245 5.73221Z" fill="%230658C5"/></svg>');
  margin-inline-start: 0.375rem;
  opacity: 0;
  transform: translateX(-0.25rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#menudirs-page .menudir-menu li:is(:hover, :focus-within) a {
  color: var(--color-blue-300);
}
#menudirs-page .menudir-menu li:is(:hover, :focus-within) a::after {
  opacity: 1;
  transform: translateX(0);
}
@media only screen and (min-width: 48rem) {
  #menudirs-page {
    padding-block: 5rem 6.25rem;
  }
  #menudirs-page .section-heading {
    font-size: 4.25rem;
    line-height: 0.85;
    text-align: left;
  }
  #menudirs-page .section-menudirs {
    gap: 6.25rem;
  }
  #menudirs-page .menudir-menu:is(.columns) {
    --columns-number: 2;
    --columns-gap-x: 4rem;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
  }
}
@media only screen and (min-width: 75rem) {
  #menudirs-page {
    padding-block: 6rem 7rem;
  }
  #menudirs-page .section-intro {
    grid-template-columns: minmax(0, 38.4375rem) minmax(22rem, 30.25rem);
    justify-content: space-between;
    align-items: start;
    gap: 4rem;
  }
  #menudirs-page .section-menudirs {
    margin-block-start: 7.375rem;
  }
  #menudirs-page .menudir-menu:is(.columns) {
    --columns-number: 3;
    --columns-gap-x: 9.375rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
  }
}
@media only screen and (min-width: 112.5rem) {
  #menudirs-page {
    padding-block: 8.0625rem 7.8125rem;
  }
  #menudirs-page .section-heading {
    font-size: 5.3125rem;
    line-height: 0.85;
  }
}

/* ================================================================================
* Case Results Template
================================================================================ */
/* Template Results https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/template/results.md
-------------------------------------------------------------------------------- */
/*
* Results Related Classes
-------------------------------------------------------------------------------- */
/* Add helper classes specific to this template as needed */
/*
* Results Template
-------------------------------------------------------------------------------- */
:is(.results-page, #results-page) .results:is(.columns) {
  --columns-gap-x: 3rem;
  --columns-gap-y: 3rem;
  justify-content: center;
  justify-items: center;
}
:is(.results-page, #results-page) .result {
  border-block-end: 1px solid var(--color-neutral-lighter);
  padding-inline: 2rem;
  padding-block: 0 var(--columns-gap-y);
  inline-size: 37.5rem;
}
:is(.results-page, #results-page) .result-pointer-reference:is(:hover, :focus, :focus-within) {
  /* background-color: var(--color-neutral-light); */
}
@media only screen and (min-width: 75rem) {
  :is(.results-page, #results-page) .results:is(.columns) {
    --columns-number: 2;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.results-page, #results-page) .results:is(.columns) {
    --columns-number: 3;
  }
}
/* ================================================================================
* Profiles/ Team Grid Template
================================================================================ */
/* Template Team https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/template/team.md
-------------------------------------------------------------------------------- */
/*
* Team Related Classes
-------------------------------------------------------------------------------- */
/* Add helper classes specific to this template as needed */
/* team groups */
.team-group:nth-child(n+2) {
  margin-block-start: 4rem;
}
.team-group-title {
  margin-block-end: 2rem;
}
/*
* Team/Profiles Page
-------------------------------------------------------------------------------- */
:is(.team-page, #team-page) .profiles:is(.columns) {
  --columns-gap-x: 3rem;
  --columns-gap-y: 3rem;
  justify-content: center;
  justify-items: center;
}
:is(.team-page, #team-page) .profile {
  inline-size: 25rem;
}
@media only screen and (min-width: 48rem) {
  :is(.team-page, #team-page) .profiles:is(.columns) {
    --columns-number: 2;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.team-page, #team-page) .profiles:is(.columns) {
    --columns-number: 3;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.team-page, #team-page) .profiles:is(.columns) {
    --columns-number: 4;
  }
}
/* Oklahoma HVAC team grid
-------------------------------------------------------------------------------- */
#team-page {
  padding-block: 0 5rem;
}
#team-page .section-blocks {
  gap: 0;
  inline-size: 100%;
  max-inline-size: none;
}
#team-page .section-team-groups {
  inline-size: 100%;
  max-inline-size: 76.875rem;
  margin-inline: auto;
  justify-self: center;
}
#team-page .profiles:is(.columns) {
  --columns-number: 1;
  --columns-gap-x: 1.875rem;
  --columns-gap-y: 5.625rem;
  inline-size: 100%;
  justify-content: initial;
  justify-items: stretch;
}
#team-page .team-profile-card.profile {
  inline-size: 100%;
  max-inline-size: 24.375rem;
  margin-inline: auto;
  background: transparent;
}
#team-page .team-profile-card .profile-container {
  gap: 2.1875rem;
  padding: 0;
}
#team-page .profile-card-image {
  --profile-image-aspect-w: 390;
  --profile-image-aspect-l: 515;
  --profile-image-position: 50% 50%;
  --profile-image-overlay-background: linear-gradient(to top, rgba(31, 34, 37, .7), rgba(153, 159, 164, .7));
  --profile-image-overlay-mix-blend: multiply;
  --profile-image-overlay-backdrop-filter: none;
  --profile-overlay-pad-x: 1.5rem;
  --profile-overlay-pad-y: 2rem;
  overflow: clip;
  border-radius: 0.625rem;
  cursor: pointer;
}
#team-page .profile-card-image::before {
  border-radius: inherit;
}
#team-page .profile-card-image:is(:hover, :focus-within), .profile-pointer-reference:is(:hover, :focus, :focus-within) #team-page .profile-card-image {
  --profile-image-overlay-opacity: 1;
}
#team-page .profile-card-view {
  font-size: 2rem;
  line-height: 1;
  font-family: var(--font-secondary);
  color: var(--color-white);
  text-transform: uppercase;
  font-weight: 600;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  inline-size: 100%;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: var(--profile-overlay-pad-y) var(--profile-overlay-pad-x);
  text-align: start;
}
#team-page .profile-card-view::before, #team-page .profile-card-view::after {
  content: "";
  display: block;
  flex: 0 0 auto;
}
#team-page .profile-card-view::after {
  inline-size: 3.125rem;
  block-size: 3.125rem;
  background: url("images/gallery/gallery-arrow-circle.svg") center/contain no-repeat;
}
#team-page .profile-card-view::before {
  position: absolute;
  z-index: 1;
  inset-inline-end: calc(var(--profile-overlay-pad-x) + 1.09375rem);
  inset-block-end: calc(var(--profile-overlay-pad-y) + 1.09375rem);
  inline-size: 0.9375rem;
  block-size: 0.9375rem;
  background: url("images/gallery/gallery-arrow.svg") center/contain no-repeat;
  transform: rotate(135deg);
}
#team-page .profile-summary {
  gap: 0.625rem;
  cursor: pointer;
}
#team-page .profile-card-name {
  font-size: 2.1875rem;
  line-height: 1.15;
  font-family: var(--font-accent);
  color: var(--color-blue-400);
  font-weight: 700;
  text-align: center;
  inline-size: 100%;
}
#team-page .profile-card-position {
  font-size: 1.0625rem;
  line-height: 1;
  font-family: var(--font-accent);
  color: var(--color-blue-300);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 800;
  text-align: center;
  inline-size: 100%;
  margin: 0;
}
@media only screen and (min-width: 48rem) {
  #team-page {
    padding-block-end: 6.25rem;
  }
  #team-page .profiles:is(.columns) {
    --columns-number: 2;
  }
}
@media only screen and (min-width: 75rem) {
  #team-page {
    padding-block-end: 7.8125rem;
  }
  #team-page .profiles:is(.columns) {
    --columns-number: 3;
  }
  #team-page .profile-card-image {
    --profile-overlay-pad-x: 2.5rem;
    --profile-overlay-pad-y: 3.75rem;
  }
  #team-page .profile-card-view {
    font-size: 2.375rem;
    line-height: 1;
  }
}

body.onep21-template-team .popup-frame:has(.team-profile-popup) {
  inline-size: min(100%, 68.75rem);
  margin-inline: auto;
  border-radius: 0.625rem;
}
body.onep21-template-team .team-profile-popup {
  display: grid;
  gap: 1rem;
}
body.onep21-template-team .team-profile-popup .profile-popup-image {
  --profile-image-aspect-w: 390;
  --profile-image-aspect-l: 515;
  --profile-image-position: 50% 50%;
  inline-size: min(100%, 18rem);
  margin-inline: auto;
  overflow: clip;
  border-radius: 0.625rem;
}
body.onep21-template-team .team-profile-popup .profile-card-name {
  font-size: 2.1875rem;
  line-height: 1.15;
  font-family: var(--font-accent);
  color: var(--color-blue-400);
  font-weight: 700;
  text-align: start;
  inline-size: 100%;
}
body.onep21-template-team .team-profile-popup .profile-card-position {
  font-size: 1.0625rem;
  line-height: 1;
  font-family: var(--font-accent);
  color: var(--color-blue-300);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 800;
  text-align: start;
  inline-size: 100%;
  margin: 0;
}
@media only screen and (min-width: 75rem) {
  body.onep21-template-team .team-profile-popup {
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    align-items: start;
    column-gap: 2.5rem;
  }
  body.onep21-template-team .team-profile-popup .profile-popup-image {
    grid-row: 1/span 4;
    margin-inline: 0;
  }
  body.onep21-template-team .team-profile-popup > :not(.profile-popup-image) {
    grid-column: 2;
  }
}
@media only screen and (min-width: 75rem) {
  body.onep21-template-team .popup:has(.team-profile-popup) .popup-container {
    --container-gutter: 5rem;
  }
}

/* ================================================================================
* Testimonials Template
================================================================================ */
/* Template Testimonials Areas https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/template/testimonials.md
-------------------------------------------------------------------------------- */
/*
* Testimonials Related Classes
-------------------------------------------------------------------------------- */
/* Add helper classes specific to this template as needed */
/*
* Testimonials Template
-------------------------------------------------------------------------------- */
:is(.testimonials-page, #testimonials-page) .testimonials:is(.columns) {
  --columns-gap-x: 3rem;
  --columns-gap-y: 3rem;
  justify-content: center;
  justify-items: center;
}
.testimonials-featured {
  margin-inline: auto;
  max-inline-size: 100%;
}
.testimonials-featured :is(.swiper) {
  --swiper-custom-arrow-offset-x: max(33vi,var(--container-gutter));
  padding-block: var(--overlap-buffer);
  margin-block: calc(var(--overlap-buffer) * -1);
}
.testimonials-featured :is(.swiper) .swiper-slide {
  inline-size: 300px;
}
.testimonials-featured .testimonial {
  text-align: initial;
  inline-size: 100%;
}
.testimonials-featured .testimonial:where(.fancy-box) {
  padding-block: var(--fancy-box-padding-y, 2rem);
  padding-inline: var(--fancy-box-padding-y, 2rem);
}
.testimonials-featured .testimonial-container {
  align-items: start;
}
.testimonials-featured .testimonial-highlight {
  --clamp-text-cap: 3;
}
.testimonials-featured .testimonial-quote {
  --clamp-text-cap: 5;
}

:is(.testimonials-page, #testimonials-page) .testimonials-columns .testimonial {
  text-align: center;
}
:is(.testimonials-page, #testimonials-page) .testimonials-columns .testimonial-container {
  align-items: center;
  align-content: center;
}
:is(.testimonials-page, #testimonials-page) .testimonial:nth-last-child(n+2) {
  padding-block-end: calc(var(--columns-gap-y) + 0.25rem);
  border-block-end: 1px solid var(--color-neutral-lighter);
}
:is(.testimonials-page, #testimonials-page) .testimonial .testimonial-highlight {
  max-inline-size: 52ch;
  text-wrap: balance;
}
@media only screen and (min-width: 75rem) {
  :is(.testimonials-page, #testimonials-page) .testimonials:is(.columns) {
    --columns-number: 2;
  }
}
/* Reviews Page
-------------------------------------------------------------------------------- */
#testimonials-page {
  padding-block: 0 4.6875rem;
}
#testimonials-page .section-container {
  --container-gutter: 1.25rem;
}
#testimonials-page .section-blocks {
  inline-size: 100%;
  max-inline-size: 50rem;
  gap: 0;
}
#testimonials-page .section-header:empty,
#testimonials-page .section-content:empty {
  display: none;
}
#testimonials-page .section-testimonials.testimonials.columns {
  --columns-number: 1;
  --columns-gap-x: 0;
  --columns-gap-y: 2.5rem;
  inline-size: 100%;
  max-inline-size: 50rem;
  margin-inline: auto;
}
#testimonials-page .testimonial-review,
#testimonials-page .testimonial-review:nth-last-child(n+2) {
  inline-size: 100%;
  min-block-size: 0;
  padding: 1.875rem 1.25rem 1.5rem;
  border: 0;
  border-radius: 0.625rem;
  background: linear-gradient(to bottom, var(--color-blue-300), var(--color-navy-100));
  color: var(--color-white);
}
@media only screen and (min-width: 48rem) {
  #testimonials-page .testimonial-review,
  #testimonials-page .testimonial-review:nth-last-child(n+2) {
    padding: 2.5rem 2.8125rem 1.875rem;
  }
}
#testimonials-page .testimonial-review .testimonial-container {
  align-items: stretch;
  align-content: stretch;
  gap: 0;
}
#testimonials-page .testimonial-review .testimonial-stars {
  display: flex;
  inline-size: 10.3125rem;
  block-size: 3.288rem;
  align-self: center;
  margin: 0 0 0.9375rem;
}
#testimonials-page .testimonial-review .testimonial-stars :is(img, svg, picture) {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}
#testimonials-page .testimonial-review .testimonial-highlight {
  font-size: 1.4375rem;
  line-height: 1.15;
  font-family: var(--font-accent);
  color: var(--color-white);
  font-weight: 700;
  text-align: center;
  inline-size: 100%;
  max-inline-size: none;
  margin: 0;
  text-wrap: balance;
}
#testimonials-page .testimonial-review .testimonial-quote {
  font-size: 1rem;
  line-height: 1.5;
  font-family: var(--font-primary);
  color: var(--color-white);
  font-weight: 400;
  text-align: start;
  inline-size: 100%;
  margin-block-start: 1.875rem;
}
#testimonials-page .testimonial-review .testimonial-quote > * {
  margin-block: 0;
}
#testimonials-page .testimonial-review .testimonial-quote > * + * {
  margin-block-start: 1.5em;
}
#testimonials-page .testimonial-review .testimonial-divider {
  inline-size: 100%;
  block-size: 1px;
  margin: 2rem 0 1.4375rem;
  border: 0;
  background: rgba(217, 217, 217, 0.2);
}
#testimonials-page .testimonial-review .testimonial-source {
  font-size: 1rem;
  line-height: 1;
  font-family: var(--font-accent);
  color: var(--color-white);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  inline-size: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
}
#testimonials-page .testimonial-review .testimonial-source > span::after {
  display: none;
}
#testimonials-page .testimonial-review .testimonial-source-icon {
  display: flex;
  inline-size: 4.375rem;
  block-size: 1.4402rem;
  margin-inline-start: auto;
}
#testimonials-page .testimonial-review .testimonial-source-icon .content-icon,
#testimonials-page .testimonial-review .testimonial-source-icon :is(img, svg, picture) {
  display: flex;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}
@media only screen and (min-width: 75rem) {
  #testimonials-page {
    padding-block-end: 7.8125rem;
  }
  #testimonials-page .testimonial-review .testimonial-container {
    display: grid;
    grid-template-columns: 16.1875rem minmax(0, 1fr);
    grid-template-areas: "stars quote" "highlight quote" "divider divider" "source source";
    column-gap: 3.75rem;
    row-gap: 0;
  }
  #testimonials-page .testimonial-review .testimonial-stars {
    grid-area: stars;
    align-self: end;
    justify-self: center;
  }
  #testimonials-page .testimonial-review .testimonial-highlight {
    grid-area: highlight;
    align-self: start;
  }
  #testimonials-page .testimonial-review .testimonial-quote {
    grid-area: quote;
    align-self: center;
    margin-block-start: 0;
  }
  #testimonials-page .testimonial-review .testimonial-divider {
    grid-area: divider;
    margin-block: 2.5rem 1.4375rem;
  }
  #testimonials-page .testimonial-review .testimonial-source {
    grid-area: source;
  }
}

/* ================================================================================
* Videos Template
================================================================================ */
/* Template Videos https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/template/videos.md
-------------------------------------------------------------------------------- */
/*
* Videos Related Classes
-------------------------------------------------------------------------------- */
/* Add helper classes specific to this template as needed */
/*
* CustomRowName Template
-------------------------------------------------------------------------------- */
:is(.videos-page, #videos-page) .videos:is(.columns) {
  --columns-gap-x: 3rem;
  --columns-gap-y: 3rem;
  justify-content: center;
  justify-items: center;
  max-inline-size: max-content;
  margin-inline: auto;
}
:is(.videos-page, #videos-page) .video {
  inline-size: 31.25rem;
}
@media only screen and (min-width: 48rem) {
  :is(.videos-page, #videos-page) .videos:is(.columns) {
    --columns-number: 2;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.videos-page, #videos-page) .videos:is(.columns) {
    --columns-number: 3;
  }
}
/* ================================================================================
* Profile Detail Template
================================================================================ */
/* Template Profile Areas https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/template/profile.md
-------------------------------------------------------------------------------- */
/*
* Profile Contact Info
-------------------------------------------------------------------------------- */
.profile-contact a:not(:hover, :focus) {
  color: inherit;
  text-decoration: none;
}
.profile-contact-list-item-label {
  margin-inline-end: 0.5em;
}
/*
* Profile Detail Template
-------------------------------------------------------------------------------- */
body.onep21-template-single-profile {
  --profile-image-offset: -4.375rem;
}
@media only screen and (min-width: 75rem) {
  body.onep21-template-single-profile {
    --profile-image-offset: 12.5rem;
    --profile-sidebar-offset: 0rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  body.onep21-template-single-profile {
    --profile-image-offset: -6.875rem;
  }
}
/*
* Section Offset: For overlapping the section or parts of it to adjacent sections/layouts Feel free to copy/paste/comment out as needed. Find and replace `profile-section-1` to rename variables and sections appropriately
Example of usage: PQL36
-------------------------------------------------------------------------------- */
:root {
  --profile-section-1-offset: 6.25rem;
}
/*
* Section Offset Demo: Overlap this section and adjust it siblings and or the siblings' contents to it
	NOTE: To reuse on other elements, copy this css and replace `profile-section-1` with `profile-section-[DESIRED_NUMBER]`
	NOTE: Classes to use:
		.profile-section-1-offset-element => the element within the section that will have the negative margins to overlap itself
		.has-profile-section-1-offset => the adjacent sections/ child of adjacent sections that will have the pseudo element to adjust itself if the `profile-section-1-offset-element` is next to it
-------------------------------------------------------------------------------- */
.template-wrapper:has(:is(main, .main) > .profile-section-1) .has-profile-section-1-offset:is(.profile-section-1 + .profile-section:not(.profile-section-1),
.profile-section-1 + .profile-section:not(.profile-section-1) *) .profile-section-1:nth-last-child(n+2) {
  position: relative;
  z-index: 2;
}
.template-wrapper:has(:is(main, .main) > .profile-section-1) .has-profile-section-1-offset:is(.profile-section-1 + .profile-section:not(.profile-section-1),
.profile-section-1 + .profile-section:not(.profile-section-1) *) {
  isolation: isolate;
}
.template-wrapper:has(:is(main, .main) > .profile-section-1) .has-profile-section-1-offset:is(.profile-section-1 + .profile-section:not(.profile-section-1),
.profile-section-1 + .profile-section:not(.profile-section-1) *)::before {
  content: "";
  block-size: var(--profile-section-1-offset);
  margin-block-start: min(var(--profile-section-1-offset) - var(--overlap-buffer), 0px);
  display: block;
  flex: 0 0 auto;
  inline-size: 100%;
}
.template-wrapper:has(:is(main, .main) > .profile-section-1) .profile-section-1:nth-last-child(n+2) {
  padding-block-end: var(--overlap-buffer) !important;
}
.template-wrapper:has(:is(main, .main) > .profile-section-1) .profile-section-1:nth-last-child(n+2) .profile-section-1-offset-element {
  margin-block-end: calc((var(--profile-section-1-offset) + var(--overlap-buffer)) * -1) !important;
}

:is(.single-profile-page, #single-profile-page):is(.profile-page-sections) {
  padding-block: 0;
}
:is(.single-profile-page, #single-profile-page):is(.profile-page-sections) :is(.profile-section-1) .profile-section-1-offset-element:is(.default-section-sidebar) {
  padding-block-end: 0;
}
:is(.single-profile-page, #single-profile-page):is(.profile-page-full) {
  padding-block: 0;
}
:is(.single-profile-page, #single-profile-page) .section-blocks-header {
  gap: 1rem;
}
:is(.single-profile-page, #single-profile-page) .section-heading {
  max-inline-size: none;
}
:is(.single-profile-page, #single-profile-page) .section-divider {
  --fancy-border-margin-y: 2rem;
}
@media only screen and (min-width: 75rem) {
  :is(.single-profile-page, #single-profile-page):is(.profile-page-simple) .default-section-main:has(+ .default-section-sidebar:last-child) {
    margin-block-end: 0;
  }
  :is(.single-profile-page, #single-profile-page):is(.profile-page-sections) :is(.profile-section-2) .has-profile-section-1-offset:is(.default-section-main)::before {
    content: none;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.single-profile-page, #single-profile-page) .default-sections {
    --default-sidebar-width: 35rem;
    --default-gap-x: 7.5rem;
  }
}
@media only screen and (max-width: 74.9375rem) {
  :is(.single-profile-page, #single-profile-page):is(.profile-page-sections) :is(.profile-section-2) .has-profile-section-1-offset:is(.default-section-sidebar)::before {
    content: none;
  }
  :is(.single-profile-page, #single-profile-page) .section-image {
    max-inline-size: 100%;
    inline-size: 22.5rem;
    margin-inline: auto;
  }
  :is(.single-profile-page, #single-profile-page) .section-awards:not(.widget), :is(.single-profile-page, #single-profile-page) .section-header {
    text-align: center;
  }
}
.profile-section-1 {
  color: var(--scheme-fg, var(--color-light));
  background: var(--scheme-bg, var(--color-dark-alt));
}
@media only screen and (min-width: 75rem) {
  .profile-section-1 .default-section-sidebar {
    align-self: end;
  }
  .profile-section-1 .default-section-main {
    align-self: center;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .profile-section-1 {
    text-align: center;
  }
}
@media only screen and (min-width: 75rem) {
  .profile-section-2 .section-lists {
    padding-block-start: 0;
  }
}