/*! 
Theme Name: Elite Remodeling
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;
  -webkit-appearance: auto;
     -moz-appearance: auto;
          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;
  -moz-appearance: revert;
       appearance: revert;
}

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

/* reset default text opacity of input placeholder */
::-moz-placeholder {
  color: unset;
}
::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: "Source Sans 3", "Primary Fallback", sans-serif;
  --font-secondary: "Lora", "Secondary Fallback", serif;
  --font-accent: "La Belle Aurore", "Accent Fallback", cursive;
  --font-monospace: monospace;
  /* Styleguide - colors */
  --color-dark: #000000;
  --color-dark-alt: #212121;
  --color-light: #FFFFFF;
  --color-light-alt: #FFFAF3;
  --color-primary: #113058;
  --color-primary-alt: linear-gradient(109deg, #051C39 23.33%, #1C3D69 49.98%, #051C39 80.73%);
  --color-primary-gradient-start: var(--color-primary);
  --color-primary-gradient-end: var(--color-primary-alt);
  --color-secondary: #E32223;
  --color-secondary-alt: #9F1819;
  --color-secondary-gradient-start: var(--color-secondary);
  --color-secondary-gradient-end: var(--color-secondary-alt);
  --color-accent: var(--color-primary);
  --color-accent-alt: var(--color-accent);
  --color-accent-gradient-start: var(--color-accent);
  --color-accent-gradient-end: var(--color-accent-alt);
  --color-neutral: #E0E0E0;
  --color-neutral-light: var(--color-neutral);
  --color-neutral-lighter: var(--color-neutral-light);
  --color-neutral-lightest: var(--color-neutral-lighter);
  --color-neutral-dark: #F5F5F5;
  --color-neutral-darker: #5C646D;
  --color-neutral-darkest: var(--color-neutral-darker);
  --color-success: #00CC00;
  --color-caution: #CC6600;
  --color-error: #CC0000;
  /* add more native vars as needed */
  --icon-arrow: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="15.415" height="10.332" viewBox="0 0 15.415 10.332"><path d="M10.09,10.332V8.466l.739-.718,1.839-1.784H0v-1.6H12.669L10.83,2.583l-.739-.718V0l2.662,2.583,2.662,2.583L12.753,7.749Z" transform="translate(0)" fill="currentColor"/></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 */
  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;
  border-radius: 0;
  border: none;
  resize: none;
  display: block;
  font: inherit;
  color: inherit;
  margin: 0;
}

input:is([type=checkbox], [type=radio]) {
  -webkit-appearance: auto;
  -moz-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;
  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;
  -moz-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;
  -ms-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) {
  -webkit-text-decoration: revert;
          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: 60px;
}
@media only screen and (min-width: 48rem) {
  :is(main, .main, aside, .aside) {
    padding-block: 80px;
  }
}
@media only screen and (min-width: 75rem) {
  :is(main, .main, aside, .aside) {
    padding-block: 100px;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(main, .main, aside, .aside) {
    padding-block: 140px;
  }
}
.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: -moz-max-content;
  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 {
    -o-object-fit: cover;
       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]) {
  block-size: var(--field-height, auto);
  min-block-size: var(--field-height, 0);
  line-height: var(--field-line-height, inherit);
  border-radius: var(--field-border-radius, 0);
  color: var(--color-dark);
  box-shadow: var(--field-box-shadow, 0 0 10px rgba(0, 0, 0, 0.2));
  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-height: auto;
  /* border width */
  --field-border-width: 1px;
  /* border radius */
  --field-border-radius: 4px;
  /* shadow for form fields */
  --field-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  /* 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-secondary);
  /* 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) 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: #BFBFBF;
}

: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 {
  --field-height: 45px;
}
.gform_wrapper.gravity-theme .gfield:is(.gfield--type-textarea, .gfield--type-multiselect) :is(textarea, select).medium {
  --field-height: 120px;
}
.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 {
  -moz-column-gap: 1rem;
       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: 16px;
  color: var(--color-dark-alt);
  font-weight: 600;
}
/* 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 */
}
.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] {
  /* required indicator */
}
.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: -moz-max-content;
    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-secondary));
  --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: var(--color-neutral-darker);
  --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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) :where(.swiper) {
  --swiper-theme-color: var(--scheme-fg, var(--color-primary-alt));
}

/* Swiper Enhancements
--------------------------------------------------------------- */
.swiper {
  opacity: 0;
}
.swiper.swiper-initialized {
  opacity: 1;
}
.swiper {
  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: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: flex-end;
  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
--------------------------------------------------------------- */
/* Schemes Skeleton. Do not Edit 
--------------------------------------------------------------- */
.scheme-applied {
  background-color: var(--scheme-bg);
  color: var(--scheme-fg);
}
.scheme-applied.scheme-applied-contrast-bg, .scheme-applied .scheme-applied-contrast-bg {
  background-color: var(--scheme-bg-contrast);
}
.scheme-applied.scheme-applied-contrast-fg, .scheme-applied .scheme-applied-contrast-fg {
  color: var(--scheme-fg-contrast);
}

/* Schemes Cuzstomizations https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/schemes.md#css-vars
--------------------------------------------------------------- */
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) {
  --scheme-bg: var(--color-light);
  /* Background of the scheme. */
  --scheme-bg-contrast: var(--color-light-alt);
  /* Variation of the background of the scheme. */
  --scheme-fg: var(--color-dark);
  /* Contrasting color of the scheme. */
  --scheme-fg-contrast: var(--color-dark-alt);
  /* Variation of the contrasting color of the scheme */
  --scheme-md: var(--color-neutral-dark);
  /* Median of the scheme. */
  --scheme-md-bg: var(--color-neutral-lightest);
  /* Median of the scheme. closer to background */
  --scheme-md-fg: var(--color-neutral-darkest);
  /* Median of the scheme. closer to foreground */
  --scheme-sp: var(--color-primary);
  /* Special color of the scheme. */
  --scheme-sp-contrast: var(--color-primary-alt);
  /* Variation of the special color of the scheme. */
  --scheme-sb: var(--color-secondary);
  /* Second special color of the scheme. */
  --scheme-sb-contrast: var(--color-secondary-alt);
  /* Variation of the second special color of the scheme. */
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) {
  --scheme-bg: var(--color-dark-alt);
  /* Background of the scheme. */
  --scheme-bg-contrast: var(--color-dark);
  /* Variation of the background of the scheme. */
  --scheme-fg: var(--color-light);
  /* Contrasting color of the scheme. */
  --scheme-fg-contrast: var(--color-light-alt);
  /* Variation of the contrasting color of the scheme */
  --scheme-md: var(--color-neutral-light);
  /* Median of the scheme. */
  --scheme-md-bg: var(--color-neutral-darkest);
  /* Median of the scheme. closer to background */
  --scheme-md-fg: var(--color-neutral-lightest);
  /* Median of the scheme. closer to foreground */
  --scheme-sp: var(--color-accent-alt);
  /* Special color of the scheme. */
  --scheme-sp-contrast: var(--color-accent);
  /* Variation of the special color of the scheme. */
  --scheme-sb: var(--color-secondary-alt);
  /* Second special color of the scheme. */
  --scheme-sb-contrast: var(--color-secondary);
  /* Variation of the second special color of the scheme. */
}

/* H tag scaffolding. todo maybe put to theme.json and then put to nativ block propery
--------------------------------------------------------------- */
: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.5rem;
  line-height: calc(1em + 10px);
  font-family: var(--font-secondary);
  color: var(--scheme-fg-contrast, var(--color-dark-alt));
  letter-spacing: 0em;
  text-transform: none;
  font-style: normal;
  font-weight: 500;
}
:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) :where(*.h1, :is(.content, .editor-styles-wrapper) :where(h1)) {
  color: var(--scheme-fg, inherit);
}

/* H2 - can be reused by certain titles
--------------------------------------------------------------- */
:where(*.h2, :is(.content, .editor-styles-wrapper) :where(h2)) {
  font-size: 32px;
  line-height: 120%;
  font-family: var(--font-secondary);
  color: var(--scheme-sp, var(--color-dark));
  letter-spacing: 0em;
  text-transform: none;
  font-style: normal;
  font-weight: 500;
}
:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.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: 22px;
  line-height: 120%;
  font-family: var(--font-secondary);
  color: var(--scheme-sp, var(--color-secondary));
  letter-spacing: 0em;
  text-transform: none;
  font-style: normal;
  font-weight: 700;
}
:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) :where(*.h3, :is(.content, .editor-styles-wrapper) :where(h3)) {
  color: var(--color-secondary);
}

/* 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)) {
  font-size: 22px;
  line-height: 120%;
  font-family: var(--font-secondary);
  color: var(--scheme-fg, inherit);
  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: 18px;
  line-height: 120%;
  font-family: var(--font-secondary);
  color: var(--scheme-fg, inherit);
  letter-spacing: 0em;
  text-transform: none;
  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
--------------------------------------------------------------- */
:where(*.h6, :is(.content, .editor-styles-wrapper) :where(h6)) {
  font-size: 0.8125rem;
  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;
}
/* 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: 33px;
  line-height: 121%;
  font-family: var(--font-secondary);
  color: var(--scheme-sb-contrast, var(--color-primary));
  text-transform: none;
  font-style: italic;
  font-weight: 700;
  margin-block: var(--fancy-border-margin-y, 0);
}
:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.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 (min-width: 48rem) {
  :where(*.blockquote, :is(.content, .editor-styles-wrapper) :where(blockquote)) {
    font-size: 35px;
  }
}
@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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.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-secondary));
  font-weight: 700;
  text-decoration: underline;
  transition: color 0.25s ease-in-out;
}
:where(:is(.content, .editor-styles-wrapper) :where(a)):where(:hover, :focus) {
  color: var(--scheme-sp, var(--color-secondary-alt));
}
:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.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: 2ch;
}

/* 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: var(--scheme-sp, var(--color-secondary));
}
:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) :is(:is(.content, .editor-styles-wrapper) :where(li))::marker {
  color: var(--scheme-sp, var(--color-accent));
}

/* 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;
}
:is(:is(.content, .editor-styles-wrapper) :where(ol)) > li::marker {
  color: var(--scheme-sp, var(--color-dark-alt));
}
/* The Content - Tables Skeletons. Do not edit
--------------------------------------------------------------- */
:where(:is(.content, .editor-styles-wrapper) table) {
  border-collapse: collapse;
  table-layout: fixed;
  -webkit-hyphens: auto;
          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)) {
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

/* 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: 18px;
  line-height: 150%;
  font-family: var(--font-primary);
  color: inherit;
}
/* 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,
.table-wrapper,
table,
.wistia_responsive_padding) {
  margin-block-end: 2em;
}
: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) {
  /* space out each item. Note: some designs may or may not have this. comment out if not needed */
  margin-block-start: 0.75em;
}
: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: 2rem;
}
: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(*.blockquote, blockquote) {
  margin-block: 50px;
}
: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;
}
/* 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: 10px;
}
.content.content-size-small {
  font-size: 14px;
}
.content.content-size-large {
  font-size: 18px;
}
/* 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;
}
/* content accordion */
:where(:is(.content, .editor-styles-wrapper) :where(.content-accordion)) {
  --content-awards-header-margin-block: 30px;
}
@media only screen and (min-width: 48rem) {
  :where(:is(.content, .editor-styles-wrapper) :where(.content-accordion)) {
    --content-awards-header-margin-block: 30px 70px;
  }
}

/* content testimonials */
:where(:is(.content, .editor-styles-wrapper) :where(.content-testimonials)) {
  --content-testimonials-margin-block: 50px;
  --content-testimonials-swiper-padding-block: 0;
  --content-testimonials-border-radius: 0;
}
:where(:is(.content, .editor-styles-wrapper) :where(.content-testimonials)) .swiper.slider {
  --swiper-pagination-bottom: 15px;
  --swiper-pagination-color: var(--color-secondary);
  --swiper-pagination-bullet-inactive-color: var(--color-neutral-darker);
  --swiper-pagination-bullet-inactive-opacity: 1;
}
:where(:is(.content, .editor-styles-wrapper) :where(.content-testimonials)) .swiper.slider .slide .testimonial {
  box-shadow: none;
  border: 1px solid var(--color-primary);
  background: var(--color-neutral-dark);
}
:where(:is(.content, .editor-styles-wrapper) :where(.content-testimonials)) .swiper.slider .slide .testimonial-container {
  gap: 1rem;
}
:where(:is(.content, .editor-styles-wrapper) :where(.content-testimonials)) .swiper.slider .slide .testimonial-stars {
  font-size: 24px;
}
:where(:is(.content, .editor-styles-wrapper) :where(.content-testimonials)) .swiper.slider .slide .testimonial-highlight {
  font-size: 18px;
  font-family: var(--font-primary);
  font-weight: normal;
}
:where(:is(.content, .editor-styles-wrapper) :where(.content-testimonials)) .swiper.slider .slide .testimonial-source {
  font-size: 29px;
  line-height: 115%;
  font-family: var(--font-accent);
  color: var(--color-secondary);
  text-transform: none;
  font-weight: normal;
}
:where(:is(.content, .editor-styles-wrapper) :where(.content-testimonials)) .swiper.slider .slide .testimonial-source span:first-child {
  font-size: 16px;
  line-height: 1;
  font-family: var(--font-secondary);
  color: var(--color-dark-alt);
  font-weight: 700;
}
:where(:is(.content, .editor-styles-wrapper) :where(.content-testimonials)) .swiper.slider .slide .testimonial-source span:nth-last-child(n+2)::after {
  content: "\a";
  white-space: pre;
}
@media only screen and (min-width: 48rem) {
  :where(:is(.content, .editor-styles-wrapper) :where(.content-testimonials)) .swiper.slider .slide .testimonial {
    padding: 60px 40px;
  }
}

/* Add process-title to a Gutenberg heading's Additional CSS class(es). */
.process-title,
.content .process-title {
  font-family: var(--font-accent);
  font-weight: 400;
  color: var(--color-secondary);
}

/* ================================================================================
* 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 {
  -o-object-fit: cover !important;
     object-fit: cover !important;
}
.cover-contain .cover-child {
  -o-object-fit: contain !important;
     object-fit: contain !important;
}
.cover-fit .cover-child {
  -o-object-fit: fit !important;
     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: -moz-max-content;
  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;
  -o-object-fit: contain;
     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;
  -webkit-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%);
          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 {
  -webkit-mask-image: linear-gradient(to left, transparent 0em, black var(--fade-text-offset, 2em), black 100%);
          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: -moz-max-content;
  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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-inherit-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-inherit-onlight, .color-inherit,
.color-inherit-hover:is(:hover, :focus),
.color-inherit-init:not(:is(:hover, :focus)) {
  color: inherit;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-transparent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-transparent-onlight, .color-transparent,
.color-transparent-hover:is(:hover, :focus),
.color-transparent-init:not(:is(:hover, :focus)) {
  color: transparent;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-currentColor-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-currentColor-onlight, .color-currentColor,
.color-currentColor-hover:is(:hover, :focus),
.color-currentColor-init:not(:is(:hover, :focus)) {
  color: currentColor;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-dark-onlight, .color-dark,
.color-dark-hover:is(:hover, :focus),
.color-dark-init:not(:is(:hover, :focus)) {
  color: var(--color-dark);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-dark-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-dark-alt-onlight, .color-dark-alt,
.color-dark-alt-hover:is(:hover, :focus),
.color-dark-alt-init:not(:is(:hover, :focus)) {
  color: var(--color-dark-alt);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-light-onlight, .color-light,
.color-light-hover:is(:hover, :focus),
.color-light-init:not(:is(:hover, :focus)) {
  color: var(--color-light);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-light-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-light-alt-onlight, .color-light-alt,
.color-light-alt-hover:is(:hover, :focus),
.color-light-alt-init:not(:is(:hover, :focus)) {
  color: var(--color-light-alt);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-neutral-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-neutral-onlight, .color-neutral,
.color-neutral-hover:is(:hover, :focus),
.color-neutral-init:not(:is(:hover, :focus)) {
  color: var(--color-neutral);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-neutral-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-neutral-light-onlight, .color-neutral-light,
.color-neutral-light-hover:is(:hover, :focus),
.color-neutral-light-init:not(:is(:hover, :focus)) {
  color: var(--color-neutral-light);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-neutral-lighter-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-neutral-lighter-onlight, .color-neutral-lighter,
.color-neutral-lighter-hover:is(:hover, :focus),
.color-neutral-lighter-init:not(:is(:hover, :focus)) {
  color: var(--color-neutral-lighter);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-neutral-lightest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-neutral-lightest-onlight, .color-neutral-lightest,
.color-neutral-lightest-hover:is(:hover, :focus),
.color-neutral-lightest-init:not(:is(:hover, :focus)) {
  color: var(--color-neutral-lightest);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-neutral-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-neutral-dark-onlight, .color-neutral-dark,
.color-neutral-dark-hover:is(:hover, :focus),
.color-neutral-dark-init:not(:is(:hover, :focus)) {
  color: var(--color-neutral-dark);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-neutral-darker-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-neutral-darker-onlight, .color-neutral-darker,
.color-neutral-darker-hover:is(:hover, :focus),
.color-neutral-darker-init:not(:is(:hover, :focus)) {
  color: var(--color-neutral-darker);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-neutral-darkest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-neutral-darkest-onlight, .color-neutral-darkest,
.color-neutral-darkest-hover:is(:hover, :focus),
.color-neutral-darkest-init:not(:is(:hover, :focus)) {
  color: var(--color-neutral-darkest);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-primary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-primary-onlight, .color-primary,
.color-primary-hover:is(:hover, :focus),
.color-primary-init:not(:is(:hover, :focus)) {
  color: var(--color-primary);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-primary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-primary-alt-onlight, .color-primary-alt,
.color-primary-alt-hover:is(:hover, :focus),
.color-primary-alt-init:not(:is(:hover, :focus)) {
  color: var(--color-primary-alt);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-primary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-primary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-primary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-primary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-secondary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-secondary-onlight, .color-secondary,
.color-secondary-hover:is(:hover, :focus),
.color-secondary-init:not(:is(:hover, :focus)) {
  color: var(--color-secondary);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-secondary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-secondary-alt-onlight, .color-secondary-alt,
.color-secondary-alt-hover:is(:hover, :focus),
.color-secondary-alt-init:not(:is(:hover, :focus)) {
  color: var(--color-secondary-alt);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-secondary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-secondary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-secondary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-secondary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-accent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-accent-onlight, .color-accent,
.color-accent-hover:is(:hover, :focus),
.color-accent-init:not(:is(:hover, :focus)) {
  color: var(--color-accent);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-accent-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-accent-alt-onlight, .color-accent-alt,
.color-accent-alt-hover:is(:hover, :focus),
.color-accent-alt-init:not(:is(:hover, :focus)) {
  color: var(--color-accent-alt);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-accent-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-accent-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .color-accent-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .color-accent-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-inherit-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-inherit-onlight, .background-color-inherit,
.background-color-inherit-hover:is(:hover, :focus),
.background-color-inherit-init:not(:is(:hover, :focus)) {
  background-color: inherit;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-transparent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-transparent-onlight, .background-color-transparent,
.background-color-transparent-hover:is(:hover, :focus),
.background-color-transparent-init:not(:is(:hover, :focus)) {
  background-color: transparent;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-currentColor-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-currentColor-onlight, .background-color-currentColor,
.background-color-currentColor-hover:is(:hover, :focus),
.background-color-currentColor-init:not(:is(:hover, :focus)) {
  background-color: currentColor;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-dark-onlight, .background-color-dark,
.background-color-dark-hover:is(:hover, :focus),
.background-color-dark-init:not(:is(:hover, :focus)) {
  background-color: var(--color-dark);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-dark-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-dark-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-light-onlight, .background-color-light,
.background-color-light-hover:is(:hover, :focus),
.background-color-light-init:not(:is(:hover, :focus)) {
  background-color: var(--color-light);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-light-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-light-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-neutral-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-neutral-onlight, .background-color-neutral,
.background-color-neutral-hover:is(:hover, :focus),
.background-color-neutral-init:not(:is(:hover, :focus)) {
  background-color: var(--color-neutral);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-neutral-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-neutral-light-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-neutral-lighter-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-neutral-lighter-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-neutral-lightest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-neutral-lightest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-neutral-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-neutral-dark-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-neutral-darker-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-neutral-darker-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-neutral-darkest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-neutral-darkest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-primary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-primary-onlight, .background-color-primary,
.background-color-primary-hover:is(:hover, :focus),
.background-color-primary-init:not(:is(:hover, :focus)) {
  background-color: var(--color-primary);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-primary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-primary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-primary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-primary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-primary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-primary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-secondary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-secondary-onlight, .background-color-secondary,
.background-color-secondary-hover:is(:hover, :focus),
.background-color-secondary-init:not(:is(:hover, :focus)) {
  background-color: var(--color-secondary);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-secondary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-secondary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-secondary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-secondary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-secondary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-secondary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-accent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-accent-onlight, .background-color-accent,
.background-color-accent-hover:is(:hover, :focus),
.background-color-accent-init:not(:is(:hover, :focus)) {
  background-color: var(--color-accent);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-accent-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-accent-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-accent-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-accent-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .background-color-accent-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .background-color-accent-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-inherit-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-inherit-onlight, .border-color-inherit,
.border-color-inherit-hover:is(:hover, :focus),
.border-color-inherit-init:not(:is(:hover, :focus)) {
  border-color: inherit;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-transparent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-transparent-onlight, .border-color-transparent,
.border-color-transparent-hover:is(:hover, :focus),
.border-color-transparent-init:not(:is(:hover, :focus)) {
  border-color: transparent;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-currentColor-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-currentColor-onlight, .border-color-currentColor,
.border-color-currentColor-hover:is(:hover, :focus),
.border-color-currentColor-init:not(:is(:hover, :focus)) {
  border-color: currentColor;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-dark-onlight, .border-color-dark,
.border-color-dark-hover:is(:hover, :focus),
.border-color-dark-init:not(:is(:hover, :focus)) {
  border-color: var(--color-dark);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-dark-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-dark-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-light-onlight, .border-color-light,
.border-color-light-hover:is(:hover, :focus),
.border-color-light-init:not(:is(:hover, :focus)) {
  border-color: var(--color-light);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-light-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-light-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-neutral-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-neutral-onlight, .border-color-neutral,
.border-color-neutral-hover:is(:hover, :focus),
.border-color-neutral-init:not(:is(:hover, :focus)) {
  border-color: var(--color-neutral);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-neutral-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-neutral-light-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-neutral-lighter-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-neutral-lighter-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-neutral-lightest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-neutral-lightest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-neutral-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-neutral-dark-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-neutral-darker-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-neutral-darker-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-neutral-darkest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-neutral-darkest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-primary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-primary-onlight, .border-color-primary,
.border-color-primary-hover:is(:hover, :focus),
.border-color-primary-init:not(:is(:hover, :focus)) {
  border-color: var(--color-primary);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-primary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-primary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-primary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-primary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-primary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-primary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-secondary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-secondary-onlight, .border-color-secondary,
.border-color-secondary-hover:is(:hover, :focus),
.border-color-secondary-init:not(:is(:hover, :focus)) {
  border-color: var(--color-secondary);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-secondary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-secondary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-secondary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-secondary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-secondary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-secondary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-accent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-accent-onlight, .border-color-accent,
.border-color-accent-hover:is(:hover, :focus),
.border-color-accent-init:not(:is(:hover, :focus)) {
  border-color: var(--color-accent);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-accent-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-accent-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-accent-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-accent-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-color-accent-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-color-accent-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-inherit-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-inherit-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-transparent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-transparent-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-currentColor-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-currentColor-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-dark-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-dark-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-dark-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-light-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-light-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-light-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-neutral-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-neutral-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-neutral-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-neutral-light-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-neutral-lighter-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-neutral-lighter-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-neutral-lightest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-neutral-lightest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-neutral-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-neutral-dark-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-neutral-darker-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-neutral-darker-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-neutral-darkest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-neutral-darkest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-primary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-primary-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-primary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-primary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-primary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-primary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-primary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-primary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-secondary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-secondary-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-secondary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-secondary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-secondary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-secondary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-secondary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-secondary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-accent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-accent-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-accent-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-accent-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-accent-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-accent-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-accent-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-accent-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-inherit-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-inherit-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-transparent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-transparent-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-currentColor-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-currentColor-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-dark-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-dark-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-dark-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-light-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-light-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-light-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-neutral-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-neutral-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-neutral-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-neutral-light-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-neutral-lighter-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-neutral-lighter-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-neutral-lightest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-neutral-lightest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-neutral-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-neutral-dark-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-neutral-darker-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-neutral-darker-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-neutral-darkest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-neutral-darkest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-primary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-primary-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-primary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-primary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-primary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-primary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-primary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-primary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-secondary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-secondary-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-secondary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-secondary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-secondary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-secondary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-secondary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-secondary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-accent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-accent-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-accent-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-accent-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-accent-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-accent-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-accent-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-accent-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-inherit-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-inherit-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-transparent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-transparent-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-currentColor-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-currentColor-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-dark-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-dark-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-dark-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-light-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-light-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-light-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-neutral-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-neutral-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-neutral-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-neutral-light-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-neutral-lighter-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-neutral-lighter-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-neutral-lightest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-neutral-lightest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-neutral-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-neutral-dark-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-neutral-darker-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-neutral-darker-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-neutral-darkest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-neutral-darkest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-primary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-primary-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-primary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-primary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-primary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-primary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-primary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-primary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-secondary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-secondary-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-secondary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-secondary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-secondary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-secondary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-secondary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-secondary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-accent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-accent-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-accent-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-accent-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-accent-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-accent-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-color-accent-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-color-accent-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-inherit-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-inherit-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-transparent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-transparent-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-currentColor-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-currentColor-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-dark-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-dark-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-dark-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-light-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-light-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-light-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-neutral-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-neutral-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-neutral-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-neutral-light-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-neutral-lighter-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-neutral-lighter-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-neutral-lightest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-neutral-lightest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-neutral-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-neutral-dark-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-neutral-darker-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-neutral-darker-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-neutral-darkest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-neutral-darkest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-primary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-primary-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-primary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-primary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-primary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-primary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-primary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-primary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-secondary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-secondary-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-secondary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-secondary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-secondary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-secondary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-secondary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-secondary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-accent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-accent-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-accent-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-accent-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-accent-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-accent-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-color-accent-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-color-accent-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-inherit-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-inherit-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-transparent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-transparent-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-currentColor-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-currentColor-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-dark-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-dark-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-dark-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-light-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-light-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-light-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-neutral-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-neutral-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-neutral-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-neutral-light-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-neutral-lighter-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-neutral-lighter-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-neutral-lightest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-neutral-lightest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-neutral-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-neutral-dark-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-neutral-darker-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-neutral-darker-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-neutral-darkest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-neutral-darkest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-primary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-primary-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-primary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-primary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-primary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-primary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-primary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-primary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-secondary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-secondary-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-secondary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-secondary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-secondary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-secondary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-secondary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-secondary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-accent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-accent-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-accent-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-accent-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-accent-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-accent-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-start-color-accent-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-start-color-accent-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-inherit-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-inherit-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-transparent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-transparent-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-currentColor-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-currentColor-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-dark-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-dark-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-dark-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-light-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-light-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-light-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-neutral-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-neutral-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-neutral-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-neutral-light-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-neutral-lighter-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-neutral-lighter-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-neutral-lightest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-neutral-lightest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-neutral-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-neutral-dark-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-neutral-darker-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-neutral-darker-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-neutral-darkest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-neutral-darkest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-primary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-primary-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-primary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-primary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-primary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-primary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-primary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-primary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-secondary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-secondary-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-secondary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-secondary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-secondary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-secondary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-secondary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-secondary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-accent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-accent-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-accent-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-accent-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-accent-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-accent-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-block-end-color-accent-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-block-end-color-accent-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-inherit-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-inherit-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-transparent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-transparent-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-currentColor-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-currentColor-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-dark-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-dark-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-dark-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-light-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-light-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-light-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-neutral-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-neutral-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-neutral-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-neutral-light-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-neutral-lighter-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-neutral-lighter-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-neutral-lightest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-neutral-lightest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-neutral-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-neutral-dark-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-neutral-darker-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-neutral-darker-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-neutral-darkest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-neutral-darkest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-primary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-primary-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-primary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-primary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-primary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-primary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-primary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-primary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-secondary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-secondary-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-secondary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-secondary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-secondary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-secondary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-secondary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-secondary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-accent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-accent-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-accent-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-accent-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-accent-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-accent-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-start-color-accent-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-start-color-accent-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-inherit-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-inherit-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-transparent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-transparent-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-currentColor-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-currentColor-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-dark-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-dark-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-dark-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-light-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-light-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-light-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-neutral-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-neutral-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-neutral-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-neutral-light-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-neutral-lighter-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-neutral-lighter-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-neutral-lightest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-neutral-lightest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-neutral-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-neutral-dark-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-neutral-darker-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-neutral-darker-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-neutral-darkest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-neutral-darkest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-primary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-primary-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-primary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-primary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-primary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-primary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-primary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-primary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-secondary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-secondary-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-secondary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-secondary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-secondary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-secondary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-secondary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-secondary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-accent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-accent-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-accent-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-accent-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-accent-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-accent-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .border-inline-end-color-accent-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .border-inline-end-color-accent-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-inherit-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-inherit-onlight, .outline-color-inherit,
.outline-color-inherit-hover:is(:hover, :focus),
.outline-color-inherit-init:not(:is(:hover, :focus)) {
  outline-color: inherit;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-transparent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-transparent-onlight, .outline-color-transparent,
.outline-color-transparent-hover:is(:hover, :focus),
.outline-color-transparent-init:not(:is(:hover, :focus)) {
  outline-color: transparent;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-currentColor-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-currentColor-onlight, .outline-color-currentColor,
.outline-color-currentColor-hover:is(:hover, :focus),
.outline-color-currentColor-init:not(:is(:hover, :focus)) {
  outline-color: currentColor;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-dark-onlight, .outline-color-dark,
.outline-color-dark-hover:is(:hover, :focus),
.outline-color-dark-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-dark);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-dark-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-dark-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-light-onlight, .outline-color-light,
.outline-color-light-hover:is(:hover, :focus),
.outline-color-light-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-light);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-light-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-light-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-neutral-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-neutral-onlight, .outline-color-neutral,
.outline-color-neutral-hover:is(:hover, :focus),
.outline-color-neutral-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-neutral);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-neutral-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-neutral-light-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-neutral-lighter-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-neutral-lighter-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-neutral-lightest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-neutral-lightest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-neutral-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-neutral-dark-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-neutral-darker-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-neutral-darker-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-neutral-darkest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-neutral-darkest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-primary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-primary-onlight, .outline-color-primary,
.outline-color-primary-hover:is(:hover, :focus),
.outline-color-primary-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-primary);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-primary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-primary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-primary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-primary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-primary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-primary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-secondary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-secondary-onlight, .outline-color-secondary,
.outline-color-secondary-hover:is(:hover, :focus),
.outline-color-secondary-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-secondary);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-secondary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-secondary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-secondary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-secondary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-secondary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-secondary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-accent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-accent-onlight, .outline-color-accent,
.outline-color-accent-hover:is(:hover, :focus),
.outline-color-accent-init:not(:is(:hover, :focus)) {
  outline-color: var(--color-accent);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-accent-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-accent-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-accent-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-accent-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .outline-color-accent-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .outline-color-accent-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-inherit-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-inherit-onlight, .fill-inherit,
.fill-inherit-hover:is(:hover, :focus),
.fill-inherit-init:not(:is(:hover, :focus)) {
  fill: inherit;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-transparent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-transparent-onlight, .fill-transparent,
.fill-transparent-hover:is(:hover, :focus),
.fill-transparent-init:not(:is(:hover, :focus)) {
  fill: transparent;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-currentColor-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-currentColor-onlight, .fill-currentColor,
.fill-currentColor-hover:is(:hover, :focus),
.fill-currentColor-init:not(:is(:hover, :focus)) {
  fill: currentColor;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-dark-onlight, .fill-dark,
.fill-dark-hover:is(:hover, :focus),
.fill-dark-init:not(:is(:hover, :focus)) {
  fill: var(--color-dark);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-dark-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-dark-alt-onlight, .fill-dark-alt,
.fill-dark-alt-hover:is(:hover, :focus),
.fill-dark-alt-init:not(:is(:hover, :focus)) {
  fill: var(--color-dark-alt);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-light-onlight, .fill-light,
.fill-light-hover:is(:hover, :focus),
.fill-light-init:not(:is(:hover, :focus)) {
  fill: var(--color-light);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-light-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-light-alt-onlight, .fill-light-alt,
.fill-light-alt-hover:is(:hover, :focus),
.fill-light-alt-init:not(:is(:hover, :focus)) {
  fill: var(--color-light-alt);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-neutral-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-neutral-onlight, .fill-neutral,
.fill-neutral-hover:is(:hover, :focus),
.fill-neutral-init:not(:is(:hover, :focus)) {
  fill: var(--color-neutral);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-neutral-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-neutral-light-onlight, .fill-neutral-light,
.fill-neutral-light-hover:is(:hover, :focus),
.fill-neutral-light-init:not(:is(:hover, :focus)) {
  fill: var(--color-neutral-light);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-neutral-lighter-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-neutral-lighter-onlight, .fill-neutral-lighter,
.fill-neutral-lighter-hover:is(:hover, :focus),
.fill-neutral-lighter-init:not(:is(:hover, :focus)) {
  fill: var(--color-neutral-lighter);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-neutral-lightest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-neutral-lightest-onlight, .fill-neutral-lightest,
.fill-neutral-lightest-hover:is(:hover, :focus),
.fill-neutral-lightest-init:not(:is(:hover, :focus)) {
  fill: var(--color-neutral-lightest);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-neutral-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-neutral-dark-onlight, .fill-neutral-dark,
.fill-neutral-dark-hover:is(:hover, :focus),
.fill-neutral-dark-init:not(:is(:hover, :focus)) {
  fill: var(--color-neutral-dark);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-neutral-darker-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-neutral-darker-onlight, .fill-neutral-darker,
.fill-neutral-darker-hover:is(:hover, :focus),
.fill-neutral-darker-init:not(:is(:hover, :focus)) {
  fill: var(--color-neutral-darker);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-neutral-darkest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-neutral-darkest-onlight, .fill-neutral-darkest,
.fill-neutral-darkest-hover:is(:hover, :focus),
.fill-neutral-darkest-init:not(:is(:hover, :focus)) {
  fill: var(--color-neutral-darkest);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-primary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-primary-onlight, .fill-primary,
.fill-primary-hover:is(:hover, :focus),
.fill-primary-init:not(:is(:hover, :focus)) {
  fill: var(--color-primary);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-primary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-primary-alt-onlight, .fill-primary-alt,
.fill-primary-alt-hover:is(:hover, :focus),
.fill-primary-alt-init:not(:is(:hover, :focus)) {
  fill: var(--color-primary-alt);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-primary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-primary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-primary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-primary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-secondary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-secondary-onlight, .fill-secondary,
.fill-secondary-hover:is(:hover, :focus),
.fill-secondary-init:not(:is(:hover, :focus)) {
  fill: var(--color-secondary);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-secondary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-secondary-alt-onlight, .fill-secondary-alt,
.fill-secondary-alt-hover:is(:hover, :focus),
.fill-secondary-alt-init:not(:is(:hover, :focus)) {
  fill: var(--color-secondary-alt);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-secondary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-secondary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-secondary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-secondary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-accent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-accent-onlight, .fill-accent,
.fill-accent-hover:is(:hover, :focus),
.fill-accent-init:not(:is(:hover, :focus)) {
  fill: var(--color-accent);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-accent-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-accent-alt-onlight, .fill-accent-alt,
.fill-accent-alt-hover:is(:hover, :focus),
.fill-accent-alt-init:not(:is(:hover, :focus)) {
  fill: var(--color-accent-alt);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-accent-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-accent-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .fill-accent-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .fill-accent-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-inherit-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-inherit-onlight, .stroke-inherit,
.stroke-inherit-hover:is(:hover, :focus),
.stroke-inherit-init:not(:is(:hover, :focus)) {
  stroke: inherit;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-transparent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-transparent-onlight, .stroke-transparent,
.stroke-transparent-hover:is(:hover, :focus),
.stroke-transparent-init:not(:is(:hover, :focus)) {
  stroke: transparent;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-currentColor-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-currentColor-onlight, .stroke-currentColor,
.stroke-currentColor-hover:is(:hover, :focus),
.stroke-currentColor-init:not(:is(:hover, :focus)) {
  stroke: currentColor;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-dark-onlight, .stroke-dark,
.stroke-dark-hover:is(:hover, :focus),
.stroke-dark-init:not(:is(:hover, :focus)) {
  stroke: var(--color-dark);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-dark-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-dark-alt-onlight, .stroke-dark-alt,
.stroke-dark-alt-hover:is(:hover, :focus),
.stroke-dark-alt-init:not(:is(:hover, :focus)) {
  stroke: var(--color-dark-alt);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-light-onlight, .stroke-light,
.stroke-light-hover:is(:hover, :focus),
.stroke-light-init:not(:is(:hover, :focus)) {
  stroke: var(--color-light);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-light-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-light-alt-onlight, .stroke-light-alt,
.stroke-light-alt-hover:is(:hover, :focus),
.stroke-light-alt-init:not(:is(:hover, :focus)) {
  stroke: var(--color-light-alt);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-neutral-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-neutral-onlight, .stroke-neutral,
.stroke-neutral-hover:is(:hover, :focus),
.stroke-neutral-init:not(:is(:hover, :focus)) {
  stroke: var(--color-neutral);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-neutral-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-neutral-light-onlight, .stroke-neutral-light,
.stroke-neutral-light-hover:is(:hover, :focus),
.stroke-neutral-light-init:not(:is(:hover, :focus)) {
  stroke: var(--color-neutral-light);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-neutral-lighter-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-neutral-lighter-onlight, .stroke-neutral-lighter,
.stroke-neutral-lighter-hover:is(:hover, :focus),
.stroke-neutral-lighter-init:not(:is(:hover, :focus)) {
  stroke: var(--color-neutral-lighter);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-neutral-lightest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-neutral-lightest-onlight, .stroke-neutral-lightest,
.stroke-neutral-lightest-hover:is(:hover, :focus),
.stroke-neutral-lightest-init:not(:is(:hover, :focus)) {
  stroke: var(--color-neutral-lightest);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-neutral-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-neutral-dark-onlight, .stroke-neutral-dark,
.stroke-neutral-dark-hover:is(:hover, :focus),
.stroke-neutral-dark-init:not(:is(:hover, :focus)) {
  stroke: var(--color-neutral-dark);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-neutral-darker-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-neutral-darker-onlight, .stroke-neutral-darker,
.stroke-neutral-darker-hover:is(:hover, :focus),
.stroke-neutral-darker-init:not(:is(:hover, :focus)) {
  stroke: var(--color-neutral-darker);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-neutral-darkest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-neutral-darkest-onlight, .stroke-neutral-darkest,
.stroke-neutral-darkest-hover:is(:hover, :focus),
.stroke-neutral-darkest-init:not(:is(:hover, :focus)) {
  stroke: var(--color-neutral-darkest);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-primary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-primary-onlight, .stroke-primary,
.stroke-primary-hover:is(:hover, :focus),
.stroke-primary-init:not(:is(:hover, :focus)) {
  stroke: var(--color-primary);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-primary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-primary-alt-onlight, .stroke-primary-alt,
.stroke-primary-alt-hover:is(:hover, :focus),
.stroke-primary-alt-init:not(:is(:hover, :focus)) {
  stroke: var(--color-primary-alt);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-primary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-primary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-primary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-primary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-secondary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-secondary-onlight, .stroke-secondary,
.stroke-secondary-hover:is(:hover, :focus),
.stroke-secondary-init:not(:is(:hover, :focus)) {
  stroke: var(--color-secondary);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-secondary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-secondary-alt-onlight, .stroke-secondary-alt,
.stroke-secondary-alt-hover:is(:hover, :focus),
.stroke-secondary-alt-init:not(:is(:hover, :focus)) {
  stroke: var(--color-secondary-alt);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-secondary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-secondary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-secondary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-secondary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-accent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-accent-onlight, .stroke-accent,
.stroke-accent-hover:is(:hover, :focus),
.stroke-accent-init:not(:is(:hover, :focus)) {
  stroke: var(--color-accent);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-accent-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-accent-alt-onlight, .stroke-accent-alt,
.stroke-accent-alt-hover:is(:hover, :focus),
.stroke-accent-alt-init:not(:is(:hover, :focus)) {
  stroke: var(--color-accent-alt);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-accent-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-accent-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stroke-accent-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stroke-accent-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-inherit-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-inherit-onlight, .stop-color-inherit,
.stop-color-inherit-hover:is(:hover, :focus),
.stop-color-inherit-init:not(:is(:hover, :focus)) {
  stop-color: inherit;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-transparent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-transparent-onlight, .stop-color-transparent,
.stop-color-transparent-hover:is(:hover, :focus),
.stop-color-transparent-init:not(:is(:hover, :focus)) {
  stop-color: transparent;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-currentColor-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-currentColor-onlight, .stop-color-currentColor,
.stop-color-currentColor-hover:is(:hover, :focus),
.stop-color-currentColor-init:not(:is(:hover, :focus)) {
  stop-color: currentColor;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-dark-onlight, .stop-color-dark,
.stop-color-dark-hover:is(:hover, :focus),
.stop-color-dark-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-dark);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-dark-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-dark-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-light-onlight, .stop-color-light,
.stop-color-light-hover:is(:hover, :focus),
.stop-color-light-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-light);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-light-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-light-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-neutral-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-neutral-onlight, .stop-color-neutral,
.stop-color-neutral-hover:is(:hover, :focus),
.stop-color-neutral-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-neutral);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-neutral-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-neutral-light-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-neutral-lighter-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-neutral-lighter-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-neutral-lightest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-neutral-lightest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-neutral-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-neutral-dark-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-neutral-darker-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-neutral-darker-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-neutral-darkest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-neutral-darkest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-primary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-primary-onlight, .stop-color-primary,
.stop-color-primary-hover:is(:hover, :focus),
.stop-color-primary-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-primary);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-primary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-primary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-primary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-primary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-primary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-primary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-secondary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-secondary-onlight, .stop-color-secondary,
.stop-color-secondary-hover:is(:hover, :focus),
.stop-color-secondary-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-secondary);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-secondary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-secondary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-secondary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-secondary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-secondary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-secondary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-accent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-accent-onlight, .stop-color-accent,
.stop-color-accent-hover:is(:hover, :focus),
.stop-color-accent-init:not(:is(:hover, :focus)) {
  stop-color: var(--color-accent);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-accent-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-accent-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-accent-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-accent-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .stop-color-accent-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .stop-color-accent-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-inherit-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-inherit-onlight, .flood-color-inherit,
.flood-color-inherit-hover:is(:hover, :focus),
.flood-color-inherit-init:not(:is(:hover, :focus)) {
  flood-color: inherit;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-transparent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-transparent-onlight, .flood-color-transparent,
.flood-color-transparent-hover:is(:hover, :focus),
.flood-color-transparent-init:not(:is(:hover, :focus)) {
  flood-color: transparent;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-currentColor-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-currentColor-onlight, .flood-color-currentColor,
.flood-color-currentColor-hover:is(:hover, :focus),
.flood-color-currentColor-init:not(:is(:hover, :focus)) {
  flood-color: currentColor;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-dark-onlight, .flood-color-dark,
.flood-color-dark-hover:is(:hover, :focus),
.flood-color-dark-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-dark);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-dark-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-dark-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-light-onlight, .flood-color-light,
.flood-color-light-hover:is(:hover, :focus),
.flood-color-light-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-light);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-light-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-light-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-neutral-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-neutral-onlight, .flood-color-neutral,
.flood-color-neutral-hover:is(:hover, :focus),
.flood-color-neutral-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-neutral);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-neutral-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-neutral-light-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-neutral-lighter-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-neutral-lighter-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-neutral-lightest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-neutral-lightest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-neutral-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-neutral-dark-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-neutral-darker-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-neutral-darker-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-neutral-darkest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-neutral-darkest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-primary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-primary-onlight, .flood-color-primary,
.flood-color-primary-hover:is(:hover, :focus),
.flood-color-primary-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-primary);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-primary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-primary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-primary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-primary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-primary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-primary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-secondary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-secondary-onlight, .flood-color-secondary,
.flood-color-secondary-hover:is(:hover, :focus),
.flood-color-secondary-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-secondary);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-secondary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-secondary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-secondary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-secondary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-secondary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-secondary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-accent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-accent-onlight, .flood-color-accent,
.flood-color-accent-hover:is(:hover, :focus),
.flood-color-accent-init:not(:is(:hover, :focus)) {
  flood-color: var(--color-accent);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-accent-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-accent-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-accent-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-accent-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .flood-color-accent-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .flood-color-accent-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-inherit-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-inherit-onlight, .lighting-color-inherit,
.lighting-color-inherit-hover:is(:hover, :focus),
.lighting-color-inherit-init:not(:is(:hover, :focus)) {
  lighting-color: inherit;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-transparent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-transparent-onlight, .lighting-color-transparent,
.lighting-color-transparent-hover:is(:hover, :focus),
.lighting-color-transparent-init:not(:is(:hover, :focus)) {
  lighting-color: transparent;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-currentColor-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-currentColor-onlight, .lighting-color-currentColor,
.lighting-color-currentColor-hover:is(:hover, :focus),
.lighting-color-currentColor-init:not(:is(:hover, :focus)) {
  lighting-color: currentColor;
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-dark-onlight, .lighting-color-dark,
.lighting-color-dark-hover:is(:hover, :focus),
.lighting-color-dark-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-dark);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-dark-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-dark-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-light-onlight, .lighting-color-light,
.lighting-color-light-hover:is(:hover, :focus),
.lighting-color-light-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-light);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-light-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-light-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-neutral-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-neutral-onlight, .lighting-color-neutral,
.lighting-color-neutral-hover:is(:hover, :focus),
.lighting-color-neutral-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-neutral);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-neutral-light-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-neutral-light-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-neutral-lighter-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-neutral-lighter-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-neutral-lightest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-neutral-lightest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-neutral-dark-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-neutral-dark-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-neutral-darker-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-neutral-darker-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-neutral-darkest-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-neutral-darkest-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-primary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-primary-onlight, .lighting-color-primary,
.lighting-color-primary-hover:is(:hover, :focus),
.lighting-color-primary-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-primary);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-primary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-primary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-primary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-primary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-primary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-primary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-secondary-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-secondary-onlight, .lighting-color-secondary,
.lighting-color-secondary-hover:is(:hover, :focus),
.lighting-color-secondary-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-secondary);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-secondary-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-secondary-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-secondary-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-secondary-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-secondary-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-secondary-gradient-end-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-accent-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-accent-onlight, .lighting-color-accent,
.lighting-color-accent-hover:is(:hover, :focus),
.lighting-color-accent-init:not(:is(:hover, :focus)) {
  lighting-color: var(--color-accent);
}

:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-accent-alt-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-accent-alt-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-accent-gradient-start-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-accent-gradient-start-onlight, .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(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.content-palette-dark) .lighting-color-accent-gradient-end-ondark,
:where(.scheme-palette-light,
.scheme-palette-light-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-dark .scheme-palette-invert,
:is(html, body).scheme-palette-light .scheme-palette-inherit) .lighting-color-accent-gradient-end-onlight, .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;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.accordion-trigger:is(.list-title)::after {
  display: inline-block;
  align-self: center;
  flex: 0 0 auto;
  font-weight: 700;
  font-family: var(--font-primary);
  content: "\25BC\FE0E";
  content: "+";
}
.accordion-trigger.open::after {
  content: "-";
}

/* 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;
  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);
}
.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 {
  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, .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-border-width: 1px;
  /* border width. This will be accounted for in calculating the button height as well */
  --button-border-radius: 0px;
  /* button radius */
  --button-padding-x: 1rem;
  /* horizontal padding */
  --button-padding-y: max(1em, 1rem);
  /* vertical padding */
  --button-line-height: 1.25;
  /* 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: 18px;
  line-height: var(--button-line-height);
  font-family: var(--font-secondary);
  color: var(--color-primary);
  text-transform: capitalize;
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
  min-inline-size: 12ch;
}
/* 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: 0.5em;
}
/* button w/ a height smaller than the default height */
.button.button-size-small {
  font-size: 0.875rem;
  --button-padding-y: 0.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 {
  font-size: 17px;
  --button-padding-y: 13px;
}
/* button w/ a height that's even larger for no reason than the larger height */
.button.button-size-larger {
  --button-padding-y: 16px;
  --button-padding-x: 28px;
}
/* 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: var(--color-secondary);
  background-color: var(--color-secondary);
  color: var(--color-light);
  border-color: transparent;
}
.button.button-palette-default:is(:hover, :focus), .button.button-palette-outline:is(:hover, :focus), .button.button-palette-reverse {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%), linear-gradient(141deg, #9B0100 6.5%, var(--Brand-color-secondary, #E32223) 107.83%);
  background-color: var(--color-secondary-alt);
  color: var(--color-light);
  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(--color-secondary);
  border-color: transparent;
}
.button.button-palette-outline {
  background-color: transparent;
  background-image: none;
  color: var(--color-secondary);
  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
*/
/* 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: 1px;
  border-radius: 0;
  padding: 0;
  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 {
  font-size: 22px;
}
.button-glyph:empty {
  align-self: center;
  display: inline-flex;
  max-height: -moz-max-content;
  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;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.doc-images-loaded .button-glyph-arrow:empty::after {
  -webkit-mask-image: var(--icon-arrow);
          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: 3px 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));
  -moz-column-gap: var(--columns-gap-x, 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));
  -moz-column-gap: var(--columns-gap-x, 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 {
  -moz-column-count: var(--columns-number, 1);
       column-count: var(--columns-number, 1);
  -webkit-column-count: var(--columns-number, 1);
  -moz-column-gap: var(--columns-gap-x, var(--column-gap, 0rem));
       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(*) {
  page-break-inside: avoid;
  -moz-column-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: -moz-max-content;
  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: -moz-max-content;
    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: -moz-max-content;
    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: -moz-max-content;
    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: -moz-max-content;
    max-inline-size: max-content;
    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: 30px;
  /* 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: 40px;
  }
}
/* 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.875rem;
}
@media only screen and (min-width: 48rem) {
  .container.container-size-default {
    --container-gutter: 40px;
  }
}
@media only screen and (min-width: 75rem) {
  .container.container-size-default {
    --container-gutter: 40px;
  }
}
@media only screen and (min-width: 87.5rem) {
  .container.container-size-default {
    --container-gutter: 85px;
  }
}
@media only screen and (min-width: 112.5rem) {
  .container.container-size-default {
    --container-gutter: 300px;
  }
}

/* Reduces horizontal padding */
@media only screen and (min-width: 48rem) {
  .container.container-size-wide {
    --container-gutter: 0.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: 0.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: 0;
  /* 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: 0.25rem;
  /* Padding to distance between only the anchor tags' and parent widget li item.
  Not affected by `--widget-padding-x` */
  --widget-item-padding-y: 6px;
  /* 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: 0;
  /* 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 */
}
.widget > :where(ul, .widget-content):not(.content) {
  font-size: 18px;
  color: var(--scheme-fg, var(--color-primary));
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}
.widget > :where(ul, .widget-content):not(.content) li a:is([href="#"]) {
  color: var(--color-dark) !important;
  pointer-events: none;
}
.widget > :where(ul, .widget-content):not(.content) li:is(.open, :hover, :focus-within) > a {
  color: var(--scheme-sp, var(--color-secondary));
}
.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;
}
@media only screen and (min-width: 75rem) {
  .widget {
    --widget-padding-x: 0;
  }
}
/* Widget Title
--------------------------------------------------------------- */
:is(.widget_title, .widget-title, .widgettitle) {
  font-weight: 600;
  flex-wrap: wrap;
}
:is(.widget_title, .widget-title, .widgettitle):is(.fancy-border) {
  --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;
  -moz-column-gap: 0.5em;
       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;
  margin-right: 10px;
  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: -moz-max-content;
  max-inline-size: max-content;
  max-block-size: -moz-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%);
  border-radius: 6px;
}
.popup:has(.popup-constrict) .popup-frame > *:not(.popup-destroy) {
  flex: 1 1;
  max-block-size: -moz-max-content;
  max-block-size: max-content;
  max-inline-size: -moz-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 {
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.popup-overlay {
  background: var(--color-dark, black);
  opacity: 0.8;
}
.popup-body {
  padding-block: 10vi;
}
.popup-frame {
  background: transparent;
  padding-block: 4.875rem;
  padding-inline: 3.75rem;
}
.popup-frame:is(.home-section-3-image-popup-frame, .about-section-6-image-popup-frame) img {
  transform: scale(1.2);
}
.popup-frame:is(.home-section-3-image-popup-frame, .about-section-6-image-popup-frame) .popup-close-button {
  inset-block-start: max(-1em, 1rem - 10vb);
  inset-inline-end: -0.5em;
}
.popup-close-button {
  position: absolute;
  inset-block-start: 0.75em;
  inset-inline-end: 0.25em;
  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-light);
  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;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.fancy-border {
  --fancy-border-margin-y: 1.25rem;
  --fancy-border-margin-r: auto;
  --fancy-border-margin-l: auto;
  --fancy-border-height: 1px;
  --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;
  -moz-column-gap: var(--fancy-border-margin-x);
       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);
  -moz-column-gap: var(--fancy-border-margin-l);
       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: 0.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
--------------------------------------------------------------- */
@keyframes marqueeLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.marquee-track {
  display: flex;
  gap: var(--marquee-gap, 135px);
  width: -moz-max-content;
  width: max-content;
}
.marquee-card-image {
  font-size: 100px;
}

.row-left .marquee-track {
  animation: marqueeLeft var(--marquee-duration, 160s) linear infinite;
}

/* 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-dropdown-padding-y: 1.5em;
  /* padding for dropdown */
  --filter-padding-x: 1rem;
  /* 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-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-inline: 1.5rem;
}
.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) {
  -o-object-fit: var(--responsive-background-bg-size, cover);
     object-fit: var(--responsive-background-bg-size, cover);
  -o-object-position: var(--responsive-background-bg-position, center center);
     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 Type
-------------------------------------------------------------------------------- */
/*
* Coupon Description
-------------------------------------------------------------------------------- */
/*
* Coupon Content
-------------------------------------------------------------------------------- */
/*
* Coupon CTA
-------------------------------------------------------------------------------- */
/*
* Coupon Disclaimer
-------------------------------------------------------------------------------- */
/*
* includes/repeater-coupon
-------------------------------------------------------------------------------- */
.coupon {
  max-inline-size: 100%;
}
.coupon, .coupon-container {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
}
.coupon-container {
  inline-size: 100%;
  flex: 1 1;
  gap: 0.75rem;
  align-items: center;
  text-align: center;
}
/* 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: 100px;
}
/*
* Case Result Value
-------------------------------------------------------------------------------- */
.result-value {
  font-size: 4rem;
  text-transform: uppercase;
}
:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.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: 100px;
  }
}
/*
* 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: 1px solid var(--color-neutral);
  border-radius: 2px;
  padding: 25px 28px;
  margin-block-end: 10px;
}
.list:has(.accordion) .list-title {
  font-size: 20px;
  line-height: 120%;
  padding-bottom: 0;
  margin-bottom: 0;
}
.list:has(.accordion) .list-title:is(.open) {
  padding-bottom: 25px;
}
.list:has(.accordion) .list-items {
  padding-bottom: 0;
}
.list:has(.accordion) .list-item-el p:last-child {
  margin-bottom: 0;
}
/* 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, .menudir-title:is(.fancy-border-after):before {
  --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;
  text-decoration: underline;
  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;
  text-decoration: 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;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 700;
}
.pagination a {
  text-decoration: none;
}
.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: 34px;
  margin-block-start: 52px;
  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-secondary);
}
.pagination-num-list a,
.pagination-num-list span {
  margin-inline: 0.125em;
}
.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 var(--color-secondary);
  border-top: 0;
  border-left: 0;
}
.pagination-nav-link :is(.next, [rel=next]):after {
  transform: rotate(-45deg);
  margin-inline-start: 0.5em;
}
.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%;
  -o-object-fit: cover;
     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%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: var(--profile-image-position);
     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);
  -webkit-backdrop-filter: var(--profile-image-overlay-backdrop-filter);
          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: -moz-max-content;
  max-inline-size: max-content;
  max-block-size: -moz-min-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-primary-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);
  font-size: 1.5rem;
  font-family: var(--font-secondary);
  color: var(--color-light);
  text-align: center;
}
.profile-image-placeholder-icon {
  font-size: 96px;
}
@media only screen and (min-width: 112.5rem) {
  .profile-image-placeholder-icon {
    font-size: 128px;
  }
}
/*
* 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 {
  background: var(--color-light-alt);
  align-self: stretch;
  position: relative;
}
.profile {
  /* styles when the profile has a link */
}
.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%;
}
/* Shared Careers and Team cards
-------------------------------------------------------------------------------- */
body:is(.onep21-template-careers, .onep21-template-team) .profile-image {
  --profile-image-aspect-w: 400;
  --profile-image-aspect-l: 515;
}
body:is(.onep21-template-careers, .onep21-template-team) .profile-image-placeholder-icon {
  inline-size: 8.5rem;
}
body:is(.onep21-template-careers, .onep21-template-team) .profile-image-placeholder-icon img {
  inline-size: 100%;
  block-size: auto;
}
body:is(.onep21-template-careers, .onep21-template-team) .profile-card {
  inline-size: 100%;
  max-inline-size: 25rem;
  justify-self: center;
  background: transparent;
}
body:is(.onep21-template-careers, .onep21-template-team) .profile-card-container {
  position: relative;
  padding: 0;
}
body:is(.onep21-template-careers, .onep21-template-team) .profile-card .profile-image {
  --profile-image-overlay-background: var(--color-primary-alt);
}
body:is(.onep21-template-careers, .onep21-template-team) .profile-card .profile-image::before {
  background: var(--profile-image-overlay-background);
  mix-blend-mode: normal;
  transition: opacity 0.25s ease-in-out;
}
body:is(.onep21-template-careers, .onep21-template-team) .profile-card .profile-summary {
  flex: 0 0 auto;
  gap: 0.625rem;
  margin-block-start: 2.1875rem;
  text-align: center;
}
body:is(.onep21-template-careers, .onep21-template-team) .profile-card .profile-name, body:is(.onep21-template-careers, .onep21-template-team) .profile-card .profile-position {
  margin: 0;
}
body:is(.onep21-template-careers, .onep21-template-team) .profile-card .profile-name {
  font-size: 26px;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-dark);
  font-weight: 500;
}
body:is(.onep21-template-careers, .onep21-template-team) .profile-card .profile-position {
  font-size: clamp(1.125rem, 0.961rem + 0.73vw, 1.375rem);
  line-height: 1.0455;
  color: var(--color-secondary);
  font-weight: 700;
}
body:is(.onep21-template-careers, .onep21-template-team) .profile-card .profile-view {
  display: grid;
  place-items: center;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 2;
  inline-size: 100%;
  aspect-ratio: 400/515;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out;
  font-size: 1.25rem;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-light);
  font-style: italic;
  font-weight: 500;
}
body:is(.onep21-template-careers, .onep21-template-team) .profile-card:is(:hover, :focus, :focus-within) .profile-image::before,
body:is(.onep21-template-careers, .onep21-template-team) .profile-card:is(:hover, :focus, :focus-within) .profile-view {
  opacity: 1;
}
@media only screen and (min-width: 87.5rem) {
  body:is(.onep21-template-careers, .onep21-template-team) .profile-card .profile-name {
    font-size: 32px;
  }
}

/* Shared Careers and Team profile popup
-------------------------------------------------------------------------------- */
body:is(.onep21-template-careers, .onep21-template-team) .popup {
  --profile-popup-image-width: 20rem;
}
body:is(.onep21-template-careers, .onep21-template-team) .popup-body {
  display: flex;
  align-items: flex-start;
  min-block-size: 100vb;
  padding-block: 1rem;
}
body:is(.onep21-template-careers, .onep21-template-team) .popup-container {
  --container-fallback: 0rem;
  inline-size: min(100% - 2rem, 88.375rem);
  max-inline-size: 88.375rem !important;
  padding-inline: 0 !important;
}
body:is(.onep21-template-careers, .onep21-template-team) .popup-frame {
  min-block-size: 0;
  padding: 4rem 1.25rem 2rem;
  border: 2px solid var(--color-neutral);
  background: var(--color-light);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
body:is(.onep21-template-careers, .onep21-template-team) .popup-close-button {
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  inline-size: 2.125rem;
  block-size: 2.125rem;
  padding: 0;
  color: var(--color-primary);
}
body:is(.onep21-template-careers, .onep21-template-team) .popup-close-button::before, body:is(.onep21-template-careers, .onep21-template-team) .popup-close-button::after {
  block-size: 1px;
}
body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-image {
  inline-size: min(100%, var(--profile-popup-image-width));
  margin-inline: auto;
}
body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-details-content {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  inline-size: 100%;
}
body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-name, body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-position, body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-certifications, body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-phone, body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-email {
  margin: 0;
}
body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-name {
  font-size: clamp(1.75rem, 1.503rem + 1.1vw, 2.125rem);
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-dark);
  font-weight: 600;
}
body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-position {
  margin-block-start: 0.3125rem;
  font-size: 1.375rem;
  line-height: 1.0455;
  color: var(--color-secondary);
  font-weight: 700;
}
body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-certifications {
  margin-block-start: 0.3125rem;
  font-size: 1.25rem;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.4);
  letter-spacing: 0.1em;
  font-weight: 600;
}
body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9375rem;
  margin-block-start: 2rem;
}
body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-phone, body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-email {
  display: flex;
  align-items: center;
  gap: 0.9375rem;
  min-inline-size: 0;
}
body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-phone::before, body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-email::before {
  content: "";
  flex: 0 0 2.125rem;
  inline-size: 2.125rem;
  block-size: 2.125rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-phone a, body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-email a {
  color: var(--color-dark);
  text-decoration: none;
  overflow-wrap: anywhere;
  font-size: 1.125rem;
  line-height: 1.2;
  font-family: var(--font-secondary);
  font-weight: 500;
}
body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-phone::before {
  background-image: url("/wp-content/themes/eliteremodeling/images/bio_phone_icon_red.svg");
}
body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-email::before {
  border-radius: 50%;
  background-color: var(--color-secondary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M9 11.5h16v11H9z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='m9 12 8 6 8-6'/%3E%3C/svg%3E");
}
body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-blurb {
  margin-block-start: 2rem;
  padding-block-start: 2rem;
  border-block-start: 1px solid var(--color-neutral);
  font-size: 1.25rem;
  line-height: 1.3;
}
body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-blurb p:nth-last-child(n+2) {
  margin-block-end: 1.5rem;
}
@media only screen and (min-width: 48rem) {
  body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-details {
    gap: 70px;
  }
  body:is(.onep21-template-careers, .onep21-template-team) .popup-frame {
    padding-inline: 2.5rem;
  }
}
@media only screen and (min-width: 75rem) {
  body:is(.onep21-template-careers, .onep21-template-team) .popup {
    --profile-popup-image-width: 15.9125rem;
    --profile-popup-frame-height: 27.9656rem;
    --profile-popup-padding-block: 3.262rem;
    --profile-popup-padding-inline: 3.5405rem;
    --profile-popup-column-gap: 2.7449rem;
    --profile-popup-content-width: 29.2387rem;
    --profile-popup-logo-width: 5.4102rem;
    --profile-popup-name-size: 2.125rem;
    --profile-popup-position-size: 1.375rem;
    --profile-popup-copy-size: 1rem;
    --profile-popup-contact-gap: 0.5967rem;
    --profile-popup-content-gap: 1.273rem;
    --profile-popup-icon-size: 2.125rem;
    --profile-popup-link-size: 1.125rem;
    --profile-popup-close-size: 1.5028rem;
    --profile-popup-close-height: 1.6028rem;
    --profile-popup-close-top: 1.635rem;
    --profile-popup-close-right: 1.944rem;
  }
  body:is(.onep21-template-careers, .onep21-template-team) .popup-body {
    align-items: safe center;
  }
  body:is(.onep21-template-careers, .onep21-template-team) .popup-container {
    max-inline-size: 56.25rem !important;
  }
  body:is(.onep21-template-careers, .onep21-template-team) .popup-frame {
    display: flex;
    align-items: flex-start;
    min-block-size: var(--profile-popup-frame-height);
    padding: var(--profile-popup-padding-block) var(--profile-popup-padding-inline);
  }
  body:is(.onep21-template-careers, .onep21-template-team) .popup-close-button {
    inset-block-start: var(--profile-popup-close-top);
    inset-inline-end: var(--profile-popup-close-right);
    inline-size: var(--profile-popup-close-size);
    block-size: var(--profile-popup-close-height);
    font-size: var(--profile-popup-close-size);
  }
  body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-details {
    grid-template-columns: var(--profile-popup-image-width) minmax(0, 1fr);
    align-items: start;
    gap: var(--profile-popup-column-gap);
  }
  body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-details-content {
    max-inline-size: var(--profile-popup-content-width);
  }
  body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-image-placeholder-icon {
    inline-size: var(--profile-popup-logo-width);
  }
  body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-name {
    font-size: var(--profile-popup-name-size);
  }
  body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-position {
    font-size: var(--profile-popup-position-size);
  }
  body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-certifications, body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-blurb {
    font-size: var(--profile-popup-copy-size);
  }
  body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-contact {
    gap: var(--profile-popup-contact-gap);
    margin-block-start: var(--profile-popup-content-gap);
  }
  body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-phone, body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-email {
    gap: var(--profile-popup-contact-gap);
  }
  body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-phone::before, body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-email::before {
    flex-basis: var(--profile-popup-icon-size);
    inline-size: var(--profile-popup-icon-size);
    block-size: var(--profile-popup-icon-size);
  }
  body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-phone a, body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-email a {
    font-size: var(--profile-popup-link-size);
  }
  body:is(.onep21-template-careers, .onep21-template-team) .popup .profile-blurb {
    margin-block-start: var(--profile-popup-content-gap);
    padding-block-start: var(--profile-popup-content-gap);
  }
}
@media only screen and (min-width: 87.5rem) {
  body:is(.onep21-template-careers, .onep21-template-team) .popup {
    --profile-popup-image-width: 17.6804rem;
    --profile-popup-frame-height: 31.073rem;
    --profile-popup-padding-block: 3.625rem;
    --profile-popup-padding-inline: 3.934rem;
    --profile-popup-column-gap: 3.05rem;
    --profile-popup-content-width: 32.4876rem;
    --profile-popup-logo-width: 6.011rem;
    --profile-popup-contact-gap: 0.663rem;
    --profile-popup-content-gap: 1.414rem;
  }
  body:is(.onep21-template-careers, .onep21-template-team) .popup-container {
    max-inline-size: 62.5rem !important;
  }
}
@media only screen and (min-width: 112.5rem) {
  body:is(.onep21-template-careers, .onep21-template-team) .popup {
    --profile-popup-image-width: 25rem;
    --profile-popup-frame-height: 43.9375rem;
    --profile-popup-padding-block: 5.125rem;
    --profile-popup-padding-inline: 5.5625rem;
    --profile-popup-column-gap: 4.3125rem;
    --profile-popup-content-width: 45.9375rem;
    --profile-popup-logo-width: 8.5rem;
    --profile-popup-copy-size: 1.25rem;
    --profile-popup-contact-gap: 0.9375rem;
    --profile-popup-content-gap: 2rem;
    --profile-popup-close-size: 2.125rem;
    --profile-popup-close-height: 2.2667rem;
    --profile-popup-close-top: 2.3125rem;
    --profile-popup-close-right: 2.75rem;
  }
  body:is(.onep21-template-careers, .onep21-template-team) .popup-container {
    max-inline-size: 88.375rem !important;
  }
}

body.onep21-template-team .popup {
  --profile-popup-image-width: 20rem;
}
body.onep21-template-team .popup .profile-image {
  --profile-image-aspect-w: 416;
  --profile-image-aspect-l: 535;
}
body.onep21-template-team .popup .profile-position {
  font-size: 1.625rem;
  line-height: 1.2;
  font-weight: 600;
}
@media only screen and (min-width: 75rem) {
  body.onep21-template-team .popup {
    --profile-popup-image-width: 16.5488rem;
    --profile-popup-position-size: 1.0343rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  body.onep21-template-team .popup {
    --profile-popup-image-width: 18.3875rem;
    --profile-popup-position-size: 1.1492rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  body.onep21-template-team .popup {
    --profile-popup-image-width: 26rem;
    --profile-popup-position-size: 1.625rem;
  }
}

/* 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: 24px;
}
/*
* 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;
}
:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(:hover, :focus-within),
:is(html, body).scheme-palette-light .scheme-palette-invert,
:is(html, body).scheme-palette-dark .scheme-palette-inherit,
.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;
}
/* 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: -moz-max-content;
  inline-size: max-content;
  block-size: -moz-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);
  -webkit-backdrop-filter: var(--video-thumbnail-overlay-backdrop-filter);
          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;
  -o-object-fit: cover !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: 30%;
  /* height for video play triangle glyph*/
  /* Tip: set as ems so the play symbol scales along with the actual button */
  --video-button-glyph-width: 28%;
  /* 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-dark-alt);
}
.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: 62px;
}
.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.7;
}
@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.67);
}
.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 */
}
.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-light);
  inset: 0%;
}
.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: var(--color-secondary);
  /* 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: 12;
  --video-thumbnail-aspect-l: 6.5;
  --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.5;
}
.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;
  font-size: 18px;
  line-height: 110%;
  font-weight: 500;
  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(.group-frame :has(.awards-container:is(.container))) {
  margin-inline: calc(var(--container-gutter, 0px) * -1);
  justify-self: stretch;
  max-inline-size: none !important;
  inline-size: var(--comp);
}
/* Author Meta https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/parts/author.md
--------------------------------------------------------------- */
.author-meta {
  padding-inline: 0;
  padding-block: 30px 0;
  margin-block-start: 3.125rem;
  background: var(--color-light);
  color: var(--color-dark-alt);
}
.author-meta .profile-container {
  padding: 0 35px;
  gap: 26px;
}
.author-meta .profile-image {
  --profile-image-aspect-w: 1;
  --profile-image-aspect-l: 1;
  max-inline-size: 100%;
  inline-size: 150px;
  align-self: start;
}
.author-meta .profile-name {
  font-size: 24px;
  line-height: 1;
  color: inherit;
  font-weight: 600;
  margin-block: 0;
}
.author-meta .profile-position {
  font-size: 19px;
  font-family: var(--font-primary);
  color: var(--color-secondary);
  font-weight: 700;
}
.author-meta .profile-blurb {
  font-size: 17px;
  font-weight: 600;
}
.author-meta-summary {
  text-align: initial;
}
@media only screen and (min-width: 48rem) {
  .author-meta-container {
    flex-direction: row;
    align-items: start;
  }
}
/* ================================================================================
* 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: 128px;
  /* 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: 95px;
    /* 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: 145px;
    --layout-header-logo-height: 90px;
    /* 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%;
  background-color: var(--scheme-bg, var(--color-light));
  color: var(--scheme-fg, var(--color-dark));
  transition: 0.25s top ease-in-out;
  box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.8);
}
@media only screen and (min-width: 48rem) {
  .layout-header-container {
    --container-gutter: 50px;
  }
}
@media only screen and (min-width: 75rem) {
  .layout-header {
    /* Non-touch Devices Header Styles Start */
  }
  .layout-header-container {
    --container-gutter: 90px;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .layout-header {
    /* Touch Devices Header Styles Start */
  }
}
@media only screen and (max-width: 47.9375rem) {
  .layout-header {
    background: var(--color-primary);
    color: var(--color-light);
  }
}
.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;
  -moz-column-gap: var(--container-gutter);
       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 {
    -moz-column-gap: 0;
         column-gap: 0;
    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: center;
    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: flex-end;
  }
}
@media only screen and (min-width: 112.5rem) {
  .header-blocks {
    -moz-column-gap: 28px;
         column-gap: 28px;
  }
  .header-block:is(.header-nav) {
    justify-self: self-end;
  }
}
@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";
    -moz-column-gap: 0;
         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: self-end;
  }
}
@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: 18px;
  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) 0;
  }
}
@media only screen and (min-width: 112.5rem) {
  .header-logo {
    padding-block: 18px 17px;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .header-logo {
    /* Touch Devices Header Styles Start */
    padding-block: 13px;
    padding-inline: var(--container-gutter, 1rem);
  }
}
@media only screen and (max-width: 47.9375rem) {
  .header-logo {
    padding-block: 10px;
    max-inline-size: 100%;
    inline-size: 100%;
    background-color: var(--color-light);
  }
  .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: 48rem) {
  .header-toggle {
    inline-size: 86px;
  }
}
@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-secondary);
  color: var(--color-light);
  position: relative;
  z-index: 99999;
  inset-block-start: 0;
  transition: 0.375s all ease-in-out;
  order: 99;
}
.header-toggle-menu-icon {
  --fancy-icon-menu-width: 40px;
  --fancy-icon-menu-height: 1rem;
  --fancy-icon-menu-bar-height: 2px;
}
.header-toggle-menu.open .header-toggle-menu-icon {
  color: inherit;
}
.header-toggle-menu-label {
  font-size: 15px;
  line-height: 1;
  font-family: var(--font-primary);
  text-transform: uppercase;
  font-style: normal;
  font-weight: 600;
  text-align: center;
  margin-block-start: 0.3em;
  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: row;
    align-items: center;
    padding-inline: 0;
    gap: 28px;
  }
}
@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 (min-width: 75rem) {
  .doc-header-not-sticky .header-can-overlap .header-cta-text {
    color: inherit;
  }
}
@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: 28px;
}
@media only screen and (min-width: 75rem) {
  .header-numbers {
    /* Non-touch Devices Header Styles Start */
  }
  .header-numbers .number-link {
    font-size: 30px;
  }
}
@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 4px 4px 0 rgba(0, 0, 0, 0.12);
  }
  .header-nav::-webkit-scrollbar {
    display: none;
  }
}
.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: 16px;
  line-height: 120%;
  font-family: var(--font-primary);
  color: inherit;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}
.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;
  gap: 0.25em;
  flex: 1 0;
  text-decoration: none;
  /* comment out if borders are not desired */
  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.625rem;
  transform-origin: 67% 67%;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
  margin-bottom: 3px;
}
.header-nav .menu ul {
  background-color: var(--color-light);
  font-size: 18px;
  color: var(--color-primary);
  letter-spacing: 0em;
  text-transform: none;
  font-weight: 600;
}
.header-nav .menu ul li > a {
  padding-block: 10px;
}
.header-nav .menu ul:is(.menu-item-has-children) > a::after {
  color: inherit;
}
@media only screen and (min-width: 75rem) {
  .header-nav .menu {
    gap: 18px;
    display: flex;
    justify-content: space-between;
    position: relative;
  }
  .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(280px, 18vi, 20.3125rem);
    padding-block: 1.5rem;
    inset-block-start: 0;
    inset-inline-start: 100%;
    /* Take dropdowns out of doc flow + setup for hover/focus effects */
    position: absolute;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.08);
    z-index: 1;
    /* additional border styles + align to current item indicator. comment out if not needed */
  }
  .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: 18px;
    padding-inline: 0;
    border: none;
  }
  .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;
    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: 0.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;
    -moz-column-gap: var(--layout-header-menu-nontouch-dropdown-padding-x);
         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 {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, white 1.5em, white calc(100% - 3em), transparent calc(100% - 1.5em));
            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: #F2F2F2;
  }
  .header-nav .menu {
    /* extra extra deep deep deep inner level dropdown edge case dropdown fix */
  }
  .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 {
    /* top level level dropdown edge case dropdown fix */
  }
}
@media only screen and (min-width: 75rem) and (max-width: 112.4375rem) {
  .header-nav .menu > li:nth-last-child(-n+3) > ul {
    inset-inline-start: auto;
    transform: none;
    inset-inline-end: 0;
  }
  .header-nav .menu > li:nth-last-child(-n+4) > ul ul {
    inset-inline-end: 280px;
    inset-inline-start: auto;
    inset-block-start: -10%;
  }
  .header-nav .menu {
    /* extra deep inner level dropdown edge case dropdown fix */
  }
  .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 (min-width: 112.5rem) {
  .header-nav .menu {
    gap: 30px;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .header-nav .menu {
    --layout-header-menu-touch-menu-padding-x: 150px;
    background: var(--color-light);
    color: var(--color-dark);
    font-size: 17px;
    padding-block-start: 80px;
    padding-block-end: 80px;
    inline-size: 100%;
    box-shadow: inherit;
    /* shift menu to the right edge and limit inline-size. comment if not needed*/
  }
  .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-secondary));
  }
  .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 {
    color: var(--color-primary);
    align-self: stretch;
    order: 99;
    flex: 1 0 100%;
    /* basic borders to contrast multiple dropdown levels */
    padding-block: 0.25rem;
  }
  .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 {
    --layout-header-menu-touch-menu-padding-x: 64px;
    max-inline-size: 100%;
    font-size: 16px;
    padding-block-start: 60px;
    padding-block-end: 60px;
  }
  .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 (min-width: 75rem) {
  .doc-header-not-sticky .header-can-overlap .header-nav .menu:after {
    content: "";
    display: block;
    block-size: 1px;
    inline-size: 100vi;
    background: currentColor;
    opacity: 0.2;
    position: absolute;
    pointer-events: none;
    inset-block-start: 100%;
  }
}
@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;
  }
}
/* ================================================================================
* 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: 0.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: linear-gradient(0deg, rgba(33, 33, 33, .76) 0%, rgba(33, 33, 33, .75) 100%);
  --responsive-background-overlay-opacity: 1;
  --responsive-background-bg-position: center top;
}
@media only screen and (min-width: 75rem) {
  .banner-background {
    --responsive-background-overlay-background:linear-gradient(77deg, rgba(33, 33, 33, 0.88) 36.43%, rgba(21, 21, 21, 0.50) 81.75%);
  }
}
/* 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-has-background-image .banner-main {
  /* Styles specific for when banner has background image */
}
.banner-has-background-image .banner-main {
  padding-block: 38px;
  min-block-size: 500px;
}
.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));
}
@media only screen and (min-width: 48rem) {
  .banner-has-background-image .banner-main {
    padding-block: 80px;
    min-block-size: 476px;
  }
  .banner-has-background-image .banner-main-container {
    --container-gutter: 80px;
  }
}
@media only screen and (min-width: 75rem) {
  .banner-has-background-image .banner-main {
    padding-block: 68px;
    min-block-size: 445px;
  }
  .banner-has-background-image .banner-main-container {
    --container-gutter: 83px;
  }
}
@media only screen and (min-width: 87.5rem) {
  .banner-has-background-image .banner-main {
    padding-block: 86px;
    min-block-size: 485px;
  }
  .banner-has-background-image .banner-main-container {
    --container-gutter: 110px;
  }
}
@media only screen and (min-width: 112.5rem) {
  .banner-has-background-image .banner-main {
    padding-block: 123px;
    min-block-size: 560px;
  }
  .banner-has-background-image .banner-main-container {
    --container-gutter: 310px;
  }
}
.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: 60px;
}
@media only screen and (min-width: 48rem) {
  .banner-no-background-image .banner-main {
    padding-block: 80px;
  }
}
@media only screen and (min-width: 75rem) {
  .banner-no-background-image .banner-main {
    padding-block: 100px;
  }
}
@media only screen and (min-width: 112.5rem) {
  .banner-no-background-image .banner-main {
    padding-block: 140px;
  }
}
/* 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: 15px;
}
@media only screen and (min-width: 75rem) {
  .banner-body {
    justify-items: flex-start;
    text-align: left;
    max-width: 750px;
  }
}
@media only screen and (min-width: 87.5rem) {
  .banner-body {
    max-width: 815px;
  }
}
@media only screen and (min-width: 112.5rem) {
  .banner-body {
    max-width: 915px;
  }
}
.banner-has-background-image .banner-body {
  /* Styles specific for when banner has background image customized */
}
.banner-no-background-image .banner-body {
  /* Styles specific for when banner doesnt support background image */
  max-width: none;
  justify-items: center;
  text-align: center;
  gap: 20px;
}
/* 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: 50px;
  line-height: 1;
  font-family: var(--font-accent);
  color: var(--color-secondary);
}
.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) and (max-width: 74.9375rem) {
  .secondary-heading {
    max-width: 535px;
    margin-inline: auto;
  }
}
@media only screen and (min-width: 75rem) {
  .secondary-heading {
    font-size: 50px;
  }
}
@media only screen and (min-width: 87.5rem) {
  .secondary-heading {
    font-size: 55px;
  }
}
@media only screen and (min-width: 112.5rem) {
  .secondary-heading {
    font-size: 60px;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .secondary-heading > span {
    display: inline-block;
  }
}
.banner-has-background-image .secondary-heading {
  /* Styles specific for when banner has background image */
  color: #FE3C3D;
}
@media only screen and (max-width: 47.9375rem) {
  .banner-has-background-image .secondary-heading {
    font-size: 40px;
  }
}
.banner-no-background-image .secondary-heading {
  /* Styles specific for when banner doesnt support background image */
  color: var(--color-secondary);
}
.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: 30px;
  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;
}
.primary-heading.primary-heading-default {
  /* Styles specific for default template primary heading (Single Post, Single Page, Possibly Blog/ Archive etc.) */
  font-size: 30px;
  line-height: 110%;
}
.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 */
  color: inherit;
}
.banner-no-background-image .primary-heading {
  /* Styles specific for when banner doesnt support background image */
  font-weight: 600;
}
/* 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-has-background-image .banner-content {
  /* Styles specific for when banner has background image */
}
@media only screen and (min-width: 75rem) {
  .banner-has-background-image .banner-content {
    max-width: 700px;
  }
}
.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;
}
@media only screen and (min-width: 75rem) {
  .banner-buttons {
    margin-top: 5px;
  }
}
@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: 40px;
  background: var(--color-primary-alt);
  color: var(--color-light);
}
.banner-com-info-container {
  --container-gutter: 50px;
}
.banner-com-info-header {
  text-align: center;
  margin-block-end: 2rem;
}
.banner-com-info :is(.swiper) {
  --swiper-navigation-sides-offset: -10px;
  --swiper-navigation-top-offset: 35%;
  overflow: visible;
}
@media only screen and (min-width: 48rem) {
  .banner-com-info {
    padding-block: 55px;
  }
  .banner-com-info-container {
    --container-gutter: 114px;
  }
  .banner-com-info :is(.swiper) {
    --swiper-navigation-sides-offset: -20px;
  }
}
@media only screen and (min-width: 75rem) {
  .banner-com-info {
    padding-block: 65px;
  }
  .banner-com-info-container {
    --container-gutter: 202px;
  }
}
@media only screen and (min-width: 87.5rem) {
  .banner-com-info {
    padding-block: 80px;
  }
  .banner-com-info-container {
    --container-gutter: 150px;
  }
  .banner-com-info :is(.swiper) {
    --swiper-navigation-sides-offset: -50px;
  }
}
@media only screen and (min-width: 112.5rem) {
  .banner-com-info {
    padding-block: 90px;
  }
  .banner-com-info-container {
    --container-gutter: 230px;
  }
}
/* ================================================================================
* 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
--------------------------------------------------------------- */
/* Sidebar Form
--------------------------------------------------------------- */
#sidebar-form {
  border: 1px solid var(--color-neutral);
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-dark);
  --widget-padding-x: 36px;
  --widget-padding-top: 38px;
  --widget-padding-bottom: 0;
  --widget-content-margin-top: 0rem;
  --widget-content-margin-bottom: 0rem;
}
#sidebar-form .field-form {
  gap: 35px;
}
#sidebar-form .field-form-header {
  gap: 5px;
}
#sidebar-form .gform_title {
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-weight: 600;
}
#sidebar-form .gform_description {
  font-size: 28px;
  color: inherit;
  font-weight: 600;
  max-inline-size: 80ch;
}
#sidebar-form .gform_body {
  margin-inline: auto;
}
#sidebar-form .gform_footer {
  justify-content: center;
  text-align: center;
}
#sidebar-form .gfield_label {
  font-size: 14px;
}
#sidebar-form .gfield.gfield--type-submit {
  /* dont stretch flex button */
  align-self: flex-start;
}
#sidebar-form .gfield:is(.gfield--type-consent) {
  font-size: 12px;
  line-height: 120%;
}
#sidebar-form .gfield:is(.gfield--type-consent) .ginput_container {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
#sidebar-form .field-form-body {
  position: relative;
  padding-block-end: 0.5rem;
}
#sidebar-form .gfield.required-message {
  text-align: center;
  color: var(--color-light);
}
/* Sidebar Company info
--------------------------------------------------------------- */
.sidebar-com-info-container {
  display: contents;
}
.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);
}
.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: 0;
}
.sidebar-contact .contact-blocks .location {
  gap: 12px;
}
.sidebar-contact .contact-blocks .location-title {
  margin-top: 28px;
  color: var(--color-dark-alt);
}
.sidebar-contact .contact-blocks .location-directions {
  margin-top: 10px;
}
.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: 700;
  text-decoration: none;
  display: inline-block;
}
/* Global Stylees - Locations
-------------------------------------------------------------------------------- */
.location-content {
  display: contents;
}
.location-embed {
  --cover-aspect-w: 30;
  --cover-aspect-l: 23;
  border: 1px solid var(--color-neutral);
}
.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 {
  color: var(--color-primary);
}
.social-item-link svg * {
  fill: currentColor;
}
.social-item:is(:hover, :focus) {
  color: var(--scheme-sp, var(--color-secondary));
}
.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) {
  font-size: 18px;
  color: var(--color-secondary);
  text-transform: uppercase;
  max-inline-size: -moz-max-content;
  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: 18px;
  line-height: 130%;
  display: contents;
}
/* Confact Info Block - Grid setup
-------------------------------------------------------------------------------- */
.contact-blocks {
  justify-items: center;
  justify-content: center;
  -moz-column-gap: 4rem;
       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) .menudir-container {
  display: contents;
}
.contact-block:is(.contact-menudir, .contact-menudirs) {
  --pa-item-height: 2em;
  --pa-item-lines: 1;
}
/* 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. */
/* 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
--------------------------------------------------------------- */
/* 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: var(--color-neutral-dark);
  color: var(--color-dark-alt);
  overflow: clip;
}
.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 {
  position: relative;
  padding-block: 3.875rem 0;
}
.footer-top::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  block-size: 55.25rem;
  background: var(--color-primary-alt);
}
.footer-top:has(.layout-footer-offset-element) {
  padding-block-start: 0;
}
.footer-top-container {
  --container-gutter: 1.5625rem;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer-top .footer-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.375rem;
  inline-size: 18.75rem;
  text-align: center;
  color: var(--color-light);
}
.footer-top .footer-subheading {
  font-size: 26px;
  line-height: 1.2;
  font-style: italic;
  font-weight: 600;
}
.footer-top .footer-heading {
  font-size: 35px;
  line-height: 0.98;
  color: var(--color-light);
  letter-spacing: 0.12em;
  font-weight: 600;
}
.footer-top .footer-content {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  inline-size: 100%;
}
@media only screen and (min-width: 48rem) {
  .footer-top {
    padding-block-start: 5.6875rem;
  }
  .footer-top::before {
    block-size: 43rem;
  }
  .footer-top-container {
    --container-gutter: 3.75rem;
  }
  .footer-top .footer-header {
    inline-size: 33.5625rem;
  }
  .footer-top .footer-subheading {
    line-height: 1.4;
  }
}
@media only screen and (min-width: 75rem) {
  .footer-top {
    padding-block-start: 8.0625rem;
  }
  .footer-top::before {
    block-size: 48.875rem;
  }
  .footer-top-container {
    --container-gutter: 5.625rem;
  }
  .footer-top .footer-header {
    inline-size: 47.6875rem;
  }
  .footer-top .footer-heading {
    font-size: 45px;
    line-height: 0.98;
  }
  .footer-top .footer-content {
    inline-size: 40.875rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .footer-top {
    padding-block-start: 8.9375rem;
  }
  .footer-top-container {
    --container-gutter: 6.4375rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .footer-top:has(.layout-footer-offset-element) {
    padding-block-start: 8.9375rem;
  }
  .footer-top-container {
    --container-gutter: 9.375rem;
  }
}
.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 Form
--------------------------------------------------------------- */
#footer-form {
  background: var(--color-light);
  color: var(--color-dark-alt);
  box-shadow: 0 4px 27.6px rgba(0, 0, 0, 0.11);
  padding-block: 3.75rem;
  inline-size: 100%;
  margin-block-start: 3.75rem;
  margin-inline: auto;
}
.footer-form-container {
  --container-gutter: 20px;
}

#footer-form .field-form {
  gap: 0.625rem;
}
#footer-form .field-form-header {
  gap: 0;
  text-align: center;
}
#footer-form .field-form-title {
  font-size: 40px;
  line-height: 1;
  font-weight: 500;
}
#footer-form .gform_description {
  max-inline-size: 80ch;
}
#footer-form .gform_body {
  margin-inline: auto;
}
#footer-form .gform_wrapper .gform_fields {
  gap: 0.5625rem 6px;
}
#footer-form .gform_footer {
  justify-content: center;
  text-align: center;
  margin-block-start: 0.5rem;
}
#footer-form .gfield {
  --field-border-radius: 6px;
  --field-height: 45px;
  --field-box-shadow: none;
  --field-padding-x: 0.75rem;
  --field-padding-y: 0.75rem;
  font-size: 16px;
  line-height: 1.3;
}
#footer-form .gfield_label {
  font-size: 16px;
  line-height: 1.3;
  display: block;
  margin-block-end: 0.25rem;
  font-weight: 600;
}
#footer-form .gfield.gfield--type-submit {
  /* dont stretch flex button */
  align-self: flex-start;
}
#footer-form .gfield.required-message {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.125rem;
  margin-block-end: 1.8125rem;
}
#footer-form .gfield.required-message .required-glyph {
  order: 2;
}
#footer-form .gform_button.button {
  min-block-size: 3.4375rem;
  padding-inline: 1.875rem;
}
@media only screen and (min-width: 48rem) {
  #footer-form {
    inline-size: 37.25rem;
    margin-block-start: 5rem;
    padding-block: 3.75rem;
  }
  .footer-form-container {
    --container-gutter: 114px;
  }
}
@media only screen and (min-width: 75rem) {
  #footer-form {
    inline-size: 59rem;
    margin-block-start: 8.375rem;
    padding-block: 3.125rem;
  }
  .footer-form-container {
    --container-gutter: 100px;
  }
  #footer-form .gform_wrapper .gform_fields {
    inline-size: 46.5rem;
  }
  #footer-form .gfield.gfield--width-half {
    grid-column: span 6;
  }
}
@media only screen and (min-width: 87.5rem) {
  #footer-form {
    inline-size: 74.625rem;
    margin-block-start: 8.125rem;
    padding-block: 4.375rem;
  }
  .footer-form-container {
    --container-gutter: 225px;
  }
}
@media only screen and (min-width: 112.5rem) {
  #footer-form {
    margin-block-start: 8.1875rem;
  }
}
@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;
  }
}
.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 {
  display: grid;
  grid-template-areas: "logo" "phone" "location" "services" "button";
  justify-content: center;
  justify-items: center;
  row-gap: 1.875rem;
  padding-block: 3.75rem;
  text-align: center;
}
.footer-contact .layout-contact,
.footer-contact .contact-main,
.footer-contact .contact-blocks {
  display: contents;
}
.footer-contact > .footer-button {
  grid-area: button;
  background: var(--color-light);
}
.footer-contact .contact-special-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4375rem;
}
.footer-contact .contact-logo {
  display: block;
  inline-size: 8.9375rem;
}
.footer-contact .contact-logo .logo-wrapper,
.footer-contact .contact-logo picture,
.footer-contact .contact-logo .logo-image {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.footer-contact .footer-social {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  inline-size: -moz-max-content;
  inline-size: max-content;
  color: var(--color-primary);
}
.footer-contact .footer-social .social-item-link,
.footer-contact .footer-social .social-item-link-svg {
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-contact .footer-social .social-item-link-svg {
  inline-size: 1.5rem;
  block-size: 1.375rem;
}
.footer-contact .footer-social svg {
  inline-size: auto;
  max-inline-size: 100%;
  block-size: 100%;
}
.footer-contact .contact-block-title:not(.contact-block-title-custom) {
  line-height: 1;
}
.footer-contact .contact-block-content:not(.contact-block-content-custom) {
  color: var(--color-dark);
}
.footer-contact .number-link {
  font-size: 27px;
}
.footer-contact .location-content {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 0.1875rem;
}
.footer-contact .location-address,
.footer-contact .location-open-hours {
  margin: 0;
}
.footer-contact .location-directions-button {
  font-size: 16px;
  line-height: 1;
  font-family: var(--font-primary);
  color: var(--color-dark);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-block-size: 0;
}
.footer-contact .location-directions-button:hover {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.footer-contact .location-open-hours {
  display: flex;
  flex-direction: column;
  margin-block-start: 1.6875rem;
  line-height: 1.5;
}
.footer-contact .location-open-hour-days {
  font-weight: 600;
  text-transform: uppercase;
}
.footer-contact .menudir-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}
.footer-contact .menudir-menu {
  font-size: 18px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  color: var(--color-dark);
  font-weight: 600;
}
.footer-contact .menudir-menu li:hover a {
  color: var(--color-secondary);
}
@media only screen and (min-width: 48rem) {
  .footer-contact {
    grid-template-columns: 19.25rem 13.75rem;
    align-items: start;
    justify-items: start;
    gap: 1.5625rem 4.25rem;
    padding-block: 3.75rem 2rem;
    text-align: start;
  }
  .footer-contact > .footer-button {
    grid-area: 3/2;
  }
  .footer-contact .contact-special-content {
    gap: 1.5625rem;
  }
  .footer-contact .contact-block,
  .footer-contact .menudir-container,
  .footer-contact .location-content {
    align-items: flex-start;
  }
}
@media only screen and (min-width: 75rem) {
  .footer-contact {
    grid-template-columns: 13.4375rem 18.125rem 13.75rem;
    justify-content: space-between;
    gap: 1.5625rem 4rem;
    padding-block: 5rem 2rem;
  }
  .footer-contact > .footer-button {
    grid-area: 3/3;
    margin-block-start: -2.5rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .footer-contact {
    grid-template-columns: 12rem 13.4375rem 18.125rem 13.75rem;
    justify-content: space-between;
    gap: 1.5625rem 2rem;
    padding-block: 9.125rem 5.0625rem;
  }
  .footer-contact .contact-special-content {
    block-size: 100%;
    gap: 6rem;
  }
  .footer-contact > .footer-button {
    grid-area: 2/4;
  }
}
@media only screen and (min-width: 112.5rem) {
  .footer-contact {
    grid-template-columns: 14.3217rem 11.8125rem 19.25rem 13.75rem;
    grid-template-areas: none;
    -moz-column-gap: 9.125rem;
         column-gap: 9.125rem;
    justify-content: center;
    padding-block-end: 9.25rem;
  }
  .footer-contact .contact-special-content {
    block-size: auto;
    gap: 6.0625rem;
  }
  .footer-contact .menudir-menu {
    --pa-item-height: 1.6em;
  }
  .footer-contact > .footer-button {
    grid-area: 1/4;
    align-self: end;
    margin-block-start: 0;
  }
}
.footer-contact .contact-block {
  align-items: center;
  gap: 0.625rem;
}
.footer-contact .contact-block:is(.contact-special) {
  grid-area: logo;
}
.footer-contact .contact-block:is(.contact-number, .contact-numbers) {
  grid-area: phone;
}
.footer-contact .contact-block:is(.contact-location, .contact-locations) {
  grid-area: location;
}
.footer-contact .contact-block:is(.contact-menudir, .contact-menudirs).contact-menudir-services {
  grid-area: services;
}
@media only screen and (min-width: 48rem) {
  .footer-contact .contact-block {
    align-items: flex-start;
  }
  .footer-contact .contact-block:is(.contact-special) {
    justify-self: center;
    align-items: center;
    margin-block-end: 2.875rem;
    grid-area: 1/1/2/-1;
  }
  .footer-contact .contact-block:is(.contact-number, .contact-numbers) {
    grid-area: 2/1;
  }
  .footer-contact .contact-block:is(.contact-location, .contact-locations) {
    margin-block-start: -7rem;
    grid-area: 3/1;
  }
  .footer-contact .contact-block:is(.contact-menudir, .contact-menudirs).contact-menudir-services {
    grid-area: 2/2;
  }
}
@media only screen and (min-width: 75rem) {
  .footer-contact .contact-block:is(.contact-special) {
    margin-block-end: 4.4375rem;
    grid-area: 1/1/2/-1;
  }
  .footer-contact .contact-block:is(.contact-location, .contact-locations) {
    margin-block-start: 0;
    grid-area: 2/2;
  }
  .footer-contact .contact-block:is(.contact-menudir, .contact-menudirs).contact-menudir-services {
    grid-area: 2/3;
  }
}
@media only screen and (min-width: 87.5rem) {
  .footer-contact .contact-block:is(.contact-special) {
    align-items: flex-start;
    align-self: stretch;
    justify-self: start;
    margin: 0;
    grid-area: 1/1/3/2;
  }
  .footer-contact .contact-block:is(.contact-number, .contact-numbers) {
    grid-area: 1/2;
  }
  .footer-contact .contact-block:is(.contact-location, .contact-locations) {
    grid-area: 1/3;
  }
  .footer-contact .contact-block:is(.contact-menudir, .contact-menudirs).contact-menudir-services {
    grid-area: 1/4;
  }
}
@media only screen and (min-width: 112.5rem) {
  .footer-contact .contact-block:is(.contact-special) {
    align-self: start;
    grid-area: 1/1;
  }
}
.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-container {
  --container-gutter: 1.875rem;
}
@media only screen and (min-width: 48rem) {
  .footer-bottom-container {
    --container-gutter: 5.375rem;
  }
}
@media only screen and (min-width: 75rem) {
  .footer-bottom-container {
    --container-gutter: 10rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .footer-bottom-container {
    --container-gutter: 6.4375rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .footer-bottom-container {
    --container-gutter: 10.25rem;
  }
}
.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 {
  background: var(--color-primary);
  color: var(--color-light);
  padding: 1.25rem 1.875rem;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 0.03em;
  font-weight: 700;
}
.footer-utility:nth-child(n+2) {
  border-block-start: 1px solid;
}
.footer-utility-blocks {
  display: flex;
  flex-direction: column;
  gap: 1.5625rem;
  align-items: center;
  text-align: center;
}
.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;
}
.footer-utility .footer-copyright,
.footer-utility .footer-menu {
  display: inline;
  margin: 0;
}
.footer-utility .footer-copyright span::before {
  content: " | ";
  display: inline-block;
  margin-inline: 0.25em 0.5em;
}
.footer-utility .footer-menu {
  padding: 0;
}
.footer-utility .breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-utility .breadcrumbs-item {
  margin: 0;
}
.footer-utility .breadcrumbs-item::after {
  content: "»";
  display: inline-block;
  margin-inline: 0.5em;
}
.footer-utility .breadcrumbs-item:last-child::after {
  display: none;
}
.footer-utility .breadcrumbs-link {
  color: inherit;
}
.footer-utility .breadcrumbs-current {
  font-weight: 400;
}
@media only screen and (min-width: 48rem) {
  .footer-utility {
    padding-block: 20px;
    padding-inline: 5rem;
  }
  .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;
  }
  .footer-utility-blocks {
    gap: 8px;
  }
}
@media only screen and (min-width: 75rem) {
  .footer-utility-content {
    margin-inline: auto;
    order: -1;
  }
  .footer-utility .social {
    text-align: center;
  }
  .footer-utility .social::before {
    content: none;
  }
  .footer-utility :is(.footer-brand) {
    order: 99;
    text-align: right;
    align-self: center;
  }
}
@media only screen and (min-width: 112.5rem) {
  .footer-utility {
    padding-inline: 6.25rem;
    min-block-size: 5.6875rem;
  }
  .footer-utility-blocks {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "content . brand" "breadcrumbs . brand";
    gap: 0.4375rem 1.875rem;
    justify-content: space-between;
    align-items: flex-start;
    text-align: start;
  }
  .footer-utility-content {
    grid-area: content;
    margin-inline: 0;
  }
  .footer-utility .footer-breadcrumbs {
    grid-area: breadcrumbs;
  }
  .footer-utility .breadcrumbs-list {
    justify-content: flex-start;
  }
  .footer-utility-brand {
    grid-area: brand;
    text-align: end;
  }
  .footer-utility-brand:is(.footer-brand) {
    align-self: start;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .footer-utility-blocks {
    justify-content: center;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .footer-utility .footer-copyright span::after {
    content: " | ";
    display: inline-block;
    margin-inline: 0.35em 0.125em;
  }
}
.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-brand {
  margin: 0;
}
@media only screen and (min-width: 48rem) {
  .footer-brand {
    margin-top: 20px;
  }
}
@media only screen and (min-width: 112.5rem) {
  .footer-brand {
    margin-top: 0;
  }
}

/* Footer disclaimer
--------------------------------------------------------------- */
.footer-disclaimer {
  margin-block-start: 1em;
}
/* ================================================================================
* 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: 70px;
  --default-gap-y: 50px;
}
@media only screen and (min-width: 75rem) {
  .default-sections {
    --default-sidebar-width: 370px;
    --default-gap-y: 4rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .default-sections {
    --default-gap-x: 62px;
  }
}
@media only screen and (min-width: 112.5rem) {
  .default-sections {
    --default-gap-x: 145px;
  }
}
@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 {
  display: none;
}
.entry-thumbnail img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 30%;
     object-position: 50% 30%;
  z-index: 1;
}
.entry-meta {
  font-size: 15px;
  font-weight: 900;
}
.entry-meta a:not(:hover, :focus) {
  text-decoration: none;
  color: inherit;
}
.entry-meta a:is(:hover, :focus) {
  text-decoration: underline;
  color: var(--color-secondary);
}
.entry-meta-category a:not(:hover, :focus) {
  color: var(--color-dark-alt);
}
.entry-meta-category span {
  margin-inline: 0.25rem 0.125rem;
  color: var(--color-secondary);
}
.entry-title {
  font-size: 24px;
  font-weight: 600;
  margin-block: 13px;
}
.entry-excerpt {
  margin-bottom: 13px;
}
.entry-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.entry-buttons .button {
  font-size: 1rem;
  font-family: var(--font-primary);
  color: var(--color-secondary);
  text-transform: uppercase;
  font-weight: 900;
}
.entry-buttons .button:hover {
  color: var(--color-secondary-alt);
  border-color: var(--color-secondary-alt);
}
.entries .entry {
  display: grid;
  justify-content: space-between;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
  row-gap: 2rem;
}
.entries .entry:nth-child(n+2) {
  padding-block-start: 52px;
  margin-block-start: 52px;
  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:not(:has(img)) {
    grid-template-columns: 100%;
  }
  .entries .entry-thumbnail {
    --entry-thumbnail-aspect-w: 265;
    --entry-thumbnail-aspect-l: 265;
  }
  .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
-------------------------------------------------------------------------------- */
@media only screen and (max-width: 74.9375rem) {
  .layout-default-sections-simple .layout-default-aside {
    max-inline-size: var(--default-sidebar-width);
  }
}
@media only screen and (max-width: 47.9375rem) {
  .layout-default-sections-simple {
    --default-sidebar-width: auto;
  }
  .layout-default-sections-simple .layout-default-aside {
    margin-inline: calc(var(--container-gutter) * -1);
    max-inline-size: none;
  }
  .layout-default-sections-simple .layout-default-aside .widget {
    margin-block-end: 0;
    border-inline: 0;
    border-block-end: 0;
  }
}

/*
* 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;
}

.related-projects {
  margin-block: 50px 60px;
  text-align: center;
}
.related-projects-heading {
  margin-bottom: 30px;
}
.related-projects .project-card:is(:hover, :focus-within) .project-card-image-wrapper::after {
  opacity: 0.6;
  background: var(--color-dark-alt);
}
.related-projects .project-card-link {
  text-decoration: none;
}
.related-projects .project-card-title {
  margin-top: 1rem;
  font-weight: 500;
}
.related-projects .project-card-image-wrapper {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}
.related-projects .project-card-image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-dark);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out;
}
.related-projects .project-card-image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.related-projects .project-card-service-types {
  font-size: 16px;
  color: var(--color-secondary);
  text-transform: capitalize;
  font-weight: 700;
}
@media only screen and (min-width: 48rem) {
  .related-projects {
    margin-bottom: 80px;
  }
}
@media only screen and (min-width: 75rem) {
  .related-projects {
    margin-bottom: 100px;
    --swiper-pagination-bottom: 35px;
  }
  .related-projects-heading {
    text-align: left;
  }
}
@media only screen and (min-width: 87.5rem) {
  .related-projects {
    margin-top: -40px;
  }
  .related-projects .project-card-title {
    font-size: 26px;
  }
  .related-projects .project-card-service-types {
    font-size: 20px;
  }
}
@media only screen and (min-width: 112.5rem) {
  .related-projects {
    margin-block: -60px 140px;
  }
}
/* Single Post
-------------------------------------------------------------------------------- */
.single-post .default-heading {
  text-align: left;
  margin-bottom: 45px;
}

.single-post .entry-seo-content {
  background: var(--color-neutral-dark);
  border: 1px solid var(--color-primary);
  padding: 32px 26px;
  margin-block: 36px;
}
.single-post .entry-seo-content h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
}
.single-post .entry-seo-content ul > li::marker {
  color: var(--color-dark-alt);
}

/* Custom Popup Feature
-------------------------------------------------------------------------------- */
.popup:has(.company-popup) .popup-body {
  min-block-size: 100dvb;
  display: flex;
  align-items: safe center;
  padding-block: 1.5rem max(1.5rem, 9dvb);
}
.popup:has(.company-popup) .popup-container {
  --container-gutter: 1rem;
  --container-size-reference: 68.875rem;
}
.popup:has(.company-popup) .popup-close-button {
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  color: var(--color-primary);
}
.popup:has(.company-popup) .popup-close-button::before, .popup:has(.company-popup) .popup-close-button::after {
  block-size: 1.5px;
}
.popup:has(.company-popup) .company-popup {
  padding: 4.5rem 1.5rem 2rem;
  background: var(--color-light);
  color: var(--color-dark);
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.12);
}
.popup:has(.company-popup) .company-popup-blocks {
  display: grid;
  gap: 2rem;
}
.popup:has(.company-popup) .company-popup-image {
  display: block;
  inline-size: 100%;
  aspect-ratio: 342/439;
  max-block-size: 18rem;
}
.popup:has(.company-popup) .company-popup-image img {
  inline-size: 100%;
  block-size: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.popup:has(.company-popup) .company-popup-body {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 2rem;
  min-inline-size: 0;
}
.popup:has(.company-popup) .company-popup-heading {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 600;
}
.popup:has(.company-popup) .company-popup-subheading {
  margin: 5px 0 0;
  font-size: 22px;
  line-height: 1.2;
  color: var(--color-secondary);
  font-weight: 600;
}
.popup:has(.company-popup) .company-popup-content {
  border-block-start: 1px solid var(--color-neutral);
  padding-block-start: 2rem;
  font-size: 18px;
  line-height: 1.5;
}
@media only screen and (min-width: 48rem) {
  .popup:has(.company-popup) .company-popup {
    padding: 4.5rem 3rem 3rem;
  }
  .popup:has(.company-popup) .company-popup-blocks:has(.company-popup-image) {
    grid-template-columns: minmax(0, 342fr) minmax(0, 450fr);
  }
  .popup:has(.company-popup) .company-popup-image {
    max-block-size: none;
  }
}
@media only screen and (min-width: 75rem) {
  .popup:has(.company-popup) .popup-body {
    padding-block: 1.5rem;
  }
  .popup:has(.company-popup) .company-popup {
    padding: 6.6875rem 6.5rem 6.375rem;
  }
  .popup:has(.company-popup) .company-popup-blocks {
    gap: 4.3125rem;
  }
  .popup:has(.company-popup) .company-popup-heading {
    font-size: 40px;
  }
  .popup:has(.company-popup) .company-popup-subheading {
    font-size: 26px;
  }
  .popup:has(.company-popup) .popup-close-button {
    inset-block-start: 1.4375rem;
    inset-inline-end: 4rem;
  }
}

/* ================================================================================
* 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
-------------------------------------------------------------------------------- */
#home-banner .banner-main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-block-size: 56.4375rem;
  padding-block: 0;
}
#home-banner .banner-main-container {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  max-inline-size: none !important;
  margin-inline: 0;
  padding-inline: 0;
  pointer-events: none;
}
#home-banner .banner-main-blocks {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
#home-banner .banner-main-block {
  pointer-events: auto;
}
#home-banner .banner-body {
  position: absolute;
  inset-block-start: 3.6629375rem;
  inset-inline-start: 50%;
  inline-size: 22.5rem;
  max-inline-size: 100%;
  transform: translateX(-50%);
}
#home-banner .banner-body-blocks {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  text-align: center;
}
#home-banner .secondary-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin: 0 0 0.3125rem;
  font-size: 16px;
  line-height: 100%;
  font-family: var(--font-primary);
  color: var(--color-light);
  text-transform: none;
  font-weight: 700;
}
#home-banner .secondary-heading > span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: 41px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 1.875rem;
  background: rgba(255, 255, 255, 0.16);
}
#home-banner .secondary-heading > span::before {
  content: "";
  flex: 0 0 28px;
  block-size: 29px;
  background: url("images/hero_google_icon.svg?ver=1") center/contain no-repeat;
}
#home-banner .secondary-heading > span:nth-child(2)::before {
  background-image: url("images/hero-houzz-icon.svg");
}
#home-banner .primary-heading {
  margin: 0;
  font-size: 46px;
  line-height: 51px;
}
#home-banner .banner-content {
  inline-size: 21.625rem;
  margin-block-end: 0.3125rem;
  font-size: 19px;
  line-height: 28px;
  font-weight: 600;
}
#home-banner .banner-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  inline-size: 19.5625rem;
  max-inline-size: none;
  margin: 0;
}
#home-banner .banner-buttons .button {
  inline-size: 100%;
}
#home-banner .banner-buttons .button-palette-outline {
  color: var(--color-light);
}
#home-banner .banner-buttons .button-palette-outline:hover {
  background: var(--color-light);
  color: var(--color-secondary);
}
#home-banner .banner-video {
  position: absolute;
  inset-block-start: 37.6629375rem;
  inset-inline-start: calc(50% - 2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  inline-size: 19.125rem;
  margin: 0;
  transform: translateX(-50%);
}
#home-banner .banner-video .video-thumbnail {
  --video-thumbnail-aspect-w: 34;
  --video-thumbnail-aspect-l: 21;
  inline-size: 100%;
  box-shadow: 0 0 1.875rem rgba(0, 0, 0, 0.25);
}
#home-banner .banner-video .video-thumbnail:hover .video-button-default-glyph {
  --video-button-glyph-color: linear-gradient(to bottom,
  		var(--color-light-alt),
  		var(--color-light));
}
#home-banner .banner-video .video-button-default {
  --video-button-size: 64px;
  --video-button-glyph-height: 22%;
  --video-button-glyph-width: 20%;
  color: var(--color-light);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
}
#home-banner .banner-video .video-button-default::before {
  background: var(--color-secondary);
  inset: 8.5%;
}
#home-banner .banner-video .video-button-default::after {
  display: none;
}
#home-banner .banner-video-cta {
  inline-size: 100%;
  font-size: 18px;
  line-height: 130%;
  font-family: var(--font-primary);
  text-transform: none;
  font-weight: 700;
  text-decoration: none;
}
#home-banner .banner-video-cta span {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: underline;
}
#home-banner .banner-background {
  --responsive-background-overlay-mix-blend: multiply;
  --responsive-background-overlay-background: rgba(0, 0, 0, 0.7);
  --responsive-background-overlay-opacity: 1;
}
#home-banner .home-banner-background-slider {
  position: absolute;
  inset: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
}
#home-banner .home-banner-background-slider-wrapper, #home-banner .home-banner-background-slide {
  block-size: 100%;
}
#home-banner .home-banner-background-slide {
  position: relative;
}
#home-banner .home-banner-background-image {
  z-index: 0;
}
@media only screen and (min-width: 48rem) {
  #home-banner .banner-main {
    min-block-size: 57.8125rem;
  }
  #home-banner .banner-body {
    inset-block-start: 7.5625rem;
    inset-inline-start: calc(50% + 0.71875rem);
    inline-size: 38.4375rem;
  }
  #home-banner .primary-heading {
    font-size: 60px;
    line-height: 66px;
  }
  #home-banner .banner-content {
    inline-size: 100%;
    font-size: 22px;
    line-height: 32px;
  }
  #home-banner .banner-buttons {
    flex-direction: row;
    inline-size: 37.4375rem;
  }
  #home-banner .banner-buttons .button {
    inline-size: auto;
  }
  #home-banner .banner-video {
    inset-block-start: 35.8125rem;
    inline-size: 21.25rem;
  }
  #home-banner .banner-video .video-thumbnail {
    box-shadow: 0 0 2.080625rem rgba(0, 0, 0, 0.25);
  }
  #home-banner .banner-video .video-button-default {
    --video-button-size: 3.75rem;
  }
}
@media only screen and (min-width: 75rem) {
  #home-banner .banner-main {
    min-block-size: 48.25rem;
  }
  #home-banner .banner-body {
    inset-block-start: 8.794625rem;
    inset-inline-start: 5.5rem;
    inline-size: 37.4375rem;
    transform: none;
  }
  #home-banner .banner-body-blocks {
    justify-items: start;
    text-align: initial;
  }
  #home-banner .primary-heading {
    inline-size: 34rem;
    font-size: 70px;
    line-height: 77px;
  }
  #home-banner .banner-content {
    inline-size: 34rem;
  }
  #home-banner .banner-buttons {
    justify-self: start;
  }
  #home-banner .banner-video {
    inset-block-start: 28.357125rem;
    inset-inline-start: auto;
    inset-inline-end: 4.375rem;
    transform: none;
  }
  #home-banner .banner-background {
    --responsive-background-overlay-background: linear-gradient(49deg,
    		rgba(0, 0, 0, 0.74) 34.6%,
    		rgba(102, 102, 102, 0) 69.5%);
  }
  #home-banner .home-banner-background-slider .slider-custom-buttons {
    position: absolute;
    inset-block-start: 41.982125rem;
    inset-inline-start: 7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    inline-size: 4.0625rem;
    block-size: 1.78125rem;
    pointer-events: auto;
  }
  #home-banner .home-banner-background-slider .slider-custom-buttons .button {
    --button-height: 1.78125rem;
    --button-padding-x: 0;
    position: static;
    margin: 0;
    padding: 0;
    overflow: visible;
    font-size: 1.4rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  #home-banner .banner-main {
    min-block-size: 48.625rem;
  }
  #home-banner .banner-body {
    inset-block-start: 6.9375rem;
    inset-inline-start: 6rem;
  }
  #home-banner .primary-heading {
    inline-size: 100%;
  }
  #home-banner .banner-content {
    inline-size: 100%;
    font-size: 24px;
    line-height: 35px;
  }
  #home-banner .banner-video {
    inset-block-start: 28.9375rem;
    inset-inline-end: 5.25rem;
  }
  #home-banner .home-banner-background-slider .slider-custom-buttons {
    inset-block-start: 41.8125rem;
    inset-inline-start: 6.125rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  #home-banner .banner-main {
    min-block-size: 51.6875rem;
  }
  #home-banner .banner-body {
    inset-block-start: 7.375rem;
    inset-inline-start: 11.6875rem;
    inline-size: 37.125rem;
  }
  #home-banner .primary-heading {
    font-size: 85px;
    line-height: 94px;
  }
  #home-banner .banner-video {
    inset-block-start: 27.75rem;
    inset-inline-end: 7.5625rem;
    inline-size: 28.6875rem;
  }
  #home-banner .banner-video .video-thumbnail {
    box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.25);
  }
  #home-banner .banner-video .video-button-default {
    --video-button-size: 4.5rem;
  }
  #home-banner .home-banner-background-slider .slider-custom-buttons {
    inset-block-start: 45.125rem;
    inset-inline-start: 11.8125rem;
  }
}

/*
* Home Section 1
-------------------------------------------------------------------------------- */
/*
* Section Offset Demo: For overlapping the section or parts of it to adjacent sections/layouts.
Sections php template parts should have classes ready for use in case overlaps are needed. DO NOT REMOVE THEM.
AVOID hard coding overlap css margins and use these variables with calc() or other similar css methods to offset instead, in case the site choses to omit overlapping or asjacent to overlapping sections due to missing content. (example: PQL44. on the case that the client chooses to omit the pa menu box, the layout breaks)

Feel free to copy/paste/comment out as needed. Find and replace `home-section-1` to rename variables and sections appropriately
Example of usage: PQL36, PQL40, PQL39
-------------------------------------------------------------------------------- */
/*
* 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:
		* `home-section-1` with `[TEMPLATE]-section-[DESIRED_NUMBER]`
		* `home-section` with `[TEMPLATE]-section`
	NOTE: Classes to use:
		.home-section-1-offset-element => the element within the section that will have the negative margins to overlap itself
		.has-home-section-1-offset => the adjacent sections/ child of adjacent sections that will have the pseudo element to adjust itself if the `home-section-1-offset-element` is next to it
		// todo replicate profile offset behavior
-------------------------------------------------------------------------------- */
:is(.home-section-1, #home-section-1) .section-container {
  --container-gutter: 1.125rem;
}
:is(.home-section-1, #home-section-1) .section-awards {
  inline-size: 100vw;
  margin-inline-start: calc(50% - 50vw);
  padding-block: 3.125rem;
  overflow: hidden;
}
:is(.home-section-1, #home-section-1) .section-body {
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding-block: 2.5rem 3.75rem;
}
:is(.home-section-1, #home-section-1) .section-body > .section-block:not(.section-image) {
  display: grid;
  align-content: start;
  gap: 1.25rem;
  inline-size: 100%;
}
:is(.home-section-1, #home-section-1) .section-image {
  justify-self: center;
  aspect-ratio: 478/341;
  overflow: hidden;
}
:is(.home-section-1, #home-section-1) .section-image :where(picture, img) {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
:is(.home-section-1, #home-section-1) .section-image img {
  -o-object-fit: cover;
     object-fit: cover;
}
:is(.home-section-1, #home-section-1) .section-content {
  display: grid;
  gap: 1.25rem;
  font-size: 18px;
  line-height: 1.5;
}
:is(.home-section-1, #home-section-1) .section-heading {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-dark);
  font-weight: 500;
  text-wrap: wrap;
}
:is(.home-section-1, #home-section-1) .section-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  padding-block-end: 1.25rem;
  text-align: center;
}
:is(.home-section-1, #home-section-1) .section-quote {
  position: relative;
  display: block;
  padding-block: 1.625rem 1.0625rem;
  padding-inline: 1.5rem;
  font-size: 20px;
  line-height: 1.4;
  font-family: var(--font-secondary);
  color: var(--color-primary);
  font-style: italic;
  font-weight: 500;
}
:is(.home-section-1, #home-section-1) .section-quote::before, :is(.home-section-1, #home-section-1) .section-quote::after {
  content: "“";
  position: absolute;
  color: var(--color-secondary);
  font-size: 3.75rem;
  font-weight: 400;
  line-height: 1;
}
:is(.home-section-1, #home-section-1) .section-quote::before {
  inset-block-start: 0;
  inset-inline-start: 0;
}
:is(.home-section-1, #home-section-1) .section-quote::after {
  inset-inline-end: 0;
  inset-block-end: 0;
  transform: rotate(180deg);
}
:is(.home-section-1, #home-section-1) .section-cite {
  font-size: 26px;
  line-height: 0.8;
  font-family: var(--font-accent);
  color: var(--color-secondary);
  text-align: center;
}
:is(.home-section-1, #home-section-1) .marquee-row, :is(.home-section-1, #home-section-1) .marquee-track, :is(.home-section-1, #home-section-1) .marquee-card {
  block-size: 6.5625rem;
}
:is(.home-section-1, #home-section-1) .marquee-track {
  --marquee-gap: 135px;
  --marquee-duration: 106.667s;
  align-items: center;
  margin-inline-start: calc(50% - 60rem);
  padding-inline-end: var(--marquee-gap);
}
:is(.home-section-1, #home-section-1) .marquee-card {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
:is(.home-section-1, #home-section-1) .marquee-card-image {
  display: block;
  font-size: var(--award-height, 6.25rem);
  line-height: 0;
}
:is(.home-section-1, #home-section-1) .marquee-card-image img {
  inline-size: auto;
  transform: translateZ(0);
}
:is(.home-section-1, #home-section-1) .marquee-card[data-award="1"] {
  --award-height: 4.4778125rem;
}
:is(.home-section-1, #home-section-1) .marquee-card[data-award="2"] {
  --award-height: 6.5625rem;
}
:is(.home-section-1, #home-section-1) .marquee-card[data-award="3"] {
  --award-height: 6.1249375rem;
}
:is(.home-section-1, #home-section-1) .marquee-card[data-award="4"] {
  --award-height: 5.1043125rem;
}
:is(.home-section-1, #home-section-1) .marquee-card[data-award="5"] {
  --award-height: 6.0206875rem;
}
:is(.home-section-1, #home-section-1) .marquee-card[data-award="6"] {
  --award-height: 5.73rem;
}
:is(.home-section-1, #home-section-1) .marquee-card[data-award="7"] {
  --award-height: 5.875rem;
}
:is(.home-section-1, #home-section-1) .marquee-card[data-award="8"] {
  --award-height: 4.5625rem;
}
:is(.home-section-1, #home-section-1) .marquee-card[data-award="9"] {
  --award-height: 2.5240625rem;
}
:is(.home-section-1, #home-section-1) .marquee-card[data-award="10"] {
  --award-height: 5.7495rem;
}
:is(.home-section-1, #home-section-1) .marquee-card[data-award="11"] {
  --award-height: 5.0206875rem;
}
:is(.home-section-1, #home-section-1) .marquee-card[data-award="12"] {
  --award-height: 4.120875rem;
}
:is(.home-section-1, #home-section-1) .marquee-card[data-award="13"] {
  --award-height: 4.125rem;
}
@media only screen and (min-width: 48rem) {
  :is(.home-section-1, #home-section-1) .section-container {
    --container-gutter: 5.25rem;
  }
  :is(.home-section-1, #home-section-1) .section-awards {
    padding-block: 4.375rem;
  }
  :is(.home-section-1, #home-section-1) .section-body {
    gap: 4.375rem;
    padding-block-end: 6.25rem;
  }
  :is(.home-section-1, #home-section-1) .section-image {
    inline-size: 26.625rem;
  }
  :is(.home-section-1, #home-section-1) .section-footer {
    gap: 1rem;
  }
  :is(.home-section-1, #home-section-1) .section-quote {
    inline-size: 40.125rem;
    max-inline-size: none;
    justify-self: center;
    padding-inline: 2.875rem 2.75rem;
    font-size: 30px;
    line-height: 1.4;
  }
  :is(.home-section-1, #home-section-1) .section-quote::before, :is(.home-section-1, #home-section-1) .section-quote::after {
    font-size: 5.9375rem;
  }
  :is(.home-section-1, #home-section-1) .section-cite {
    font-size: 29px;
    line-height: 0.8;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.home-section-1, #home-section-1) .section-body {
    grid-template-columns: 26.625rem minmax(0, 1fr);
    gap: 3.75rem;
    padding-block: 3.75rem 7.5rem;
  }
  :is(.home-section-1, #home-section-1) .section-heading {
    font-size: 38px;
    line-height: 1.2;
  }
  :is(.home-section-1, #home-section-1) .section-quote {
    inline-size: -moz-max-content;
    inline-size: max-content;
    white-space: nowrap;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.home-section-1, #home-section-1) .section-container {
    --container-gutter: 6.25rem;
  }
  :is(.home-section-1, #home-section-1) .section-awards {
    padding-block: 5.3125rem;
  }
  :is(.home-section-1, #home-section-1) .section-body {
    grid-template-columns: 32rem 39.125rem;
    gap: 5.625rem;
  }
  :is(.home-section-1, #home-section-1) .section-image {
    inline-size: 32rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.home-section-1, #home-section-1) .section-container {
    --container-gutter: 18.75rem;
  }
}

/*
* Home Section 2
-------------------------------------------------------------------------------- */
:is(.home-section-2, #home-section-2) {
  padding-block: 2.5rem 3.75rem;
}
:is(.home-section-2, #home-section-2) .section-container {
  --container-gutter: 1.125rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3.125rem;
}
:is(.home-section-2, #home-section-2) .section-services {
  min-inline-size: 0;
  margin-inline: calc(var(--container-gutter) * -1);
  overflow: hidden;
}
:is(.home-section-2, #home-section-2) .section-heading {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-dark);
  font-weight: 500;
  text-wrap: wrap;
}
:is(.home-section-2, #home-section-2) .section-content {
  font-size: 18px;
  line-height: 1.5;
}
:is(.home-section-2, #home-section-2) .home-services-header {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
  padding-block-start: 1.875rem;
  color: var(--color-dark);
}
:is(.home-section-2, #home-section-2) .home-services-header .section-buttons {
  margin-block-start: 0.5625rem;
}
:is(.home-section-2, #home-section-2) .home-services-slider {
  --swiper-theme-color: var(--color-secondary);
  margin: 0;
  padding-inline: max(1.75rem, (100% - 26.625rem) / 2);
}
:is(.home-section-2, #home-section-2) .home-services-service-slide {
  aspect-ratio: 71/84;
}
:is(.home-section-2, #home-section-2) .home-service-card, :is(.home-section-2, #home-section-2) .home-service-card-link, :is(.home-section-2, #home-section-2) .home-service-card-face {
  block-size: 100%;
}
:is(.home-section-2, #home-section-2) .home-service-card-link {
  display: block;
  color: inherit;
}
:is(.home-section-2, #home-section-2) .home-service-card-face {
  overflow: hidden;
}
:is(.home-section-2, #home-section-2) .home-service-card-image-wrapper, :is(.home-section-2, #home-section-2) .home-service-card-image, :is(.home-section-2, #home-section-2) .home-service-card-image img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
:is(.home-section-2, #home-section-2) .home-service-card-image img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center bottom;
     object-position: center bottom;
}
:is(.home-section-2, #home-section-2) .home-service-card-front {
  position: relative;
}
:is(.home-section-2, #home-section-2) .home-service-card-front .home-service-card-title {
  position: absolute;
  min-block-size: 3.4375rem;
  padding: 0.625rem 1.875rem;
  inset-inline-end: 0;
  inset-block-end: 0;
  margin: 0;
  background: var(--color-primary-alt);
  display: flex;
  align-items: center;
  font-size: 20px;
  line-height: 1.3;
  font-family: var(--font-secondary);
  color: var(--color-light);
  font-weight: 500;
  text-wrap: nowrap;
}
:is(.home-section-2, #home-section-2) .home-service-card-back {
  display: none;
}
:is(.home-section-2, #home-section-2) .swiper-custom-buttons {
  margin-block-start: 3.125rem;
}
:is(.home-section-2, #home-section-2) .swiper-custom-buttons .swiper-button-prev,
:is(.home-section-2, #home-section-2) .swiper-custom-buttons .swiper-button-next {
  color: var(--color-secondary);
}
:is(.home-section-2, #home-section-2) .swiper-custom-buttons .swiper-button-disabled {
  opacity: 0.3;
}
@media only screen and (min-width: 48rem) {
  :is(.home-section-2, #home-section-2) {
    padding-block: 5rem 3.75rem;
  }
  :is(.home-section-2, #home-section-2) .section-container {
    --container-gutter: 5.25rem;
    gap: 5rem;
  }
  :is(.home-section-2, #home-section-2) .section-heading {
    font-size: 36px;
  }
  :is(.home-section-2, #home-section-2) .swiper-custom-buttons {
    margin-block-start: 5rem;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.home-section-2, #home-section-2) {
    padding-block: 7.5rem 5rem;
  }
  :is(.home-section-2, #home-section-2) .section-container {
    --container-gutter: 0px;
    display: block;
  }
  :is(.home-section-2, #home-section-2) .section-services {
    margin-inline: 0;
    overflow: visible;
  }
  :is(.home-section-2, #home-section-2) .home-services-slider {
    padding: 0;
    overflow: visible;
  }
  :is(.home-section-2, #home-section-2) .home-services-slider-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 26.625rem);
    justify-content: center;
    gap: 0.9375rem;
    inline-size: 100% !important;
    block-size: auto !important;
    transform: none !important;
  }
  :is(.home-section-2, #home-section-2) .home-services-slide {
    inline-size: 26.625rem !important;
    block-size: 31.5rem !important;
    margin: 0 !important;
    order: initial !important;
  }
  :is(.home-section-2, #home-section-2) .home-services-header-grid {
    block-size: 100%;
    padding-inline-end: 2.75rem;
  }
  :is(.home-section-2, #home-section-2) .home-service-card-link {
    display: grid;
    text-decoration: none;
  }
  :is(.home-section-2, #home-section-2) .home-service-card-face {
    grid-area: 1/1;
    transition: opacity 0.25s ease-in-out;
  }
  :is(.home-section-2, #home-section-2) .home-service-card-back {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.875rem;
    padding: 4.875rem 2.875rem 2rem 3.8125rem;
    background: var(--color-primary-alt);
    color: var(--color-light);
    opacity: 0;
    pointer-events: none;
  }
  :is(.home-section-2, #home-section-2) .home-service-card-back .home-service-card-title {
    margin: 0;
    font-size: 34px;
    line-height: 1;
    font-family: var(--font-secondary);
    color: var(--color-light);
    font-weight: 500;
    text-wrap: wrap;
  }
  :is(.home-section-2, #home-section-2) .home-service-card-description {
    font-size: 18px;
    line-height: 1.5;
  }
  :is(.home-section-2, #home-section-2) .home-service-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 18px;
    line-height: 1.2;
    font-family: var(--font-secondary);
    color: var(--color-light);
    font-weight: 700;
    text-wrap: nowrap;
  }
  :is(.home-section-2, #home-section-2) .home-service-card-link:is(:hover, :focus-visible, :focus-within) .home-service-card-front {
    opacity: 0;
  }
  :is(.home-section-2, #home-section-2) .home-service-card-link:is(:hover, :focus-visible, :focus-within) .home-service-card-back {
    opacity: 1;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.home-section-2, #home-section-2) .home-services-slider-wrapper {
    grid-template-columns: repeat(3, 26.625rem);
  }
}

/*
* Home Section 3
-------------------------------------------------------------------------------- */
:is(.home-section-3, #home-section-3) {
  --process-card-width: min(calc(100% - 2.25rem), 20.25rem);
  --process-slider-width: var(--process-card-width);
  margin-block: 0;
  overflow-x: clip;
}
:is(.home-section-3, #home-section-3) .section-header {
  --responsive-background-bg-color: var(--color-light);
  --responsive-background-overlay-background: linear-gradient(
  	to top,
  	var(--color-light) 31%,
  	transparent 97%
  );
  --responsive-background-overlay-opacity: 1;
  display: flex;
  align-items: flex-end;
  block-size: 23.9375rem;
  padding-block-end: 3.75rem;
  z-index: 2;
}
:is(.home-section-3, #home-section-3) .section-header-container {
  --container-gutter: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: 100%;
}
:is(.home-section-3, #home-section-3) .section-heading {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-dark);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  text-wrap: nowrap;
}
:is(.home-section-3, #home-section-3) .section-buttons {
  margin-block-start: 1.25rem;
}
:is(.home-section-3, #home-section-3) .section-slider-top {
  position: absolute;
  inset-block-start: calc(100% + 3.125rem);
  inset-inline-start: 50%;
  inline-size: var(--process-slider-width);
  transform: translateX(-50%);
  z-index: 2;
}
:is(.home-section-3, #home-section-3) .section-footer {
  --responsive-background-bg-color: var(--color-neutral-lightest);
  padding-block: 11.9375rem 30px;
  z-index: 1;
}
:is(.home-section-3, #home-section-3) .section-footer-container {
  --container-gutter: 0px;
  inline-size: 100%;
}
:is(.home-section-3, #home-section-3) .home-process-nav-slider, :is(.home-section-3, #home-section-3) .home-process-detail-slider {
  margin: 0;
  padding: 0;
}
:is(.home-section-3, #home-section-3) .home-process-nav-slide {
  block-size: 8.8125rem;
}
:is(.home-section-3, #home-section-3) .home-process-nav-button {
  --process-nav-rule-color: var(--color-light);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  inline-size: 100%;
  block-size: 100%;
  padding: 2.4375rem 1.5rem 0 3.5625rem;
  border: 0;
  background: var(--color-primary-alt);
  color: var(--color-light);
  text-align: start;
}
:is(.home-section-3, #home-section-3) .home-process-nav-button::before {
  content: "";
  position: absolute;
  inset-block: 2.4375rem 0;
  inset-inline-start: 2rem;
  inline-size: 1px;
  background-color: var(--process-nav-rule-color);
}
:is(.home-section-3, #home-section-3) .home-process-nav-button::after {
  content: "";
  position: absolute;
  inset-block-start: 2.0625rem;
  inset-inline-start: 1.72rem;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: 50%;
  background-color: var(--color-secondary);
}
:is(.home-section-3, #home-section-3) .home-process-nav-number {
  font-size: 48px;
  line-height: 0.8;
  font-family: var(--font-secondary);
  color: inherit;
  font-weight: 400;
}
:is(.home-section-3, #home-section-3) .home-process-nav-title {
  font-size: 22px;
  line-height: 1;
  font-family: var(--font-secondary);
  color: inherit;
  text-transform: uppercase;
  font-weight: 500;
  text-wrap: nowrap;
}
:is(.home-section-3, #home-section-3) .home-process-detail-slider {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  inline-size: var(--process-card-width);
  margin-inline: auto;
  overflow: hidden;
}
:is(.home-section-3, #home-section-3) .home-process-detail-slider::before {
  content: "";
  grid-area: 1/1;
  background-color: var(--color-light);
}
:is(.home-section-3, #home-section-3) .home-process-detail-slider-wrapper {
  grid-area: 1/1;
}
:is(.home-section-3, #home-section-3) .home-process-detail-slide {
  display: flex;
  justify-content: center;
}
:is(.home-section-3, #home-section-3) .home-process-detail {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  inline-size: 100%;
  min-block-size: 34.5rem;
  padding: 1.25rem 1.25rem 1.875rem;
  color: var(--color-dark);
}
:is(.home-section-3, #home-section-3) .home-process-detail-image-wrapper {
  aspect-ratio: 354/259;
  inline-size: 100%;
  flex: 0 0 auto;
}
:is(.home-section-3, #home-section-3) .home-process-detail-image,
:is(.home-section-3, #home-section-3) .home-process-detail-image img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
:is(.home-section-3, #home-section-3) .home-process-detail-image img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center bottom;
     object-position: center bottom;
}
:is(.home-section-3, #home-section-3) .home-process-detail-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-inline-size: 0;
}
:is(.home-section-3, #home-section-3) .home-process-detail-time-frame, :is(.home-section-3, #home-section-3) .home-process-detail-title, :is(.home-section-3, #home-section-3) .home-process-detail-subtitle, :is(.home-section-3, #home-section-3) .home-process-detail-description {
  margin: 0;
}
:is(.home-section-3, #home-section-3) .home-process-detail-time-frame {
  font-size: 20px;
  line-height: 1.2;
  font-family: var(--font-primary);
  color: var(--color-dark);
  letter-spacing: 0.1em;
  font-weight: 600;
}
:is(.home-section-3, #home-section-3) .home-process-detail-title {
  margin-block-start: -0.1875rem;
  font-size: 30px;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-dark);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  text-wrap: wrap;
}
:is(.home-section-3, #home-section-3) .home-process-detail-subtitle {
  font-size: 22px;
  line-height: 1.2;
  font-family: var(--font-primary);
  color: var(--color-secondary);
  font-weight: 600;
}
:is(.home-section-3, #home-section-3) .home-process-detail-description {
  margin-block-start: 0.75rem;
  font-size: 18px;
  line-height: 1.5;
  font-family: var(--font-primary);
  color: var(--color-dark);
  font-weight: 600;
  text-wrap: wrap;
}
:is(.home-section-3, #home-section-3) .swiper-custom-buttons {
  align-items: center;
  gap: 0.5rem;
  inline-size: 100%;
  min-block-size: 4.90625rem;
  margin-top: 1rem;
  margin-inline: auto;
}
:is(.home-section-3, #home-section-3) .swiper-custom-buttons .swiper-button-prev,
:is(.home-section-3, #home-section-3) .swiper-custom-buttons .swiper-button-next {
  block-size: 1.78125rem;
  padding: 0;
  margin: 0;
  color: var(--color-secondary);
}
:is(.home-section-3, #home-section-3) .swiper-custom-buttons .swiper-button-prev:hover,
:is(.home-section-3, #home-section-3) .swiper-custom-buttons .swiper-button-next:hover {
  color: var(--color-primary);
}
:is(.home-section-3, #home-section-3) .swiper-custom-buttons .swiper-button-disabled {
  opacity: 1;
}
@media only screen and (min-width: 48rem) {
  :is(.home-section-3, #home-section-3) {
    --process-card-width: 30.75rem;
  }
  :is(.home-section-3, #home-section-3) .section-header {
    block-size: 30.25rem;
    padding-block-end: 5rem;
  }
  :is(.home-section-3, #home-section-3) .section-heading {
    font-size: 45px;
  }
  :is(.home-section-3, #home-section-3) .section-slider-top {
    inset-block-start: calc(100% + 5rem);
  }
  :is(.home-section-3, #home-section-3) .section-footer {
    padding-block: 13.8125rem 29.1875rem;
    margin-block-end: -25rem;
  }
  :is(.home-section-3, #home-section-3) .home-process-detail {
    align-items: flex-start;
    min-block-size: 37.5625rem;
    padding: 3.125rem;
  }
  :is(.home-section-3, #home-section-3) .home-process-detail-image-wrapper {
    inline-size: 22.125rem;
  }
  :is(.home-section-3, #home-section-3) .home-process-detail-title {
    font-size: 32px;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.home-section-3, #home-section-3) {
    --process-card-width: 66.5rem;
    --process-slider-width: min(79.5rem, calc(100% - 10.5rem));
  }
  :is(.home-section-3, #home-section-3) .section-header {
    block-size: 40.3125rem;
    padding-block-end: 0;
  }
  :is(.home-section-3, #home-section-3) .section-header-container {
    justify-content: flex-end;
    block-size: 100%;
  }
  :is(.home-section-3, #home-section-3) .section-slider-top {
    position: relative;
    inset: auto;
    margin-block-start: 7.5rem;
    transform: none;
  }
  :is(.home-section-3, #home-section-3) .section-footer {
    padding-block: 6.25rem 21.875rem;
    margin-block-end: -13.75rem;
  }
  :is(.home-section-3, #home-section-3) .home-process-nav-button {
    --process-nav-rule-color: var(--color-neutral);
    padding-inline-end: 0;
    background: transparent;
    color: var(--color-primary);
  }
  :is(.home-section-3, #home-section-3) .home-process-nav-button:is(.is-active) {
    --process-nav-rule-color: var(--color-light);
    background: var(--color-primary-alt);
    color: var(--color-light);
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  :is(.home-section-3, #home-section-3) .home-process-nav-title {
    font-size: 18px;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.home-section-3, #home-section-3) .home-process-detail {
    display: grid;
    grid-template-columns: 22.125rem minmax(0, 1fr);
    align-items: center;
    gap: 5.25rem;
    min-block-size: 22rem;
    padding: 2.875rem 6.0625rem 2.9375rem 3.25rem;
  }
  :is(.home-section-3, #home-section-3) .home-process-detail-content {
    gap: 0.0625rem;
  }
  :is(.home-section-3, #home-section-3) .home-process-detail-title {
    margin-block-start: 0.125rem;
    font-size: 36px;
  }
  :is(.home-section-3, #home-section-3) .home-process-detail-description {
    margin-block-start: 0.8125rem;
  }
  :is(.home-section-3, #home-section-3) .swiper-custom-buttons {
    position: absolute;
    inset-block-start: 2.875rem;
    inset-inline-end: 2.875rem;
    inline-size: 4.0625rem;
    min-block-size: 0;
    margin: 0;
    z-index: 2;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.home-section-3, #home-section-3) {
    --process-slider-width: min(79.5rem, calc(100% - 8rem));
  }
  :is(.home-section-3, #home-section-3) .section-header {
    block-size: 41.5625rem;
  }
  :is(.home-section-3, #home-section-3) .section-footer {
    margin-block-end: -12.5rem;
  }
}
:is(.home-section-3, #home-section-3) {
  /* Section 4 occupies the foreground of Section 3's intentional overlap. */
}
:is(.home-section-3, #home-section-3) + :is(.home-section-4, #home-section-4) {
  position: relative;
  z-index: 2;
}

/*
* Home Section 4
-------------------------------------------------------------------------------- */
:is(.home-section-4, #home-section-4) {
  background-color: var(--color-light);
  color: var(--color-dark);
}
:is(.home-section-4, #home-section-4):is(.section-style-padded) {
  padding-block: 0;
}
:is(.home-section-4, #home-section-4) .section-container {
  --container-gutter: 0px;
}
:is(.home-section-4, #home-section-4) .section-blocks {
  gap: 0;
  padding-block-start: 3.125rem;
  background: linear-gradient(208deg, #FFF 46.31%, #F4F4F4 89.01%);
  overflow: hidden;
}
:is(.home-section-4, #home-section-4) .section-body {
  display: grid;
  align-content: center;
  gap: 2rem;
  padding-inline: 1.875rem;
}
:is(.home-section-4, #home-section-4) .section-content {
  display: grid;
  gap: 1.25rem;
  font-size: 18px;
  line-height: 1.5;
}
:is(.home-section-4, #home-section-4) .section-content > :where(p, ul) {
  margin-block: 0;
}
:is(.home-section-4, #home-section-4) .section-content li {
  font-weight: 700;
}
:is(.home-section-4, #home-section-4) .section-heading {
  max-inline-size: 26.0625rem;
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-dark);
  font-weight: 500;
  text-wrap: wrap;
}
:is(.home-section-4, #home-section-4) .section-block:last-child {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 34.5565rem;
}
:is(.home-section-4, #home-section-4) .section-block:last-child::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-secondary);
  clip-path: polygon(100% 18%, 100% 100%, 0 100%, 0 78%);
}
:is(.home-section-4, #home-section-4) .section-block:last-child :where(picture, img) {
  display: block;
  inline-size: 100%;
}
:is(.home-section-4, #home-section-4) .section-block:last-child picture {
  position: relative;
  inline-size: 15.375rem;
  z-index: 1;
}
:is(.home-section-4, #home-section-4) .section-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  padding: 4.375rem 1rem 1.25rem;
  text-align: center;
}
:is(.home-section-4, #home-section-4) .section-quote {
  position: relative;
  display: block;
  padding-block: 1.625rem 1.0625rem;
  padding-inline: 1.5rem;
  font-size: 20px;
  line-height: 1.4;
  font-family: var(--font-secondary);
  color: var(--color-primary);
  font-style: italic;
  font-weight: 500;
}
:is(.home-section-4, #home-section-4) .section-quote::before, :is(.home-section-4, #home-section-4) .section-quote::after {
  content: "“";
  position: absolute;
  color: var(--color-secondary);
  font-size: 3.75rem;
  font-weight: 400;
  line-height: 1;
}
:is(.home-section-4, #home-section-4) .section-quote::before {
  inset-block-start: 0;
  inset-inline-start: 0;
}
:is(.home-section-4, #home-section-4) .section-quote::after {
  inset-inline-end: 0;
  inset-block-end: 0;
  transform: rotate(180deg);
}
:is(.home-section-4, #home-section-4) .section-cite {
  font-size: 26px;
  line-height: 0.8;
  font-family: var(--font-accent);
  color: var(--color-secondary);
  text-align: center;
}
@media only screen and (min-width: 48rem) {
  :is(.home-section-4, #home-section-4) {
    background: transparent;
  }
  :is(.home-section-4, #home-section-4) .section-container {
    --container-gutter: 7.75rem;
  }
  :is(.home-section-4, #home-section-4) .section-body {
    inline-size: 27.375rem;
    justify-self: center;
    padding-inline: 0;
  }
  :is(.home-section-4, #home-section-4) .section-blocks {
    gap: 1rem;
    inline-size: calc(100% + 5rem);
    padding-block-start: 4.375rem;
    margin-inline: -2.5rem;
  }
  :is(.home-section-4, #home-section-4) .section-heading {
    font-size: 36px;
  }
  :is(.home-section-4, #home-section-4) .section-block:last-child::before {
    clip-path: polygon(100% 25%, 100% 100%, 0 100%, 0 100%);
  }
  :is(.home-section-4, #home-section-4) .section-footer {
    gap: 1rem;
    padding-block-start: 6.25rem;
  }
  :is(.home-section-4, #home-section-4) .section-quote {
    inline-size: 40.125rem;
    justify-self: center;
    padding-inline: 2.875rem 2.75rem;
    font-size: 30px;
    line-height: 1.4;
  }
  :is(.home-section-4, #home-section-4) .section-quote::before, :is(.home-section-4, #home-section-4) .section-quote::after {
    font-size: 5.9375rem;
  }
  :is(.home-section-4, #home-section-4) .section-cite {
    font-size: 29px;
    line-height: 0.8;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.home-section-4, #home-section-4) .section-blocks {
    grid-template-columns: minmax(0, 1fr) 27.125rem;
    align-items: center;
    gap: 0;
    padding-block-start: 0;
  }
  :is(.home-section-4, #home-section-4) .section-body {
    inline-size: 31.625rem;
    justify-self: start;
    margin-inline-start: 5.25rem;
    padding: 0;
  }
  :is(.home-section-4, #home-section-4) .section-block:last-child {
    block-size: 43.5rem;
  }
  :is(.home-section-4, #home-section-4) .section-block:last-child::before {
    inset-block-start: 1.5rem;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }
  :is(.home-section-4, #home-section-4) .section-block:last-child picture {
    inline-size: 19.3553125rem;
    margin-right: 4rem;
  }
  :is(.home-section-4, #home-section-4) .section-footer {
    padding-block-start: 7.5rem;
  }
  :is(.home-section-4, #home-section-4) .section-quote {
    inline-size: -moz-max-content;
    inline-size: max-content;
    white-space: nowrap;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.home-section-4, #home-section-4) .section-container {
    --container-gutter: 8.75rem;
  }
  :is(.home-section-4, #home-section-4) .section-blocks {
    grid-template-columns: minmax(0, 1fr) 29.625rem;
  }
  :is(.home-section-4, #home-section-4) .section-block:last-child picture {
    margin-right: 10rem;
  }
  :is(.home-section-4, #home-section-4) .section-body {
    margin-inline-start: 6.25rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.home-section-4, #home-section-4) .section-container {
    --container-gutter: 21.25rem;
  }
  :is(.home-section-4, #home-section-4) .section-body {
    margin-inline-start: 200px;
  }
}

/*
* Home Section 5
-------------------------------------------------------------------------------- */
:is(.home-section-5, #home-section-5) {
  background: transparent;
  color: var(--color-dark);
  position: relative;
}
:is(.home-section-5, #home-section-5)::before {
  display: block;
  position: absolute;
  content: "";
  width: 100%;
  height: 70px;
  background: linear-gradient(180deg, #FFF 0.2%, rgba(255, 255, 255, 0) 300%);
  top: 0;
}
:is(.home-section-5, #home-section-5):is(.section-style-padded) {
  padding-block: 4.375rem 5rem;
}
:is(.home-section-5, #home-section-5) .section-container {
  --container-gutter: 1.125rem;
}
:is(.home-section-5, #home-section-5) .section-blocks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-inline-size: 37.5rem;
  margin-inline: auto;
  isolation: isolate;
}
:is(.home-section-5, #home-section-5) .section-image {
  position: relative;
  aspect-ratio: 600/361;
  z-index: 2;
}
:is(.home-section-5, #home-section-5) .section-image :where(picture, img) {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
:is(.home-section-5, #home-section-5) .section-image img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center bottom;
     object-position: center bottom;
}
:is(.home-section-5, #home-section-5) .section-body {
  position: relative;
  display: grid;
  align-content: center;
  align-items: start;
  gap: 1.25rem;
  padding: 2.5rem 1.875rem;
  background-color: var(--color-light);
  box-shadow: 0 4px 3.35px rgba(0, 0, 0, 0.12);
  z-index: 1;
}
:is(.home-section-5, #home-section-5) .section-heading {
  max-inline-size: 25.8125rem;
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-dark);
  font-weight: 500;
  text-wrap: wrap;
}
:is(.home-section-5, #home-section-5) .section-content {
  font-size: 18px;
  line-height: 1.5;
}
:is(.home-section-5, #home-section-5) .section-content > :first-child {
  margin-block-start: 0;
}
@media only screen and (min-width: 48rem) {
  :is(.home-section-5, #home-section-5):is(.section-style-padded) {
    padding-block: 6.25rem 6.875rem;
  }
  :is(.home-section-5, #home-section-5)::before {
    height: 100px;
  }
  :is(.home-section-5, #home-section-5) .section-container {
    --container-gutter: var(--container-fallback);
  }
  :is(.home-section-5, #home-section-5) .section-body {
    padding: 5rem;
  }
  :is(.home-section-5, #home-section-5) .section-heading {
    font-size: 34px;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.home-section-5, #home-section-5):is(.section-style-padded) {
    padding-block: 7.9375rem 9.0625rem;
  }
  :is(.home-section-5, #home-section-5)::before {
    height: 130px;
  }
  :is(.home-section-5, #home-section-5) .section-blocks {
    grid-template-columns: 29.125rem 11.6875rem 27.25rem;
    align-items: start;
    max-inline-size: 68.0625rem;
  }
  :is(.home-section-5, #home-section-5) .section-image {
    grid-column: 1/3;
    grid-row: 1;
    aspect-ratio: auto;
    block-size: 41.9375rem;
    z-index: 1;
  }
  :is(.home-section-5, #home-section-5) .section-body {
    grid-column: 2/4;
    grid-row: 1;
    min-block-size: 32.8125rem;
    padding: 5rem 5.5rem;
    margin-block-start: 13.0625rem;
    z-index: 2;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.home-section-5, #home-section-5)::before {
    height: 150px;
  }
}

/*
* Home Section 6
-------------------------------------------------------------------------------- */
:is(.home-section-6, #home-section-6) {
  background: var(--color-primary-alt);
  color: var(--color-light);
  margin-block: 0;
}
:is(.home-section-6, #home-section-6):is(.section-style-padded) {
  padding-block: 0;
}
:is(.home-section-6, #home-section-6) .section-subheader {
  background-color: var(--color-secondary);
}
:is(.home-section-6, #home-section-6) .section-subheader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  padding-block: 2.625rem;
}
:is(.home-section-6, #home-section-6) .section-subheader .button-palette-outline {
  color: var(--color-light);
}
:is(.home-section-6, #home-section-6) .section-subheader .button-palette-outline:hover {
  background: var(--color-light);
  color: var(--color-secondary);
}
:is(.home-section-6, #home-section-6) .section-icon {
  inline-size: 5.930625rem;
  block-size: 4rem;
  flex: 0 0 auto;
}
:is(.home-section-6, #home-section-6) .section-icon :where(picture, img) {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
:is(.home-section-6, #home-section-6) .section-subheading {
  font-size: 30px;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-light);
  font-style: italic;
  font-weight: 500;
  text-align: center;
  text-wrap: wrap;
}
:is(.home-section-6, #home-section-6) .section-buttons {
  display: flex;
}
:is(.home-section-6, #home-section-6) .section-container {
  --container-gutter: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.125rem;
  padding-block: 4.375rem;
}
:is(.home-section-6, #home-section-6) .section-header {
  inline-size: 100%;
}
:is(.home-section-6, #home-section-6) .section-heading {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-light);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  text-wrap: wrap;
}
:is(.home-section-6, #home-section-6) .section-sps {
  display: grid;
  grid-template-columns: 9.375rem 10.09375rem;
  align-items: start;
  justify-content: center;
  gap: 3.125rem 0.5625rem;
  inline-size: 100%;
}
:is(.home-section-6, #home-section-6) .section-sp {
  margin: 0;
}
:is(.home-section-6, #home-section-6) .sp-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
:is(.home-section-6, #home-section-6) .sp-icon {
  display: block;
  inline-size: auto;
  block-size: 2.75rem;
}
:is(.home-section-6, #home-section-6) .sp-icon :where(img) {
  display: block;
  inline-size: auto;
  block-size: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
:is(.home-section-6, #home-section-6) .sp-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  font-family: var(--font-primary);
  color: var(--color-light);
  font-weight: 600;
  text-align: center;
  text-wrap: wrap;
}
@media only screen and (min-width: 48rem) {
  :is(.home-section-6, #home-section-6) .section-subheader-container {
    min-block-size: 18.8125rem;
  }
  :is(.home-section-6, #home-section-6) .section-container {
    --container-gutter: var(--container-fallback);
    gap: 4.375rem;
    padding-block: 6.25rem 7.5rem;
  }
  :is(.home-section-6, #home-section-6) .section-heading {
    font-size: 45px;
  }
  :is(.home-section-6, #home-section-6) .section-sps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4.4375rem 1.25rem;
    padding-inline: 5.625rem;
  }
  :is(.home-section-6, #home-section-6) .sp-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.home-section-6, #home-section-6) .section-subheader-container {
    flex-direction: row;
    gap: 2.6875rem;
    min-block-size: 0;
    padding-block: 1.125rem 1.3125rem;
  }
  :is(.home-section-6, #home-section-6) .section-subheading {
    font-size: 35px;
    line-height: 1.4;
    white-space: nowrap;
  }
  :is(.home-section-6, #home-section-6) .section-container {
    --container-gutter: 5.5rem;
    gap: 5.125rem;
    padding-block: 7.1875rem 8.125rem;
  }
  :is(.home-section-6, #home-section-6) .section-sps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3.125rem 2.5rem;
    padding-inline: 0;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.home-section-6, #home-section-6) {
    margin-block-end: -15.625rem;
  }
  :is(.home-section-6, #home-section-6) .section-container {
    --container-gutter: 3.625rem;
    padding-block: 8.4375rem 24.8125rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.home-section-6, #home-section-6) .section-container {
    --container-gutter: var(--container-fallback);
    max-inline-size: 85.25rem !important;
  }
}

/*
* Home Section 7
-------------------------------------------------------------------------------- */
:is(.home-section-7, #home-section-7) {
  background-color: var(--color-light);
  color: var(--color-dark-alt);
  padding-block: 0 1.25rem;
  position: relative;
  z-index: 1;
}
:is(.home-section-7, #home-section-7):is(.section-style-padded) {
  padding-block: 0 1.25rem;
}
:is(.home-section-7, #home-section-7) .section-container {
  --container-gutter: 0rem;
  --container-fallback: 0;
}
:is(.home-section-7, #home-section-7) .section-body {
  block-size: 49.875rem;
  overflow: hidden;
}
:is(.home-section-7, #home-section-7) .section-body-container {
  --container-gutter: 0rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3.125rem;
  block-size: 100%;
}
:is(.home-section-7, #home-section-7) .section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: 100%;
  text-align: center;
}
:is(.home-section-7, #home-section-7) .section-subheading {
  margin: 0;
  font-size: 24px;
  line-height: 1.4;
  font-family: var(--font-secondary);
  color: var(--color-secondary);
  font-style: italic;
  font-weight: 600;
  text-align: inherit;
  text-wrap: wrap;
}
:is(.home-section-7, #home-section-7) .section-heading {
  margin: 0.5rem 0 0;
  font-size: 34px;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-dark);
  font-weight: 500;
  text-align: inherit;
  text-wrap: wrap;
}
:is(.home-section-7, #home-section-7) .section-buttons {
  display: flex;
  margin-block-start: 1.375rem;
}
:is(.home-section-7, #home-section-7) .section-testimonials {
  inline-size: 18.75rem;
  margin-inline: auto;
}
:is(.home-section-7, #home-section-7) .slider {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  overflow: visible;
}
:is(.home-section-7, #home-section-7) .slider-custom-buttons {
  order: -1;
  gap: 0.75rem;
  align-self: center;
  inline-size: 4.625rem;
  color: var(--color-secondary);
}
:is(.home-section-7, #home-section-7) .slider-custom-buttons .button {
  --button-height: 1.875rem;
  --button-padding-x: 0;
  inline-size: 1.9375rem;
  min-block-size: 0;
  padding: 0;
  margin-inline: 0;
  font-size: 22px;
}
:is(.home-section-7, #home-section-7) .swiper-wrapper {
  align-items: stretch;
}
:is(.home-section-7, #home-section-7) .swiper-slide {
  display: flex;
  block-size: auto;
}
:is(.home-section-7, #home-section-7) .testimonial {
  inline-size: 100%;
  min-block-size: 335px;
  padding: 2.42475rem 2.42475rem 2.18225rem;
  border: 1px solid var(--color-neutral);
  background-color: var(--color-light);
  color: var(--color-dark-alt);
}
:is(.home-section-7, #home-section-7) .testimonial-container {
  gap: 0.776rem;
}
:is(.home-section-7, #home-section-7) .testimonial-stars {
  inline-size: 7.1545625rem;
  block-size: 1.159375rem;
}
:is(.home-section-7, #home-section-7) .testimonial-stars :where(picture, img) {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
:is(.home-section-7, #home-section-7) .testimonial-highlight {
  font-size: 14.743px;
  line-height: 1.5;
  font-family: var(--font-primary);
  color: var(--color-dark-alt);
  font-style: normal;
  font-weight: 400;
  text-align: start;
  text-wrap: wrap;
  --clamp-text-cap: 7;
  margin-bottom: 1rem;
}
:is(.home-section-7, #home-section-7) .testimonial-source {
  display: flex;
  flex-direction: column;
  gap: 0.4849375rem;
  margin: auto 0 0;
}
:is(.home-section-7, #home-section-7) .testimonial-source span {
  display: block;
}
:is(.home-section-7, #home-section-7) .testimonial-source span:nth-last-child(n+2)::after {
  display: none;
}
:is(.home-section-7, #home-section-7) .testimonial-source span:first-child {
  font-size: 12.415px;
  line-height: 1.3;
  font-family: var(--font-secondary);
  color: var(--color-dark-alt);
  font-weight: 700;
}
:is(.home-section-7, #home-section-7) .testimonial-source span:last-child {
  font-size: 22.502px;
  line-height: 0.8;
  font-family: var(--font-accent);
  color: var(--color-secondary);
  text-transform: capitalize;
  font-weight: 400;
}
:is(.home-section-7, #home-section-7) .responsive-background {
  --responsive-background-bg-color: var(--color-light);
  --responsive-background-bg-position: center bottom;
  --responsive-background-overlay-background: linear-gradient(186deg, rgba(255, 255, 255, 0.85) 25.99%, rgba(255, 255, 255, 0.05) 76.72%);
  --responsive-background-overlay-opacity: 1;
}
@media only screen and (min-width: 48rem) {
  :is(.home-section-7, #home-section-7), :is(.home-section-7, #home-section-7):is(.section-style-padded) {
    padding-block-end: 3.75rem;
  }
  :is(.home-section-7, #home-section-7) .section-body {
    block-size: 58.125rem;
  }
  :is(.home-section-7, #home-section-7) .section-header {
    inline-size: 42.1875rem;
    max-inline-size: 100%;
    align-self: center;
  }
  :is(.home-section-7, #home-section-7) .section-testimonials {
    inline-size: 26.5rem;
  }
  :is(.home-section-7, #home-section-7) .slider {
    gap: 3.5rem;
  }
  :is(.home-section-7, #home-section-7) .testimonial {
    min-block-size: 430px;
    padding: 65px 50px;
  }
  :is(.home-section-7, #home-section-7) .testimonial-container {
    gap: 1rem;
  }
  :is(.home-section-7, #home-section-7) .testimonial-stars {
    inline-size: 9.22075rem;
    block-size: 1.494125rem;
  }
  :is(.home-section-7, #home-section-7) .testimonial-highlight {
    font-size: 19px;
    line-height: 1.5;
    --clamp-text-cap: 6;
  }
  :is(.home-section-7, #home-section-7) .testimonial-source {
    gap: 0.625rem;
  }
  :is(.home-section-7, #home-section-7) .testimonial-source span:first-child {
    font-size: 16px;
    line-height: 1.3;
  }
  :is(.home-section-7, #home-section-7) .testimonial-source span:last-child {
    font-size: 29px;
    line-height: 0.8;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.home-section-7, #home-section-7) .section-heading {
    margin-block-start: 0;
    font-size: 42px;
  }
  :is(.home-section-7, #home-section-7) .section-buttons {
    margin-block-start: 0.75rem;
  }
  :is(.home-section-7, #home-section-7) .section-testimonials {
    inline-size: 54rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.home-section-7, #home-section-7) .section-body {
    block-size: 54.5rem;
  }
  :is(.home-section-7, #home-section-7) .section-body-container {
    inline-size: 81.5rem;
    max-inline-size: calc(100% - 6rem) !important;
    gap: 3.5rem;
  }
  :is(.home-section-7, #home-section-7) .section-header {
    inline-size: 42.1875rem;
    align-items: flex-start;
    align-self: flex-start;
    margin-inline-start: 0.625rem;
    text-align: start;
  }
  :is(.home-section-7, #home-section-7) .section-testimonials {
    inline-size: 100%;
  }
  :is(.home-section-7, #home-section-7) .slider {
    display: block;
  }
  :is(.home-section-7, #home-section-7) .slider-custom-buttons {
    position: absolute;
    inset-block-start: -5.28125rem;
    inset-inline-end: 0.625rem;
    z-index: 2;
  }
  :is(.home-section-7, #home-section-7) .responsive-background {
    --responsive-background-overlay-background: linear-gradient(125deg, rgba(255, 255, 255, 0.85) 38.25%, rgba(255, 255, 255, 0.05) 85.68%);
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.home-section-7, #home-section-7) {
    background-color: transparent;
  }
  :is(.home-section-7, #home-section-7) > .section-container {
    max-inline-size: 104.625rem !important;
  }
}

/*
* Home Section 8
-------------------------------------------------------------------------------- */
:is(.home-section-8, #home-section-8) {
  background-color: var(--color-light);
  color: var(--color-dark);
  overflow: hidden;
}
:is(.home-section-8, #home-section-8), :is(.home-section-8, #home-section-8):is(.section-style-padded) {
  padding-block: 3.75rem;
}
:is(.home-section-8, #home-section-8) .section-container {
  --container-gutter: 0rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.125rem;
  max-inline-size: none !important;
}
:is(.home-section-8, #home-section-8) .section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1875rem;
  inline-size: 100%;
  padding-inline: 1.25rem;
  text-align: center;
}
:is(.home-section-8, #home-section-8) .section-heading {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-dark);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  text-wrap: wrap;
}
:is(.home-section-8, #home-section-8) .section-content {
  max-inline-size: 36.75rem;
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  font-family: var(--font-primary);
  color: var(--color-dark);
  font-weight: 600;
  text-align: center;
  text-wrap: wrap;
}
:is(.home-section-8, #home-section-8) .section-buttons {
  display: flex;
}
:is(.home-section-8, #home-section-8) .section-slider {
  inline-size: 100%;
}
:is(.home-section-8, #home-section-8) .home-showroom-slider {
  --swiper-custom-arrow-offset-x: 0rem;
  --swiper-custom-arrow-offset-x-negate: 0rem;
  display: flex;
  flex-direction: column;
  gap: 3.125rem;
  inline-size: 100%;
  padding-inline: 0;
  margin-inline: 0;
  overflow: hidden;
}
:is(.home-section-8, #home-section-8) .home-showroom-slider-wrapper {
  align-items: center;
}
:is(.home-section-8, #home-section-8) .home-showroom-slide {
  inline-size: 17.6865rem !important;
  block-size: 23.969875rem;
}
:is(.home-section-8, #home-section-8) .home-showroom-card {
  inline-size: 100%;
  block-size: 100%;
}
:is(.home-section-8, #home-section-8) .home-showroom-gallery-card {
  margin: 0;
  box-shadow: 0.093125rem 0.1861875rem 3.448875rem 0.372375rem rgba(0, 0, 0, 0.09);
}
:is(.home-section-8, #home-section-8) .home-showroom-image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
}
:is(.home-section-8, #home-section-8) .home-showroom-image :where(img) {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
:is(.home-section-8, #home-section-8) .home-showroom-employee-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.86175rem;
  padding: 1.86175rem;
  background-color: var(--color-light);
  box-shadow: 0 0.1861875rem 0.093125rem rgba(0, 0, 0, 0.09);
}
:is(.home-section-8, #home-section-8) .home-showroom-employee-image-wrapper {
  flex: 0 0 auto;
  inline-size: 12.5201875rem;
  block-size: 14.3819375rem;
}
:is(.home-section-8, #home-section-8) .home-showroom-employee-content {
  display: flex;
  flex-direction: column;
  gap: 0.7446875rem;
  inline-size: 100%;
  text-align: center;
}
:is(.home-section-8, #home-section-8) .home-showroom-employee-position {
  font-size: 13.404px;
  line-height: 1;
  font-family: var(--font-secondary);
  color: var(--color-dark-alt);
  font-weight: 700;
  text-align: inherit;
  text-wrap: wrap;
}
:is(.home-section-8, #home-section-8) .home-showroom-employee-name {
  margin: 0;
  font-size: 31.277px;
  line-height: 0.8;
  font-family: var(--font-accent);
  color: var(--color-secondary);
  font-weight: 400;
  text-align: inherit;
  text-wrap: wrap;
}
:is(.home-section-8, #home-section-8) .slider-custom-buttons {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 2.5rem;
  inline-size: auto;
  color: var(--color-secondary);
}
:is(.home-section-8, #home-section-8) .slider-custom-buttons .button {
  --button-height: 1.78125rem;
  --button-padding-x: 0rem;
  inline-size: 0.875rem;
  block-size: 1.78125rem;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  font-size: 1.25rem;
  aspect-ratio: auto;
}
:is(.home-section-8, #home-section-8) .slider-custom-buttons .button:hover {
  color: var(--color-dark);
}
:is(.home-section-8, #home-section-8) .responsive-background {
  --responsive-background-bg-color: var(--color-light);
  --responsive-background-bg-position: center center;
  --responsive-background-overlay-background: linear-gradient(
  	to bottom,
  	var(--color-light) 3.2%,
  	rgba(255, 255, 255, 0) 62.4%,
  	var(--color-light) 96%
  );
  --responsive-background-overlay-opacity: 1;
}
:is(.home-section-8, #home-section-8) .responsive-background-bg {
  opacity: 0.2;
}
@media only screen and (min-width: 48rem) {
  :is(.home-section-8, #home-section-8), :is(.home-section-8, #home-section-8):is(.section-style-padded) {
    padding-block: 5rem 6.25rem;
  }
  :is(.home-section-8, #home-section-8) .section-container {
    gap: 7.125rem;
  }
  :is(.home-section-8, #home-section-8) .section-header {
    padding-inline: 2.5rem;
  }
  :is(.home-section-8, #home-section-8) .section-heading {
    font-size: 45px;
    max-width: 600px;
  }
  :is(.home-section-8, #home-section-8) .home-showroom-slider {
    gap: 3.75rem;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.home-section-8, #home-section-8) .section-heading {
    max-width: none;
  }
  :is(.home-section-8, #home-section-8), :is(.home-section-8, #home-section-8):is(.section-style-padded) {
    padding-block: 6.25rem;
  }
  :is(.home-section-8, #home-section-8) .slider-custom-buttons {
    align-self: flex-end;
    margin-inline-end: 11.25rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.home-section-8, #home-section-8) .home-showroom-slide {
    inline-size: 23.75rem !important;
    block-size: 32.1875rem;
  }
  :is(.home-section-8, #home-section-8) .home-showroom-gallery-card {
    box-shadow: 0.125rem 0.25rem 4.63125rem 0.5rem rgba(0, 0, 0, 0.09);
  }
  :is(.home-section-8, #home-section-8) .home-showroom-employee-card {
    gap: 2.5rem;
    padding: 2.5rem;
    box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.09);
  }
  :is(.home-section-8, #home-section-8) .home-showroom-employee-image-wrapper {
    inline-size: 16.8125rem;
    block-size: 19.3125rem;
  }
  :is(.home-section-8, #home-section-8) .home-showroom-employee-content {
    gap: 1rem;
  }
  :is(.home-section-8, #home-section-8) .home-showroom-employee-position {
    font-size: 18px;
  }
  :is(.home-section-8, #home-section-8) .home-showroom-employee-name {
    font-size: 42px;
  }
  :is(.home-section-8, #home-section-8) .slider-custom-buttons {
    margin-inline-end: 16.875rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.home-section-8, #home-section-8) .slider-custom-buttons {
    margin-inline-end: 22.3125rem;
  }
  :is(.home-section-8, #home-section-8) .responsive-background {
    --responsive-background-bg-position: center bottom;
  }
}

/*
* Home Section 9
-------------------------------------------------------------------------------- */
:is(.home-section-9, #home-section-9) {
  padding-block: 0;
  background-color: var(--color-light);
  color: var(--color-dark);
}
:is(.home-section-9, #home-section-9) .section-background {
  inline-size: 100%;
  aspect-ratio: 960/359;
}
:is(.home-section-9, #home-section-9) .section-container {
  --container-gutter: 1.125rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.75rem;
  padding-block: 4.375rem 5rem;
}
:is(.home-section-9, #home-section-9) .section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  inline-size: 100%;
  text-align: center;
}
:is(.home-section-9, #home-section-9) .section-heading {
  inline-size: 100%;
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
  font-size: 30px;
  line-height: 1.2;
}
:is(.home-section-9, #home-section-9) .section-content {
  max-inline-size: 49rem;
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
}
:is(.home-section-9, #home-section-9) .section-buttons {
  display: flex;
}
:is(.home-section-9, #home-section-9) .section-badges {
  --carousel-height: 6.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  padding-inline: 0.875rem;
}
:is(.home-section-9, #home-section-9) .section-badge {
  flex: 0 0 3.2196875rem;
  inline-size: 3.2196875rem;
}
@media only screen and (min-width: 48rem) {
  :is(.home-section-9, #home-section-9) .section-container {
    --container-gutter: 5.25rem;
    gap: 6.5rem;
    padding-block: 6.25rem 6.875rem;
  }
  :is(.home-section-9, #home-section-9) .section-header {
    padding-inline: 2.5625rem;
  }
  :is(.home-section-9, #home-section-9) .section-heading {
    inline-size: 33.5rem;
  }
  :is(.home-section-9, #home-section-9) .section-badges {
    --carousel-height: 10.3125rem;
  }
  :is(.home-section-9, #home-section-9) .section-badge {
    flex-basis: 5.3125rem;
    inline-size: 5.3125rem;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.home-section-9, #home-section-9) .section-container {
    padding-block: 7.5rem 8.75rem;
  }
  :is(.home-section-9, #home-section-9) .section-header {
    padding-inline: 0;
  }
  :is(.home-section-9, #home-section-9) .section-heading {
    inline-size: 100%;
    font-size: 36px;
  }
  :is(.home-section-9, #home-section-9) .section-content {
    min-block-size: 5.8125rem;
  }
  :is(.home-section-9, #home-section-9) .section-badges {
    justify-content: initial;
    gap: 5rem;
    inline-size: auto;
    padding-inline: 0;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.home-section-9, #home-section-9) .section-container {
    --container-gutter: 6.25rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.home-section-9, #home-section-9) .section-container {
    --container-gutter: 0rem;
  }
}

/* ================================================================================
Contact Template
================================================================================ */
/* Contact Template
-------------------------------------------------------------------------------- */
#contact-page {
  padding-block: 0 4rem;
}
#contact-page .section-container {
  --container-gutter: 1.25rem;
}
#contact-page .section-blocks-outer {
  display: grid;
  gap: 3rem;
}
#contact-page .section-images {
  position: relative;
  inline-size: min(100%, 35.375rem);
  aspect-ratio: 566/613;
  margin-inline: auto;
}
#contact-page .section-image {
  position: absolute;
}
#contact-page .section-image picture,
#contact-page .section-image img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
#contact-page .section-image img {
  -o-object-fit: cover;
     object-fit: cover;
}
#contact-page .section-image-left {
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 76.8551%;
  aspect-ratio: 435/497;
}
#contact-page .section-image-right {
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 46.2898%;
  aspect-ratio: 262/317;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.12);
}
#contact-page .section-contact {
  inline-size: min(100%, 27.875rem);
  margin-inline: auto;
}
#contact-page .contact-blocks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem;
}
#contact-page .contact-block {
  min-inline-size: 0;
}
#contact-page .contact-block-title {
  margin: 0;
  line-height: 1;
  text-transform: uppercase;
}
#contact-page .contact-numbers, #contact-page .contact-location, #contact-page .contact-list-business-hours {
  display: grid;
  grid-template-columns: 2.125rem minmax(0, 1fr);
  align-items: start;
  -moz-column-gap: 1.0625rem;
       column-gap: 1.0625rem;
  row-gap: 0.75rem;
}
#contact-page .contact-numbers::before, #contact-page .contact-location::before, #contact-page .contact-list-business-hours::before {
  content: "";
  grid-column: 1;
  grid-row: 1/span 2;
  inline-size: 2.125rem;
  block-size: 2.125rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#contact-page .contact-numbers .contact-block-title,
#contact-page .contact-numbers .contact-block-content,
#contact-page .contact-numbers .list-items, #contact-page .contact-location .contact-block-title,
#contact-page .contact-location .contact-block-content,
#contact-page .contact-location .list-items, #contact-page .contact-list-business-hours .contact-block-title,
#contact-page .contact-list-business-hours .contact-block-content,
#contact-page .contact-list-business-hours .list-items {
  grid-column: 2;
}
#contact-page .contact-numbers::before {
  background-image: url("/wp-content/themes/eliteremodeling/images/contact_phone_icon_blue.svg");
}
#contact-page .contact-numbers-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#contact-page .contact-numbers-cta {
  margin-block-start: 0.75rem;
  font-size: clamp(0.875rem, 1vw, 1.125rem);
  line-height: 1;
  color: var(--color-secondary);
}
#contact-page .contact-location::before {
  background-image: url("/wp-content/themes/eliteremodeling/images/contact_map_icon_blue.svg");
}
#contact-page .contact-list-business-hours::before {
  background-image: url("/wp-content/themes/eliteremodeling/images/contact_hours_icon_blue.svg");
}
#contact-page .contact-menudir {
  display: none;
}
#contact-page .contact-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
#contact-page .number-link {
  font-size: clamp(1.5rem, 1.75vw, 1.875rem);
  line-height: 1;
}
#contact-page .location-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
#contact-page .location-address {
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.3;
}
#contact-page .location-directions-button {
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-primary);
}
#contact-page .location-directions-button:hover {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}
#contact-page .list-items, #contact-page .list-item, #contact-page .list-item-el {
  margin: 0;
  padding: 0;
  list-style: none;
}
#contact-page .list-item-el {
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.5;
}
#contact-page .list-item-el p {
  margin: 0;
}
#contact-page .social {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem;
  block-size: 1.375rem;
  margin: 0;
}
#contact-page .social-item {
  flex: 0 0 auto;
}
#contact-page .social-item-link-svg {
  display: flex;
  block-size: 1.375rem;
}
#contact-page .social-item-link-svg svg {
  display: block;
  inline-size: auto;
  block-size: 100%;
}
@media only screen and (max-width: 74.9375rem) {
  #contact-page .contact-numbers, #contact-page .contact-location, #contact-page .contact-list-business-hours, #contact-page .contact-social {
    inline-size: min(100%, 22rem);
    margin-inline: auto;
  }
  #contact-page .contact-social {
    align-items: flex-start;
  }
}
@media only screen and (min-width: 48rem) {
  #contact-page {
    padding-block: 0 5rem;
  }
  #contact-page .section-container {
    --container-gutter: 2.5rem;
  }
  #contact-page .section-blocks-outer {
    gap: 4rem;
  }
}
@media only screen and (min-width: 75rem) {
  #contact-page {
    padding-block: 0 6.25rem;
  }
  #contact-page .section-blocks-outer {
    grid-template-columns: minmax(0, 35.375rem) minmax(22rem, 27.875rem);
    justify-content: space-between;
    align-items: start;
    gap: 4rem;
  }
  #contact-page .section-images, #contact-page .section-contact {
    margin-inline: 0;
  }
  #contact-page .section-contact {
    margin-block-start: 0.8125rem;
  }
  #contact-page .contact-social {
    align-items: flex-start;
    flex-direction: row;
  }
}
@media only screen and (min-width: 87.5rem) {
  #contact-page .section-container {
    --container-size-reference: 80rem;
  }
  #contact-page .section-blocks-outer {
    gap: 6rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  #contact-page {
    padding-block: 0 8rem;
  }
  #contact-page .section-container {
    --container-gutter: 0rem;
    --container-size-reference: 88.75rem;
  }
  #contact-page .section-blocks-outer {
    grid-template-columns: 35.375rem 27.875rem;
    justify-content: start;
    -moz-column-gap: 14.8125rem;
         column-gap: 14.8125rem;
  }
  #contact-page .contact-blocks {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  #contact-page .contact-numbers, #contact-page .contact-location {
    position: relative;
  }
  #contact-page .contact-numbers::after, #contact-page .contact-location::after {
    content: "";
    position: absolute;
    inset-inline-start: -0.5625rem;
    inline-size: 27.625rem;
    block-size: 1px;
    background: var(--color-neutral);
  }
  #contact-page .contact-numbers {
    row-gap: 0.8125rem;
  }
  #contact-page .contact-numbers::after {
    inset-block-start: calc(100% + 2rem);
  }
  #contact-page .contact-numbers-cta {
    margin-block-start: 0.9375rem;
  }
  #contact-page .contact-location {
    margin-block-start: 4.35rem;
    row-gap: 0.625rem;
  }
  #contact-page .contact-location::after {
    inset-block-start: calc(100% + 2.0625rem);
  }
  #contact-page .contact-list-business-hours {
    margin-block-start: 4.6875rem;
    row-gap: 0.9375rem;
  }
  #contact-page .contact-social {
    display: grid;
    grid-template-columns: 10.25rem 14.3217rem;
    gap: 1.9375rem;
    margin-block-start: 5.5625rem;
  }
  #contact-page .contact-social-title {
    align-self: end;
  }
  #contact-page .number-link {
    font-size: 1.875rem;
  }
  #contact-page .location-address,
  #contact-page .list-item-el {
    font-size: 1.125rem;
  }
}
@media only screen and (max-width: 47.9375rem) {
  #contact-page .contact-blocks {
    text-align: left;
  }
}

/* ================================================================================
* 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;
}
:is(.error404-page, #error404-page) .section-content {
  text-wrap: balance;
}
/* ================================================================================
* About Template
================================================================================ */
/* Template About
-------------------------------------------------------------------------------- */
/*
* About Related Classes
-------------------------------------------------------------------------------- */
/* Add helper classes specific to this template as needed */
/*
* About Template
-------------------------------------------------------------------------------- */
/* About Section 1 — introduction and video
-------------------------------------------------------------------------------- */
:is(.about-section-1, #about-section-1) {
  margin-block: 0;
  padding-block-end: 4.375rem;
}
:is(.about-section-1, #about-section-1) .section-container {
  --container-gutter: 1.25rem;
}
:is(.about-section-1, #about-section-1) .section-blocks {
  gap: 2.5rem;
  align-items: start;
}
:is(.about-section-1, #about-section-1) .section-video {
  inline-size: 100%;
  max-inline-size: 33.25rem;
  justify-self: center;
}
:is(.about-section-1, #about-section-1) .section-heading {
  margin-block-end: 1.25rem;
  font-size: 30px;
  line-height: 1.2;
}
:is(.about-section-1, #about-section-1) .section-content {
  font-size: 18px;
  line-height: 1.5;
}
:is(.about-section-1, #about-section-1) .section-content p:not(:last-child) {
  margin-block-end: 1.5rem;
}
:is(.about-section-1, #about-section-1) .video-thumbnail {
  --video-thumbnail-aspect-w: 532;
  --video-thumbnail-aspect-l: 329;
}
:is(.about-section-1, #about-section-1) .video-thumbnail:is(:hover, :focus) .video-button-default {
  --video-button-glyph-color: var(--color-light);
}
:is(.about-section-1, #about-section-1) .video-button-default {
  --video-button-size: 90px;
  --video-button-glyph-height: 22%;
  --video-button-glyph-width: 20%;
  color: var(--color-light);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
}
:is(.about-section-1, #about-section-1) .video-button-default::before {
  background: var(--color-secondary);
  inset: 8.5%;
}
:is(.about-section-1, #about-section-1) .video-button-default::after {
  display: none;
}
:is(.about-section-1, #about-section-1) .sec_1-video-cta {
  display: block;
  margin-block-start: 0.6875rem;
  font-family: var(--font-primary);
  font-size: 18px;
  line-height: 1.3;
  text-decoration: none;
}
:is(.about-section-1, #about-section-1) .sec_1-video-cta span {
  text-decoration: underline;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
:is(.about-section-1, #about-section-1) .sec_1-video-cta:hover {
  color: var(--color-secondary);
}
@media only screen and (min-width: 48rem) {
  :is(.about-section-1, #about-section-1) {
    padding-block-end: 6.25rem;
  }
  :is(.about-section-1, #about-section-1) .section-container {
    --container-gutter: 2.5rem;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.about-section-1, #about-section-1) {
    padding-block-end: 7.5rem;
  }
  :is(.about-section-1, #about-section-1) .section-blocks {
    grid-template-columns: minmax(0, 532fr) minmax(0, 630fr);
    gap: 3.5rem;
  }
  :is(.about-section-1, #about-section-1) .section-heading {
    font-size: 34px;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.about-section-1, #about-section-1) .section-container {
    --container-gutter: 5.3125rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.about-section-1, #about-section-1) {
    padding-block-end: 8.75rem;
  }
  :is(.about-section-1, #about-section-1) .section-container {
    --container-gutter: 18.75rem;
  }
  :is(.about-section-1, #about-section-1) .section-blocks {
    max-inline-size: 78.3125rem;
    gap: 5.6875rem;
  }
  :is(.about-section-1, #about-section-1) .section-heading {
    font-size: 38px;
  }
  :is(.about-section-1, #about-section-1) .section-content {
    max-inline-size: 38rem;
  }
}

/* About Section 2 — services callout
-------------------------------------------------------------------------------- */
:is(.about-section-2, #about-section-2) {
  padding-block: 4.375rem;
  --responsive-background-bg-position: center top;
}
:is(.about-section-2, #about-section-2) .section-container {
  --container-gutter: 1.25rem;
}
:is(.about-section-2, #about-section-2) .section-body {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  max-inline-size: 40.875rem;
  margin-inline: auto;
  text-align: center;
}
:is(.about-section-2, #about-section-2) .section-heading {
  max-inline-size: 37.4375rem;
  font-size: 30px;
  line-height: 1.1;
  font-family: var(--font-secondary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
:is(.about-section-2, #about-section-2) .section-content {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
}
:is(.about-section-2, #about-section-2) .section-content a {
  color: var(--color-dark-alt);
}
:is(.about-section-2, #about-section-2) .section-content a:hover {
  color: var(--color-secondary);
}
@media only screen and (min-width: 48rem) {
  :is(.about-section-2, #about-section-2) {
    padding-block: 6.25rem;
  }
  :is(.about-section-2, #about-section-2) .section-container {
    --container-gutter: 2.5rem;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.about-section-2, #about-section-2) {
    padding-block: 7.5rem;
  }
  :is(.about-section-2, #about-section-2) .section-heading {
    font-size: 35px;
    line-height: 0.98;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.about-section-2, #about-section-2) {
    padding-block: 8.75rem;
  }
  :is(.about-section-2, #about-section-2) .section-buttons {
    margin-block-start: 0.6875rem;
  }
}

/* About Section 3 — showroom
-------------------------------------------------------------------------------- */
:is(.about-section-3, #about-section-3) {
  padding-block: 4.375rem;
}
:is(.about-section-3, #about-section-3) .section-container {
  --container-gutter: 1.25rem;
}
:is(.about-section-3, #about-section-3) .section-blocks {
  gap: 2.5rem;
  align-items: start;
}
:is(.about-section-3, #about-section-3) .section-heading {
  margin-block-end: 1.25rem;
  font-size: 30px;
  line-height: 1.2;
}
:is(.about-section-3, #about-section-3) .section-content {
  font-size: 18px;
  line-height: 1.5;
}
:is(.about-section-3, #about-section-3) .section-content p:not(:last-child) {
  margin-block-end: 1.5rem;
}
:is(.about-section-3, #about-section-3) .section-image {
  justify-self: center;
  max-inline-size: 33.75rem;
  inline-size: 100%;
  aspect-ratio: 540/671;
}
:is(.about-section-3, #about-section-3) .section-image picture, :is(.about-section-3, #about-section-3) .section-image img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
:is(.about-section-3, #about-section-3) .section-image img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center bottom;
     object-position: center bottom;
}
@media only screen and (min-width: 48rem) {
  :is(.about-section-3, #about-section-3) {
    padding-block: 6.25rem;
  }
  :is(.about-section-3, #about-section-3) .section-container {
    --container-gutter: 2.5rem;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.about-section-3, #about-section-3) {
    padding-block: 7.5rem;
  }
  :is(.about-section-3, #about-section-3) .section-blocks {
    grid-template-columns: minmax(0, 626fr) minmax(0, 540fr);
    gap: 3.5rem;
  }
  :is(.about-section-3, #about-section-3) .section-heading {
    font-size: 34px;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.about-section-3, #about-section-3) .section-container {
    --container-gutter: 5.3125rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.about-section-3, #about-section-3) {
    padding-block: 8.75rem;
  }
  :is(.about-section-3, #about-section-3) .section-container {
    --container-gutter: 20.71875rem;
  }
  :is(.about-section-3, #about-section-3) .section-blocks {
    gap: 5.6875rem;
  }
  :is(.about-section-3, #about-section-3) .section-heading {
    font-size: 38px;
  }
  :is(.about-section-3, #about-section-3) .section-content {
    max-inline-size: 38rem;
  }
}

/* About Section 4 — guarantee and selling points
-------------------------------------------------------------------------------- */
:is(.about-section-4, #about-section-4) {
  padding-block: 0;
  background: var(--color-primary-alt);
  color: var(--color-light);
}
:is(.about-section-4, #about-section-4) .section-subheader {
  background-color: var(--color-secondary);
}
:is(.about-section-4, #about-section-4) .section-subheader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  padding-block: 2.625rem;
}
:is(.about-section-4, #about-section-4) .section-subheader .button-palette-outline {
  color: var(--color-light);
}
:is(.about-section-4, #about-section-4) .section-subheader .button-palette-outline:hover {
  background: var(--color-light);
  color: var(--color-secondary);
}
:is(.about-section-4, #about-section-4) .section-icon {
  inline-size: 5.930625rem;
  block-size: 4rem;
  flex: 0 0 auto;
}
:is(.about-section-4, #about-section-4) .section-icon picture, :is(.about-section-4, #about-section-4) .section-icon img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
:is(.about-section-4, #about-section-4) .section-subheading {
  font-size: 30px;
  line-height: 1.2;
  font-family: var(--font-secondary);
  font-style: italic;
  font-weight: 500;
  text-align: center;
}
:is(.about-section-4, #about-section-4) .section-container {
  --container-gutter: 1.25rem;
  padding-block: 4.375rem;
}
:is(.about-section-4, #about-section-4) .section-heading {
  max-inline-size: 40.9375rem;
  margin: 0 auto 3.125rem;
  font-size: 30px;
  line-height: 1.2;
  font-family: var(--font-secondary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
}
:is(.about-section-4, #about-section-4) .section-sps {
  display: grid;
  gap: 2.5rem;
}
:is(.about-section-4, #about-section-4) .sp-container {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
}
:is(.about-section-4, #about-section-4) .sp-icon {
  display: block;
  font-size: 2.75rem;
  block-size: 2.75rem;
  inline-size: auto;
}
:is(.about-section-4, #about-section-4) .sp-icon img {
  display: block;
  block-size: 100%;
  inline-size: auto;
}
:is(.about-section-4, #about-section-4) .sp-title {
  font-size: 22px;
  line-height: 1.2;
  font-family: var(--font-primary);
  color: inherit;
  font-weight: 600;
}
:is(.about-section-4, #about-section-4) .sp-description {
  font-size: 18px;
  line-height: 1.3;
}
@media only screen and (min-width: 48rem) {
  :is(.about-section-4, #about-section-4) {
    /* Reserve foreground space for Section 5, beginning at tablet. */
    margin-block-end: -12.5rem;
  }
  :is(.about-section-4, #about-section-4) .section-container {
    --container-gutter: 2.5rem;
    padding-block: 6.25rem 18.75rem;
  }
  :is(.about-section-4, #about-section-4) .section-subheader-container {
    min-block-size: 18.8125rem;
  }
  :is(.about-section-4, #about-section-4) .section-heading {
    margin-block-end: 4.375rem;
    font-size: 45px;
  }
  :is(.about-section-4, #about-section-4) .section-sps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.125rem 2.5rem;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.about-section-4, #about-section-4) .section-subheader-container {
    flex-direction: row;
    gap: 2.6875rem;
    min-block-size: 0;
    padding-block: 1.21875rem;
  }
  :is(.about-section-4, #about-section-4) .section-subheading {
    font-size: 35px;
    line-height: 1.4;
  }
  :is(.about-section-4, #about-section-4) .section-container {
    padding-block-start: 7.5rem;
  }
  :is(.about-section-4, #about-section-4) .section-sps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  :is(.about-section-4, #about-section-4) .sp-title {
    font-size: 26px;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.about-section-4, #about-section-4) .section-container {
    --container-gutter: 5.3125rem;
  }
  :is(.about-section-4, #about-section-4) .sp-description {
    font-size: 20px;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.about-section-4, #about-section-4) {
    margin-block-end: -16.5625rem;
  }
  :is(.about-section-4, #about-section-4) .section-container {
    --container-gutter: 20.9375rem;
    padding-block: 8.75rem 25.5625rem;
  }
  :is(.about-section-4, #about-section-4) .section-heading {
    margin-block-end: 6.25rem;
  }
  :is(.about-section-4, #about-section-4) .section-sps {
    gap: 2.5rem 6.25rem;
  }
  :is(.about-section-4, #about-section-4) .section-sp {
    min-block-size: 18.75rem;
  }
}

/* About Section 5 — guide, culture and awards
-------------------------------------------------------------------------------- */
:is(.about-section-5, #about-section-5) {
  position: relative;
  padding-block: 0 4.375rem;
}
:is(.about-section-5, #about-section-5) .section-container {
  --container-gutter: 0px;
}
:is(.about-section-5, #about-section-5) .section-blocks {
  gap: 0;
  padding-block-start: 3.125rem;
  background: linear-gradient(208deg, #fff 46.31%, #f4f4f4 89.01%);
  overflow: hidden;
}
:is(.about-section-5, #about-section-5) .section-body {
  display: grid;
  align-content: center;
  gap: 1.8125rem;
  padding-inline: 1.875rem;
}
:is(.about-section-5, #about-section-5) .section-content {
  display: grid;
  gap: 1.25rem;
  font-size: 18px;
  line-height: 1.5;
}
:is(.about-section-5, #about-section-5) .section-content > :where(p, ul) {
  margin-block: 0;
}
:is(.about-section-5, #about-section-5) .section-content li {
  font-weight: 700;
}
:is(.about-section-5, #about-section-5) .section-heading, :is(.about-section-5, #about-section-5) .section-subheading {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
}
:is(.about-section-5, #about-section-5) .section-image {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: 2.5rem;
}
:is(.about-section-5, #about-section-5) .section-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-secondary);
  clip-path: polygon(100% 18%, 100% 100%, 0 100%, 0 78%);
}
:is(.about-section-5, #about-section-5) .section-image picture {
  position: relative;
  inline-size: min(70%, 19.375rem);
}
:is(.about-section-5, #about-section-5) .section-image picture, :is(.about-section-5, #about-section-5) .section-image img {
  display: block;
}
:is(.about-section-5, #about-section-5) .section-image img {
  inline-size: 100%;
  block-size: auto;
}
:is(.about-section-5, #about-section-5) .section-footer {
  display: grid;
  gap: 1.25rem;
  max-inline-size: 46.25rem;
  margin-inline: auto;
  padding: 4.375rem 1.25rem;
  text-align: center;
}
:is(.about-section-5, #about-section-5) .section-footer-content {
  font-size: 18px;
  line-height: 1.5;
}
:is(.about-section-5, #about-section-5) .section-awards {
  /* Keep the badge strip full bleed without widening the guide. */
  inline-size: 100vw;
  margin-inline-start: calc(50% - 50vw);
  overflow: hidden;
}
:is(.about-section-5, #about-section-5) .section-awards-heading:empty {
  display: none;
}
:is(.about-section-5, #about-section-5) .marquee-track {
  align-items: center;
  gap: 3.125rem;
}
:is(.about-section-5, #about-section-5) .marquee-card {
  flex: 0 0 auto;
}
:is(.about-section-5, #about-section-5) .marquee-card-image {
  display: block;
  font-size: 4rem;
  line-height: 0;
}
@media only screen and (min-width: 48rem) {
  :is(.about-section-5, #about-section-5) {
    padding-block-end: 6.25rem;
  }
  :is(.about-section-5, #about-section-5) .section-container {
    --container-gutter: 5.25rem;
  }
  :is(.about-section-5, #about-section-5) .section-blocks {
    padding-block-start: 4.375rem;
  }
  :is(.about-section-5, #about-section-5) .section-body {
    max-inline-size: 35rem;
    margin-inline: auto;
  }
  :is(.about-section-5, #about-section-5) .section-heading, :is(.about-section-5, #about-section-5) .section-subheading {
    font-size: 36px;
  }
  :is(.about-section-5, #about-section-5) .section-image::before {
    clip-path: polygon(100% 25%, 100% 100%, 0 100%, 0 100%);
  }
  :is(.about-section-5, #about-section-5) .section-footer {
    padding-block: 6.25rem;
  }
  :is(.about-section-5, #about-section-5) .marquee-row, :is(.about-section-5, #about-section-5) .marquee-track {
    block-size: 6.5625rem;
  }
  :is(.about-section-5, #about-section-5) .marquee-card-image {
    font-size: 6.25rem;
  }
  :is(.about-section-5, #about-section-5) .marquee-card:nth-child(13n+1) .marquee-card-image {
    font-size: 4.4778125rem;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.about-section-5, #about-section-5) {
    padding-block-end: 7.5rem;
  }
  :is(.about-section-5, #about-section-5) .section-container {
    --container-gutter: 2.5rem;
  }
  :is(.about-section-5, #about-section-5) .section-blocks {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    padding-block-start: 0;
    align-items: stretch;
  }
  :is(.about-section-5, #about-section-5) .section-body {
    max-inline-size: none;
    margin: 0;
    padding: 4rem;
  }
  :is(.about-section-5, #about-section-5) .section-image picture {
    inline-size: min(85%, 19.375rem);
  }
  :is(.about-section-5, #about-section-5) .section-image::before {
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }
  :is(.about-section-5, #about-section-5) .section-footer {
    padding-block: 7.5rem;
  }
  :is(.about-section-5, #about-section-5) .marquee-track {
    gap: 8.4375rem;
    margin-inline-start: calc(50% - 60rem);
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.about-section-5, #about-section-5) .section-container {
    --container-gutter: 5.3125rem;
  }
  :is(.about-section-5, #about-section-5) .section-body {
    padding: 5rem 6.25rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.about-section-5, #about-section-5) {
    padding-block-end: 8.4375rem;
  }
  :is(.about-section-5, #about-section-5) .section-container {
    --container-gutter: 19.375rem;
  }
  :is(.about-section-5, #about-section-5) .section-blocks {
    grid-template-columns: minmax(0, 866fr) minmax(0, 434fr);
    min-block-size: 43.4375rem;
  }
  :is(.about-section-5, #about-section-5) .section-body {
    padding: 5rem 10.125rem 6.4375rem 12.5rem;
    align-content: start;
  }
  :is(.about-section-5, #about-section-5) .section-heading, :is(.about-section-5, #about-section-5) .section-subheading {
    font-size: 38px;
  }
  :is(.about-section-5, #about-section-5) .section-heading {
    inline-size: calc(100% + 2.0625rem);
  }
  :is(.about-section-5, #about-section-5) .section-image picture {
    justify-self: start;
    margin-inline-start: -2.5rem;
  }
  :is(.about-section-5, #about-section-5) .section-footer {
    padding-block: 8.75rem;
  }
  :is(.about-section-5, #about-section-5) .section-footer-content p:not(:last-child) {
    margin-block-end: 1.5rem;
  }
}

/* About Section 6 — design process
-------------------------------------------------------------------------------- */
:is(.about-section-6, #about-section-6) {
  padding-block: 4.375rem;
  --responsive-background-bg-position: center top;
}
:is(.about-section-6, #about-section-6) .section-container {
  --container-gutter: 1.25rem;
}
:is(.about-section-6, #about-section-6) .section-header {
  display: grid;
  justify-items: center;
  gap: 1.1875rem;
  max-inline-size: 40.6875rem;
  margin-inline: auto;
  text-align: center;
}
:is(.about-section-6, #about-section-6) .section-heading {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}
:is(.about-section-6, #about-section-6) .section-content {
  font-size: 18px;
  line-height: 1.5;
}
:is(.about-section-6, #about-section-6) .section-processes {
  margin-block-start: 3.125rem;
}
:is(.about-section-6, #about-section-6) .about-process {
  background-color: var(--color-light);
  padding: 2.5rem 1.875rem;
  block-size: 100%;
  min-block-size: 25rem;
}
:is(.about-section-6, #about-section-6) .about-process-slider {
  --swiper-custom-arrow-offset-x: 0px;
  /* Preserve Swiper behavior; hide controls only when all cards fit. */
}
:is(.about-section-6, #about-section-6) .about-process-slider:has(.swiper-button-lock) .swiper-custom-buttons {
  display: none;
}
:is(.about-section-6, #about-section-6) .about-process-heading {
  margin-block-end: 0.375rem;
  font-family: var(--font-accent);
  font-weight: 400;
  color: var(--color-secondary);
  font-size: 30px;
  line-height: 1.2;
}
:is(.about-section-6, #about-section-6) .about-process-time-frame {
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
}
:is(.about-section-6, #about-section-6) .about-process-description {
  margin-block-start: 1.75rem;
  font-size: 18px;
  line-height: 1.5;
}
:is(.about-section-6, #about-section-6) .swiper-custom-buttons {
  margin-block-start: 1.5rem;
}
@media only screen and (min-width: 48rem) {
  :is(.about-section-6, #about-section-6) {
    padding-block: 6.25rem;
  }
  :is(.about-section-6, #about-section-6) .section-container {
    --container-gutter: 2.5rem;
  }
  :is(.about-section-6, #about-section-6) .section-heading {
    font-size: 45px;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.about-section-6, #about-section-6) {
    padding-block: 7.5rem;
  }
  :is(.about-section-6, #about-section-6) .section-processes {
    margin-block-start: 4.375rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.about-section-6, #about-section-6) .section-container {
    --container-gutter: 5.3125rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.about-section-6, #about-section-6) {
    padding-block: 8.75rem;
  }
  :is(.about-section-6, #about-section-6) .section-container {
    --container-gutter: 10.8125rem;
  }
  :is(.about-section-6, #about-section-6) .section-processes {
    margin-block-start: 5.5rem;
  }
  :is(.about-section-6, #about-section-6) .about-process {
    padding: 4.375rem 2.5rem;
  }
}

/* ================================================================================
* Careers Template
================================================================================ */
/* Careers main
-------------------------------------------------------------------------------- */
#careers-page .section-listings {
  display: grid;
  grid-template-columns: minmax(0, 25rem);
  justify-content: center;
  gap: 4rem 2rem;
}
@media only screen and (min-width: 48rem) {
  #careers-page .section-listings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-inline-size: 51.875rem;
    margin-inline: auto;
  }
}
@media only screen and (min-width: 75rem) {
  #careers-page .section-listings {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-inline-size: none;
    gap-block: 5rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  #careers-page .section-container {
    --container-gutter: 5.3125rem;
  }
  #careers-page .section-listings {
    -moz-column-gap: 2.4375rem;
         column-gap: 2.4375rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  #careers-page .section-container {
    --container-gutter: clamp(
    	2.5rem,
    	calc((100vw - 79.875rem) / 2),
    	18.75rem
    );
  }
  #careers-page .section-listings {
    grid-template-columns: repeat(3, 25rem);
    justify-content: start;
    max-inline-size: 79.875rem;
    margin-inline: 0;
  }
}

/* ================================================================================
* Community Template
================================================================================ */
/* Template community
-------------------------------------------------------------------------------- */
/*
* community Related Classes
-------------------------------------------------------------------------------- */
/* Add helper classes specific to this template as needed */
/*
* community Template
-------------------------------------------------------------------------------- */
/*
* Community Section 1
-------------------------------------------------------------------------------- */
:is(.community-section-1, #community-section-1) {
  background-color: var(--color-light);
  color: var(--color-dark);
}
:is(.community-section-1, #community-section-1):is(.section-style-margined) {
  margin-block: 0;
  padding-block: 3.75rem;
}
:is(.community-section-1, #community-section-1) .section-body {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  inline-size: 100%;
  max-inline-size: 65.4375rem;
  margin-inline: auto;
}
:is(.community-section-1, #community-section-1) .section-image {
  aspect-ratio: 1047/513;
  overflow: hidden;
}
:is(.community-section-1, #community-section-1) .section-image :where(picture, img) {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
:is(.community-section-1, #community-section-1) .section-image img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center bottom;
     object-position: center bottom;
}
:is(.community-section-1, #community-section-1) .section-blocks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
:is(.community-section-1, #community-section-1) .section-icon {
  inline-size: min(100%, 18rem);
}
:is(.community-section-1, #community-section-1) .section-icon :where(picture, img) {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
:is(.community-section-1, #community-section-1) .section-testimonial {
  inline-size: 100%;
  max-inline-size: 40.4375rem;
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
}
:is(.community-section-1, #community-section-1) .section-quote {
  margin-block-end: 1.5rem;
}
:is(.community-section-1, #community-section-1) .section-cite {
  font-weight: 600;
}
@media only screen and (min-width: 48rem) {
  :is(.community-section-1, #community-section-1):is(.section-style-margined) {
    padding-block: 4.5rem;
  }
  :is(.community-section-1, #community-section-1) .section-body {
    gap: 3.125rem;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.community-section-1, #community-section-1):is(.section-style-margined) {
    padding-block: 6.25rem;
  }
  :is(.community-section-1, #community-section-1) .section-body {
    gap: 4rem;
  }
  :is(.community-section-1, #community-section-1) .section-blocks {
    display: grid;
    grid-template-columns: minmax(0, 21.7598125rem) minmax(0, 40.4375rem);
    justify-content: space-between;
    gap: 3.25rem;
  }
  :is(.community-section-1, #community-section-1) .section-icon {
    inline-size: 100%;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.community-section-1, #community-section-1):is(.section-style-margined) {
    padding-block: 7.5rem;
  }
  :is(.community-section-1, #community-section-1) .section-body {
    gap: 4.5rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.community-section-1, #community-section-1):is(.section-style-margined) {
    padding-block: 8.75rem;
  }
  :is(.community-section-1, #community-section-1) .section-body {
    gap: 5rem;
  }
}

/*
* Community Section 2
-------------------------------------------------------------------------------- */
:is(.community-section-2, #community-section-2) {
  color: var(--color-dark);
  --swiper-pagination-bottom: 2.5rem;
}
:is(.community-section-2, #community-section-2):is(.section-style-padded) {
  padding-block: 3.75rem 4.25rem;
}
:is(.community-section-2, #community-section-2) .section-sps-container {
  --container-gutter: 0rem;
  max-inline-size: 84.375rem !important;
}
:is(.community-section-2, #community-section-2) .slider {
  margin-inline: 0;
  padding-inline: 0;
}
:is(.community-section-2, #community-section-2) .slider-custom-pagination {
  justify-content: center;
}
:is(.community-section-2, #community-section-2) .swiper-slide {
  block-size: auto;
}
:is(.community-section-2, #community-section-2) .sp {
  margin: 0;
  padding: 50px 1.75rem;
  background-color: var(--color-light);
}
:is(.community-section-2, #community-section-2) .sp-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  inline-size: 100%;
  max-inline-size: 18.125rem;
  margin-inline: auto;
  text-align: center;
}
:is(.community-section-2, #community-section-2) .sp-icon {
  display: block;
  inline-size: 8.75rem;
  block-size: 4rem;
}
:is(.community-section-2, #community-section-2) .sp-icon :where(img) {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
:is(.community-section-2, #community-section-2) .sp-title {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-dark);
  letter-spacing: 0em;
  text-transform: capitalize;
  font-weight: 500;
  text-align: center;
  text-wrap: wrap;
}
:is(.community-section-2, #community-section-2) .sp-description {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  font-family: var(--font-primary);
  color: var(--color-dark);
  font-weight: 400;
  text-align: center;
  text-wrap: wrap;
}
:is(.community-section-2, #community-section-2) .swiper-slide:nth-child(1) .sp-icon {
  block-size: 4rem;
}
:is(.community-section-2, #community-section-2) .swiper-slide:nth-child(2) .sp-icon {
  block-size: 5.75rem;
}
:is(.community-section-2, #community-section-2) .swiper-slide:nth-child(3) .sp-icon {
  block-size: 2.25rem;
}
@media (max-width: 47.9375rem) {
  :is(.community-section-2, #community-section-2) .clamp-text-ellipsis {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }
}
@media only screen and (min-width: 48rem) {
  :is(.community-section-2, #community-section-2) {
    --swiper-pagination-bottom: 1.75rem;
  }
  :is(.community-section-2, #community-section-2):is(.section-style-padded) {
    padding-block: 4.5rem 2.5rem;
  }
  :is(.community-section-2, #community-section-2) .slider-wrapper {
    align-items: stretch;
    height: auto !important;
  }
  :is(.community-section-2, #community-section-2) .swiper-slide {
    display: flex;
    height: auto;
  }
  :is(.community-section-2, #community-section-2) .clamp-text-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--clamp-text-cap);
    line-clamp: var(--clamp-text-cap);
    overflow: hidden;
  }
  :is(.community-section-2, #community-section-2) .swiper-slide:nth-child(3) .sp-description {
    --clamp-text-cap: 8;
  }
  :is(.community-section-2, #community-section-2) .sp {
    display: flex;
    inline-size: 100%;
    block-size: auto;
    min-block-size: 0;
    padding-inline: 2.5rem;
  }
  :is(.community-section-2, #community-section-2) .sp-icon {
    max-inline-size: 100%;
    flex-shrink: 0;
  }
  :is(.community-section-2, #community-section-2) .sp-title {
    flex-shrink: 0;
    --clamp-text-cap: 2;
    max-block-size: 2.4em;
    overflow-wrap: anywhere;
  }
  :is(.community-section-2, #community-section-2) .sp-description {
    --clamp-text-cap: 6;
    flex-shrink: 0;
    font-size: 18px;
    line-height: 27px;
    max-block-size: calc(var(--clamp-text-cap) * 27px);
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }
  :is(.community-section-2, #community-section-2) .sp-link {
    align-self: center;
    margin-block-start: auto;
    flex-shrink: 0;
    max-inline-size: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  :is(.community-section-2, #community-section-2) .sp-container {
    gap: 2.25rem;
    min-inline-size: 0;
    flex: 1;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.community-section-2, #community-section-2):is(.section-style-padded) {
    padding-block: 6.25rem;
  }
  :is(.community-section-2, #community-section-2) .sp {
    padding: 3.5rem 2rem;
  }
  :is(.community-section-2, #community-section-2) .sp-container {
    gap: 2.5rem;
  }
  :is(.community-section-2, #community-section-2) .sp-title {
    font-size: 28px;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.community-section-2, #community-section-2):is(.section-style-padded) {
    padding-block: 7.5rem;
  }
  :is(.community-section-2, #community-section-2) .sp {
    padding-inline: 3.5rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.community-section-2, #community-section-2):is(.section-style-padded) {
    padding-block: 8.75rem;
  }
  :is(.community-section-2, #community-section-2) .sp {
    min-block-size: 0;
    padding: 4.375rem;
  }
  :is(.community-section-2, #community-section-2) .sp-container {
    gap: 2.8125rem;
  }
  :is(.community-section-2, #community-section-2) .sp-icon {
    inline-size: 9.875rem;
  }
  :is(.community-section-2, #community-section-2) .sp-title {
    font-size: 30px;
  }
  :is(.community-section-2, #community-section-2) .swiper-slide:nth-child(1) .sp-icon {
    block-size: 4.5625rem;
  }
  :is(.community-section-2, #community-section-2) .swiper-slide:nth-child(2) .sp-icon {
    block-size: 6.6875rem;
  }
  :is(.community-section-2, #community-section-2) .swiper-slide:nth-child(3) .sp-icon {
    block-size: 2.4375rem;
  }
}

/*
* Community Section 3
-------------------------------------------------------------------------------- */
:is(.community-section-3, #community-section-3) {
  background-color: var(--color-light);
  color: var(--color-dark);
}
:is(.community-section-3, #community-section-3):is(.section-style-padded) {
  padding-block: 3.75rem;
}
:is(.community-section-3, #community-section-3) .section-blocks {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 2.5rem;
  inline-size: 100%;
}
:is(.community-section-3, #community-section-3) .section-image {
  inline-size: 100%;
  max-inline-size: 26.0436875rem;
  aspect-ratio: 416.699/476.091;
  margin-inline: auto;
  overflow: hidden;
}
:is(.community-section-3, #community-section-3) .section-image :where(picture, img) {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
:is(.community-section-3, #community-section-3) .section-image img {
  -o-object-fit: cover;
     object-fit: cover;
}
:is(.community-section-3, #community-section-3) .section-content {
  inline-size: 100%;
  max-inline-size: 39.125rem;
  margin-inline: auto;
  font-size: 18px;
  line-height: 1.5;
}
:is(.community-section-3, #community-section-3) .section-content h2 {
  margin: 0 0 1.25rem;
  font-size: 30px;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-dark);
  letter-spacing: 0em;
  text-transform: none;
  font-weight: 500;
  text-wrap: wrap;
}
:is(.community-section-3, #community-section-3) .section-content p {
  max-inline-size: 38rem;
  margin: 0;
}
:is(.community-section-3, #community-section-3) .section-content p + p {
  margin-block-start: 1.5rem;
}
@media only screen and (min-width: 48rem) {
  :is(.community-section-3, #community-section-3):is(.section-style-padded) {
    padding-block: 4.5rem;
  }
  :is(.community-section-3, #community-section-3) .section-blocks {
    gap: 3.125rem;
  }
  :is(.community-section-3, #community-section-3) .section-content h2 {
    font-size: 34px;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.community-section-3, #community-section-3):is(.section-style-padded) {
    padding-block: 6.25rem;
  }
  :is(.community-section-3, #community-section-3) .section-blocks {
    grid-template-columns: minmax(0, 26.0436875rem) minmax(0, 39.125rem);
    justify-content: center;
    gap: 3.125rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.community-section-3, #community-section-3):is(.section-style-padded) {
    padding-block: 7.5rem;
  }
  :is(.community-section-3, #community-section-3) .section-blocks {
    gap: 5rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.community-section-3, #community-section-3):is(.section-style-padded) {
    padding-block: 8.75rem;
  }
  :is(.community-section-3, #community-section-3) .section-blocks {
    gap: 6.25rem;
  }
  :is(.community-section-3, #community-section-3) .section-content h2 {
    font-size: 38px;
  }
}

/* ================================================================================
Coupons Template
================================================================================ */
/* Template Coupons - Grid
-------------------------------------------------------------------------------- */
/*
* Coupons Related Classes
-------------------------------------------------------------------------------- */
/* Add helper classes specific to this template as needed */
/*
* Coupons Template
-------------------------------------------------------------------------------- */
#coupons-page .coupons:is(.columns) {
  --columns-gap-x: 3rem;
  --columns-gap-y: 3rem;
}
@media only screen and (min-width: 48rem) {
  #coupons-page .coupons:is(.columns) {
    --columns-number: 2;
  }
}
@media only screen and (min-width: 75rem) {
  #coupons-page .coupons:is(.columns) {
    --columns-number: 3;
  }
}
/* ================================================================================

/* ================================================================================
Coupons Template
================================================================================ */
/* Portfolio main
-------------------------------------------------------------------------------- */
#portfolio-page {
  padding-block-end: 5rem;
}
#portfolio-page .section-container, #portfolio-page .section-projects {
  --container-gutter: 1.875rem;
}
#portfolio-page .section-content {
  max-inline-size: 850px;
  margin-inline: auto;
  font-size: 18px;
  line-height: 1.5;
}
#portfolio-page .section-content h2 {
  margin-block-end: 1.5rem;
}
#portfolio-page .section-content p:nth-last-child(n+2) {
  margin-block-end: 1.5rem;
}
#portfolio-page .section-projects {
  margin-block-start: 4.375rem;
}
#portfolio-page .section-filter {
  --portfolio-filter-active-background: linear-gradient(
  	157deg,
  	var(--color-secondary) 6.5%,
  	var(--color-secondary-alt) 108%
  );
  display: grid;
  gap: 1.5rem;
}
#portfolio-page .section-filter::before {
  content: "Filter by Type of Project";
  padding-block-end: 0.75rem;
  border-block-end: 1px solid var(--color-neutral);
  font-size: 20px;
  line-height: 1.2;
  font-family: var(--font-secondary);
  font-weight: 600;
}
#portfolio-page .section-filter-list {
  display: grid;
  gap: 0.625rem;
  margin: 0;
}
#portfolio-page .section-filter-item {
  margin: 0;
}
#portfolio-page .section-filter-item:first-child {
  order: 1;
}
#portfolio-page .section-filter-item.active .section-filter-link {
  background: var(--portfolio-filter-active-background);
}
#portfolio-page .section-filter-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 3rem;
  padding: 0.625rem 1.125rem;
  background: var(--color-primary);
  color: var(--color-light);
  text-align: center;
  text-decoration: none;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
}
#portfolio-page .section-filter-link:is(:hover, :focus) {
  background: var(--portfolio-filter-active-background);
  color: var(--color-light);
}
#portfolio-page .section-projects-grid {
  --columns-number: 1;
  --columns-gap-y: 3rem;
  max-inline-size: 30rem;
  margin: 3.75rem auto 0;
}
#portfolio-page .section-pagination {
  inline-size: 100%;
  margin-block-start: 3.75rem;
  padding-block-start: 1.25rem;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
}
#portfolio-page .section-pagination .current,
#portfolio-page .section-pagination a:is(:hover, :focus) {
  color: var(--color-secondary);
}
#portfolio-page .project-card:is(:hover, :focus-within) .project-card-image-wrapper::after {
  opacity: 0.6;
  background: var(--color-dark-alt);
}
#portfolio-page .project-card-link {
  display: block;
  text-align: center;
  text-decoration: none;
}
#portfolio-page .project-card-image-wrapper {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}
#portfolio-page .project-card-image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-dark);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out;
}
#portfolio-page .project-card-image {
  inline-size: 100%;
  block-size: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#portfolio-page .project-card-title, #portfolio-page .project-card-service-types {
  max-inline-size: 19.3125rem;
  margin-inline: auto;
}
#portfolio-page .project-card-title {
  margin-block: 1rem 0;
  font-size: 24px;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-dark-alt);
  font-weight: 500;
}
#portfolio-page .project-card-service-types {
  margin-block: 0.5rem 0;
  font-size: 18px;
  line-height: 1.1;
  color: var(--color-secondary);
  font-weight: 700;
}
@media only screen and (min-width: 48rem) {
  #portfolio-page {
    padding-block-end: 6.25rem;
  }
  #portfolio-page .section-container, #portfolio-page .section-projects {
    --container-gutter: 2.5rem;
  }
  #portfolio-page .section-projects {
    margin-block-start: 5.625rem;
  }
  #portfolio-page .section-filter {
    gap: 2rem;
  }
  #portfolio-page .section-filter-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  #portfolio-page .section-projects-grid {
    --columns-number: 2;
    --columns-gap-x: 1.5rem;
    --columns-gap-y: 3.75rem;
    max-inline-size: none;
    margin-block-start: 5rem;
  }
}
@media only screen and (min-width: 75rem) {
  #portfolio-page {
    padding-block-end: 7.5rem;
  }
  #portfolio-page .section-projects {
    margin-block-start: 6.875rem;
  }
  #portfolio-page .section-projects-grid {
    --columns-number: 3;
    --columns-gap-x: 1.875rem;
    --columns-gap-y: 4.125rem;
    margin-block-start: 5.625rem;
  }
  #portfolio-page .section-pagination {
    margin-block-start: 5rem;
  }
  #portfolio-page .project-card-title {
    font-size: 28px;
  }
  #portfolio-page .project-card-service-types {
    font-size: 20px;
  }
}
@media only screen and (min-width: 87.5rem) {
  #portfolio-page {
    padding-block-end: 8.75rem;
  }
  #portfolio-page .section-container, #portfolio-page .section-projects {
    --container-gutter: 5.3125rem;
  }
  #portfolio-page .section-projects {
    margin-block-start: 8.125rem;
  }
  #portfolio-page .section-filter {
    gap: 2.1875rem;
  }
  #portfolio-page .section-filter-link {
    min-block-size: 3.4375rem;
    padding-inline: 1.5rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  #portfolio-page .section-container, #portfolio-page .section-projects {
    --container-gutter: max(5.3125rem, calc((100vw - 82.0625rem) / 2));
  }
  #portfolio-page .section-content h2 {
    margin-block-end: 1.75rem;
  }
  #portfolio-page .section-projects {
    margin-block-start: 8.75rem;
  }
  #portfolio-page .section-filter::before {
    font-size: 22px;
  }
  #portfolio-page .section-filter-link {
    min-block-size: 3.875rem;
    padding: 0.75rem 1.875rem;
    line-height: 2.375rem;
  }
  #portfolio-page .section-projects-grid {
    --columns-gap-y: 4.4375rem;
    margin-block-start: 6.25rem;
  }
  #portfolio-page .section-pagination {
    margin-block-start: 6.25rem;
  }
  #portfolio-page .project-card-title {
    margin-block-start: 1.4375rem;
    font-size: 30px;
  }
  #portfolio-page .project-card-service-types {
    margin-block-start: 0.625rem;
    font-size: 22px;
    line-height: 23px;
  }
}

/* ================================================================================
FAQs Template
================================================================================ */
/* Template FAQs
-------------------------------------------------------------------------------- */
/*
* FAQs Related Classes
-------------------------------------------------------------------------------- */
/* Add helper classes specific to this template as needed */
/*
* FAQs Template
-------------------------------------------------------------------------------- */
:is(.faqs-page, #faqs-page) .section-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.75rem;
}
:is(.faqs-page, #faqs-page) .section-faqs {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  inline-size: min(100%, 59.8125rem);
  margin-inline: auto;
}
:is(.faqs-page, #faqs-page) .section-filter-list {
  display: grid;
  gap: 0.625rem;
}
:is(.faqs-page, #faqs-page) .section-filter-list > li {
  display: flex;
}
:is(.faqs-page, #faqs-page) .section-filter .button {
  inline-size: 100%;
  min-block-size: 3.25rem;
  padding: 0.625rem 1rem;
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-light);
  text-transform: none;
  white-space: nowrap;
  font-size: 16px;
  line-height: 1.2;
  font-family: var(--font-primary);
  font-weight: 600;
}
:is(.faqs-page, #faqs-page) .section-filter .button:is(:hover, :focus-visible) {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-light);
}
:is(.faqs-page, #faqs-page) .section-lists, :is(.faqs-page, #faqs-page) .section-list, :is(.faqs-page, #faqs-page) .section-list-items {
  display: flex;
  flex-direction: column;
}
:is(.faqs-page, #faqs-page) .section-lists {
  gap: 3rem;
  inline-size: 100%;
}
:is(.faqs-page, #faqs-page) .section-list {
  gap: 1.5rem;
}
:is(.faqs-page, #faqs-page) .section-list-heading {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-dark);
  font-weight: 500;
}
:is(.faqs-page, #faqs-page) .section-list-items {
  gap: 0.625rem;
}
:is(.faqs-page, #faqs-page) .section-list-item {
  padding: 1.25rem;
  background: var(--color-light);
  border: 1px solid var(--color-neutral);
  border-radius: 2px;
}
:is(.faqs-page, #faqs-page) .section-list-item-title {
  align-items: center;
  color: var(--color-primary);
  font-size: 18px;
  line-height: 1.2;
  font-family: var(--font-secondary);
  font-weight: 700;
}
:is(.faqs-page, #faqs-page) .section-list-item-title::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--color-secondary);
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 1;
}
:is(.faqs-page, #faqs-page) .section-list-item-title:is(:hover, :focus-visible, .open) {
  color: var(--color-secondary);
}
:is(.faqs-page, #faqs-page) .section-list-item-title.open::after {
  content: "-";
}
:is(.faqs-page, #faqs-page) .section-list-item-content {
  max-inline-size: 51.1875rem;
  margin-block-start: 1rem;
  color: var(--color-dark-alt);
  font-size: 16px;
  line-height: 1.5;
}
:is(.faqs-page, #faqs-page) .section-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem 1.25rem;
  inline-size: min(100%, 59.8125rem);
  background: var(--color-neutral-dark);
  border: 1px solid var(--color-primary);
}
:is(.faqs-page, #faqs-page) .section-body .content {
  max-inline-size: 51.8125rem;
  color: rgba(0, 0, 0, 0.7);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
}
:is(.faqs-page, #faqs-page) .section-body .content > :last-child {
  margin-block-end: 0;
}
:is(.faqs-page, #faqs-page) .section-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
:is(.faqs-page, #faqs-page) .section-heading, :is(.faqs-page, #faqs-page) .section-subheading {
  margin: 0;
}
:is(.faqs-page, #faqs-page) .section-heading {
  color: var(--color-secondary);
  font-size: 28px;
  line-height: 1.2;
  font-family: var(--font-secondary);
  font-weight: 500;
}
:is(.faqs-page, #faqs-page) .section-subheading {
  color: var(--color-dark);
  font-size: 17px;
  line-height: 1.2;
  font-family: var(--font-primary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
:is(.faqs-page, #faqs-page) .section-number {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: 2.125rem;
  padding-inline-start: 3.0625rem;
}
:is(.faqs-page, #faqs-page) .section-number::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 2.125rem;
  block-size: 2.125rem;
  background: url("images/bio_phone_icon_red.svg") center/contain no-repeat;
  transform: translateY(-50%);
}
:is(.faqs-page, #faqs-page) .section-number .number-link {
  color: var(--color-dark-alt);
  font-size: 22px;
  line-height: 1;
}
@media only screen and (min-width: 48rem) {
  :is(.faqs-page, #faqs-page) .section-container {
    gap: 5rem;
  }
  :is(.faqs-page, #faqs-page) .section-faqs {
    gap: 5rem;
  }
  :is(.faqs-page, #faqs-page) .section-filter-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :is(.faqs-page, #faqs-page) .section-lists {
    gap: 3.75rem;
  }
  :is(.faqs-page, #faqs-page) .section-list {
    gap: 1.875rem;
  }
  :is(.faqs-page, #faqs-page) .section-list-heading {
    font-size: 30px;
  }
  :is(.faqs-page, #faqs-page) .section-body {
    gap: 1.625rem;
    padding: 2rem;
  }
  :is(.faqs-page, #faqs-page) .section-heading {
    font-size: 32px;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.faqs-page, #faqs-page) .section-container {
    gap: 6.25rem;
  }
  :is(.faqs-page, #faqs-page) .section-faqs {
    gap: 6.25rem;
  }
  :is(.faqs-page, #faqs-page) .section-filter-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  :is(.faqs-page, #faqs-page) .section-filter .button {
    inline-size: auto;
    min-block-size: 3.875rem;
    padding: 0.75rem 1.8125rem;
    font-size: 18px;
  }
  :is(.faqs-page, #faqs-page) .section-list-heading {
    font-size: 34px;
  }
  :is(.faqs-page, #faqs-page) .section-list-item {
    padding: 1.5rem 1.8125rem 1.5rem 1.625rem;
  }
  :is(.faqs-page, #faqs-page) .section-list-item:has(> .open) {
    padding-block-end: 1.625rem;
  }
  :is(.faqs-page, #faqs-page) .section-list-item-title {
    font-size: 20px;
  }
  :is(.faqs-page, #faqs-page) .section-list-item-content {
    margin-block-start: 1.5625rem;
    font-size: 17px;
  }
  :is(.faqs-page, #faqs-page) .section-body {
    padding: 2rem 2.5rem;
  }
  :is(.faqs-page, #faqs-page) .section-body .content {
    font-size: 18px;
  }
  :is(.faqs-page, #faqs-page) .section-heading {
    font-size: 36px;
  }
  :is(.faqs-page, #faqs-page) .section-subheading {
    font-size: 20px;
  }
  :is(.faqs-page, #faqs-page) .section-number .number-link {
    font-size: 27px;
  }
}

/* ================================================================================
* Financing Template
================================================================================ */
/* Template Financing
-------------------------------------------------------------------------------- */
/*
* Financing Related Classes
-------------------------------------------------------------------------------- */
/* Add helper classes specific to this template as needed */
/*
* Financing Template
-------------------------------------------------------------------------------- */
/* ================================================================================
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;
}
:is(.gallery-page, #gallery-page) .gallery:is(.columns) {
  --columns-gap-x: 1.875rem;
  --columns-gap-y: 1.875rem;
  place-content: stretch;
  place-items: stretch;
  grid-auto-flow: dense;
}
@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;
  }
}
@media only screen and (min-width: 87.5rem) {
  :is(.gallery-page, #gallery-page) .gallery:is(.columns) {
    --columns-number: 4;
  }
}
:is(.gallery-page, #gallery-page) .gallery-item {
  overflow: clip;
  position: relative;
  border-radius: 1rem;
}
:is(.gallery-page, #gallery-page) .gallery-item:is(:hover, :focus) .gallery-item-view {
  opacity: 1;
}
:is(.gallery-page, #gallery-page) .gallery-item:is(:hover, :focus) .gallery-item-img::after {
  opacity: 0;
}
:is(.gallery-page, #gallery-page) .gallery-item-view {
  position: absolute;
  inset: 0;
  opacity: 0;
  display: flex;
  place-items: center;
  place-content: center;
  max-width: none;
  max-height: none;
  padding: 4rem 2.75rem;
  background: rgba(0, 0, 0, 0.3);
  background-blend-mode: multiply;
}
@media only screen and (min-width: 48rem) {
  :is(.gallery-page, #gallery-page) .gallery-item:is(:nth-child(16n+4),
  :nth-child(16n+10)) {
    grid-column: span 2;
  }
  :is(.gallery-page, #gallery-page) .gallery-item:is(:nth-child(16n+4),
  :nth-child(16n+10)) .gallery-item-img {
    --cover-aspect-w: 40.375;
    --cover-aspect-l: 24;
  }
}
:is(.gallery-page, #gallery-page) .gallery-item-img {
  --cover-aspect-w: 19.23375;
  --cover-aspect-l: 24;
}
/* ================================================================================
* Maintenance Template
================================================================================ */
/* Template Maintenance
-------------------------------------------------------------------------------- */
/*
* Maintenance Related Classes
-------------------------------------------------------------------------------- */
/* Add helper classes specific to this template as needed */
/*
* Maintenance Template
-------------------------------------------------------------------------------- */
/* ================================================================================
* Directory Grid Template
================================================================================ */
/* Menu Directories Template — main
-------------------------------------------------------------------------------- */
#menudirs-page .section-container {
  --container-gutter: 1.25rem;
}
#menudirs-page .section-blocks-outer {
  gap: 3rem;
}
#menudirs-page .section-body {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
#menudirs-page .section-content h2 {
  color: var(--color-secondary);
  font-size: clamp(1.625rem, 2.5vw, 2.125rem);
  margin-block: 1.75rem 1.25rem;
}
#menudirs-page .section-content p:not(:last-child) {
  margin-block-end: 0.9375rem;
}
#menudirs-page .section-image {
  position: relative;
  inline-size: min(100%, 33.0625rem);
  justify-self: center;
}
#menudirs-page .section-image picture,
#menudirs-page .section-image img {
  display: block;
  inline-size: 100%;
}
#menudirs-page .section-image img {
  block-size: auto;
}
#menudirs-page .section-image:has(img)::after {
  content: "";
  position: absolute;
  inset-inline-start: 44.4234%;
  inset-block-start: 49.0526%;
  inline-size: 7.9395%;
  aspect-ratio: 42/55;
  background: url("/wp-content/themes/eliteremodeling/images/map_marker.svg") center/contain no-repeat;
  pointer-events: none;
}
#menudirs-page .menudir {
  --pa-item-padding-x: 0rem;
  --pa-item-border-width: 0px;
  --pa-item-height: 1.5em;
  --pa-title-padding-x: 0rem;
  border-block-start: 1px solid var(--color-neutral);
  padding-block-start: 2.5rem;
  margin-bottom: 2.5rem;
}
#menudirs-page .menudir:last-child {
  margin-bottom: 0;
}
#menudirs-page .menudir + #menudirs-page .menudir {
  margin-block-start: 3rem;
}
#menudirs-page .menudir-title {
  font-size: 1.375rem;
  line-height: 1.2;
  font-weight: 700;
  margin-block-end: 1.25rem;
}
#menudirs-page .menudir-menu {
  --columns-gap-x: 1.5rem;
  --columns-gap-y: 0.9375rem;
  font-size: 1.125rem;
}
#menudirs-page .menudir-menu li {
  border-block-start: 0;
  overflow-wrap: anywhere;
}
#menudirs-page .menudir-menu li:is(:hover, :focus-within) a:not([href="#"]) {
  color: var(--color-secondary);
}
@media only screen and (min-width: 48rem) {
  #menudirs-page .section-container {
    --container-gutter: 2.5rem;
  }
  #menudirs-page .section-blocks-outer {
    gap: 4rem;
  }
  #menudirs-page .section-content {
    font-size: 1.125rem;
    line-height: 1.5;
  }
  #menudirs-page .menudir-menu {
    --columns-number: 2;
    --columns-gap-x: 2.5rem;
  }
}
@media only screen and (min-width: 75rem) {
  #menudirs-page .section-body {
    grid-template-columns: minmax(0, 612fr) minmax(0, 529fr);
    -moz-column-gap: 4rem;
         column-gap: 4rem;
  }
  #menudirs-page .menudir-menu {
    --columns-number: 4;
  }
}
@media only screen and (min-width: 87.5rem) {
  #menudirs-page .section-container {
    --container-gutter: 5.3125rem;
  }
  #menudirs-page .section-blocks-outer {
    gap: 5rem;
  }
  #menudirs-page .section-body {
    -moz-column-gap: 6rem;
         column-gap: 6rem;
  }
  #menudirs-page .menudir {
    padding-block-start: 3.75rem;
  }
  #menudirs-page .menudir-title {
    margin-block-end: 1.8125rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  #menudirs-page .section-container {
    --container-gutter: 18.875rem;
  }
  #menudirs-page .section-body {
    -moz-column-gap: 10.9375rem;
         column-gap: 10.9375rem;
  }
  #menudirs-page .menudir-menu {
    --columns-gap-x: 5.25rem;
  }
}
@media only screen and (max-width: 47.9375rem) {
  #menudirs-page .menudir {
    text-align: center;
  }
}

/* ================================================================================
* 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 {
  padding-inline: 2rem;
  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
================================================================================ */
/* Team main
-------------------------------------------------------------------------------- */
#team-page .section-profiles {
  display: grid;
  grid-template-columns: minmax(0, 25rem);
  justify-content: center;
  gap: 4rem 2rem;
}
@media only screen and (min-width: 48rem) {
  #team-page .section-profiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-inline-size: 51.125rem;
    margin-inline: auto;
  }
}
@media only screen and (min-width: 75rem) {
  #team-page .section-profiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-inline-size: none;
    gap-block: 5rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  #team-page .section-container {
    --container-gutter: 5.3125rem;
  }
  #team-page .section-profiles {
    -moz-column-gap: 3.125rem;
         column-gap: 3.125rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  #team-page .section-container {
    --container-gutter: clamp(
    	2.5rem,
    	calc((100vw - 81.25rem) / 2),
    	18.75rem
    );
  }
  #team-page .section-profiles {
    grid-template-columns: repeat(3, 25rem);
    justify-content: start;
    max-inline-size: 81.25rem;
    margin-inline: 0;
    row-gap: 7rem;
  }
}

/* ================================================================================
* Testimonials Template
================================================================================ */
/* Testimonials Template
-------------------------------------------------------------------------------- */
#testimonials-page {
  padding-block-end: 4rem;
}
#testimonials-page .section-container {
  --container-gutter: 1.25rem;
}
#testimonials-page .section-blocks {
  gap: 3rem;
}
#testimonials-page .section-testimonials-featured {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 0;
  padding-block: 2.5rem;
}
#testimonials-page .section-testimonials {
  --columns-number: 1;
  --columns-gap-x: 0rem;
  --columns-gap-y: 2rem;
  inline-size: min(100%, 64.25rem);
  margin-inline: auto;
}
#testimonials-page .testimonials-featured-slider {
  --swiper-custom-arrow-offset-x: 2.5rem;
  --swiper-custom-arrow-offset-x-negate: 0rem;
  --swiper-navigation-sides-offset: -0.5rem;
  margin-inline: 0;
  padding-block: 0;
}
#testimonials-page .testimonials-featured-slider .video-container {
  gap: 0.875rem;
}
#testimonials-page .testimonials-featured-slider .video-title {
  color: var(--color-primary);
  font-weight: 400;
}
#testimonials-page .testimonial {
  min-block-size: 0;
  border: 1px solid var(--color-primary);
  padding: 2rem 1.25rem;
  background: var(--color-neutral-dark);
  text-align: center;
}
#testimonials-page .testimonial-container {
  align-items: center;
  gap: 0;
}
#testimonials-page .testimonial-stars {
  display: flex;
  inline-size: 7.94rem;
  block-size: 1.321rem;
  margin: 0;
}
#testimonials-page .testimonial-stars picture,
#testimonials-page .testimonial-stars img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#testimonials-page .testimonial-highlight {
  max-inline-size: 47.998rem;
  margin: 2.875rem 0 0;
  color: var(--color-dark-alt);
  font-family: var(--font-primary);
  font-size: clamp(22px, 1.146vi, 1.375rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}
#testimonials-page .testimonial-source {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.0625rem;
  margin: 2.125rem 0 0;
  color: var(--color-dark-alt);
  font-style: normal;
  text-align: center;
}
#testimonials-page .testimonial-source span:first-child {
  font-family: var(--font-secondary);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}
#testimonials-page .testimonial-source span:last-child {
  color: var(--color-secondary);
  font-family: var(--font-accent);
  text-transform: capitalize;
  font-size: 1.8125rem;
  font-weight: 400;
  line-height: 0.8;
}
#testimonials-page .testimonial-source span:nth-last-child(n+2)::after {
  content: none;
}
@media only screen and (min-width: 48rem) {
  #testimonials-page {
    padding-block-end: 5rem;
  }
  #testimonials-page .section-container {
    --container-gutter: 2.5rem;
  }
  #testimonials-page .section-blocks {
    gap: 3.5rem;
  }
  #testimonials-page .section-testimonials-featured {
    padding-block: 3rem;
  }
  #testimonials-page .section-testimonials {
    --columns-gap-y: 2.25rem;
  }
  #testimonials-page .testimonials-featured-slider {
    --swiper-custom-arrow-offset-x: 3.5rem;
  }
  #testimonials-page .testimonial {
    padding: 3rem 2.5rem;
  }
}
@media only screen and (min-width: 75rem) {
  #testimonials-page {
    padding-block-end: 6rem;
  }
  #testimonials-page .section-container {
    --container-gutter: 3.75rem;
  }
  #testimonials-page .section-blocks {
    gap: 4rem;
  }
  #testimonials-page .section-testimonials-featured {
    padding-block: 3.5rem;
  }
  #testimonials-page .section-testimonials {
    --columns-gap-y: 2.5rem;
    inline-size: 800px;
  }
  #testimonials-page .testimonials-featured-slider {
    --swiper-custom-arrow-offset-x: 4rem;
  }
  #testimonials-page .testimonial {
    padding: 3.75rem 5rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  #testimonials-page {
    padding-block-end: 7rem;
  }
  #testimonials-page .section-container {
    --container-gutter: 5rem;
  }
  #testimonials-page .section-blocks {
    gap: 4.375rem;
  }
  #testimonials-page .section-testimonials-featured {
    padding-block: 4rem;
  }
  #testimonials-page .section-testimonials {
    inline-size: 1028px;
  }
  #testimonials-page .testimonials-featured-slider {
    --swiper-custom-arrow-offset-x: 5rem;
    inline-size: calc(100% - 10rem);
  }
  #testimonials-page .testimonial {
    padding-inline: 6rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  #testimonials-page {
    margin-block-start: -4.84375rem;
    padding-block-end: 8.75rem;
  }
  #testimonials-page .section-container {
    --container-gutter: 0rem;
    --container-size-reference: var(--comp);
  }
  #testimonials-page .section-blocks {
    gap: 4.375rem;
  }
  #testimonials-page .section-testimonials-featured {
    block-size: 24.25rem;
    padding-block: 0;
  }
  #testimonials-page .section-testimonials {
    --columns-gap-y: 2.5rem;
  }
  #testimonials-page .testimonials-featured-slider {
    --swiper-custom-arrow-offset-x: 8.125rem;
    --swiper-navigation-sides-offset: 2.96875rem;
    inline-size: 108.25rem;
  }
  #testimonials-page .testimonial {
    min-block-size: 28.75rem;
    padding: 5.125rem 8.125rem;
  }
}

/* ================================================================================
* Videos Template
================================================================================ */
/* Video Center main
-------------------------------------------------------------------------------- */
#videos-page .videos:is(.columns) {
  --columns-number: 1;
  --columns-gap-x: 3rem;
  --columns-gap-y: 3rem;
  justify-content: center;
  justify-items: stretch;
  max-inline-size: 31.25rem;
  margin-inline: auto;
}
#videos-page .video {
  inline-size: 100%;
}
#videos-page .video-thumbnail {
  --video-thumbnail-aspect-w: 800;
  --video-thumbnail-aspect-l: 450;
  --video-thumbnail-overlay-background: linear-gradient(
  	to bottom,
  	transparent 9.893%,
  	rgba(0, 0, 0, 0.4) 100%
  );
  --video-thumbnail-overlay-opacity: 1;
  --video-thumbnail-overlay-mix-blend: normal;
}
#videos-page .video-button-default {
  --video-button-size: clamp(
  	3.875rem,
  	3.3917rem + 2.148vw,
  	5.9694375rem
  );
}
#videos-page .video-title {
  font-size: 22px;
  line-height: 1.1;
  color: var(--color-primary);
  font-weight: 400;
}
@media only screen and (min-width: 48rem) {
  #videos-page .videos:is(.columns) {
    --columns-number: 2;
    max-inline-size: 82.2646875rem;
  }
}
@media only screen and (min-width: 75rem) {
  #videos-page .videos:is(.columns) {
    --columns-number: 3;
  }
  #videos-page .video-container {
    gap: 1.25rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  #videos-page {
    margin-block-start: -0.46875rem;
  }
  #videos-page .videos:is(.columns) {
    --columns-gap-x: 3.5625rem;
    --columns-gap-y: 3.4375rem;
  }
  #videos-page .video-container {
    gap: 1.3486875rem;
  }
  #videos-page .video-title {
    min-block-size: 3.875rem;
  }
}

/* ================================================================================
* 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;
  }
}
/* Project detail template and legacy review content. */
/* Single project page
-------------------------------------------------------------------------------- */
.single-project-page {
  padding-block: 60px 80px;
}
.single-project-page .section-pagination {
  inline-size: 100%;
  margin-block-start: clamp(60px, 7vw, 120px);
  padding-block-start: 28px;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
  text-transform: uppercase;
}
.single-project-page .section-pagination .pagination-block-right {
  grid-column: 1/-1;
  text-align: right;
}
.single-project-page .section-pagination .pagination-nav-link a::before, .single-project-page .section-pagination .pagination-nav-link a::after {
  border-color: var(--color-secondary);
}
.single-project-page .section-pagination .pagination-nav-link span {
  margin-inline: 0.5em;
}
.single-project-page [data-project-gallery-image] {
  display: block;
  cursor: zoom-in;
}
.single-project-page [data-project-gallery-image] img {
  -o-object-fit: cover;
     object-fit: cover;
  block-size: 100%;
}
.single-project-page .section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-inline: 30px;
  text-align: center;
}
.single-project-page .section-header .banner-buttons {
  margin-block-start: 0;
}
.single-project-page .section-heading {
  margin: 0;
  font-size: 40px;
  line-height: 1.2;
}
.single-project-page .section-container {
  margin-block-start: 60px;
}
.single-project-page .section-subheader {
  max-inline-size: 800px;
  margin-inline: auto;
  margin-block-end: 32px;
  text-align: center;
}
.single-project-page .section-subheading {
  font-size: 22px;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-secondary);
  font-style: italic;
  font-weight: 500;
  text-align: center;
  max-inline-size: 693px;
  margin-inline: auto;
}
.single-project-page .project {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.single-project-page .project-header {
  max-inline-size: 800px;
  margin-inline: auto;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--color-neutral);
}
.single-project-page .project-info {
  font-size: 17px;
  line-height: 1.5;
}
.single-project-page .project-info > span {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.single-project-page .project-content {
  margin-block-start: 20px;
  padding-block-start: 32px;
  border-block-start: 1px solid var(--color-neutral);
}
.single-project-page .project-content > span {
  display: block;
  margin-block-end: 5px;
}
.single-project-page .project-content p:not(:last-child) {
  margin-block-end: 24px;
}
.single-project-page .project-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.single-project-page .project-gallery-item, .single-project-page .project-gallery-img {
  aspect-ratio: 1;
}
.single-project-page .project-gallery-item {
  overflow: hidden;
}
.single-project-page .project-gallery-img {
  display: block;
  inline-size: 100%;
}
.single-project-page .project-gallery-img img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (min-width: 48rem) {
  .single-project-page {
    padding-block: 80px 100px;
  }
  .single-project-page .section-header {
    padding-inline: 40px;
  }
  .single-project-page .section-heading {
    font-size: 48px;
    line-height: 1.2;
  }
  .single-project-page .section-container {
    margin-block-start: 70px;
  }
  .single-project-page .section-subheader {
    margin-block-end: 36px;
  }
  .single-project-page .section-subheading {
    font-size: 24px;
    line-height: 1.2;
  }
  .single-project-page .project {
    gap: 70px;
  }
  .single-project-page .project-header {
    padding-block-start: 24px;
  }
  .single-project-page .project-info {
    font-size: 18px;
    line-height: 1.5;
  }
  .single-project-page .project-info > span {
    font-size: 16px;
    line-height: 1.5;
  }
  .single-project-page .project-content {
    margin-block-start: 24px;
    padding-block-start: 36px;
  }
  .single-project-page .project-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}
@media only screen and (min-width: 75rem) {
  .single-project-page {
    padding-block: 100px 120px;
  }
  .single-project-page .section-heading {
    font-size: 52px;
    line-height: 1.25;
  }
  .single-project-page .section-container {
    margin-block-start: 80px;
  }
  .single-project-page .project {
    gap: 80px;
  }
  .single-project-page .project-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    -moz-column-gap: 30px;
         column-gap: 30px;
  }
}
@media only screen and (min-width: 87.5rem) {
  .single-project-page {
    padding-block: 120px 130px;
  }
  .single-project-page .section-heading {
    font-size: 56px;
    line-height: 1.25;
  }
  .single-project-page .section-container {
    margin-block-start: 90px;
  }
  .single-project-page .project {
    gap: 90px;
  }
}
@media only screen and (min-width: 112.5rem) {
  .single-project-page {
    padding-block: 140px;
  }
  .single-project-page .section-header {
    gap: 28px;
  }
  .single-project-page .section-heading {
    font-size: 60px;
    line-height: 80px;
  }
  .single-project-page .section-container {
    margin-block-start: 100px;
  }
  .single-project-page .section-subheader {
    margin-block-end: 40px;
  }
  .single-project-page .section-subheading {
    font-size: 26px;
    line-height: 1.2;
  }
  .single-project-page .project {
    gap: 100px;
  }
  .single-project-page .project-header {
    padding-block-start: 26px;
  }
  .single-project-page .project-content {
    margin-block-start: 26px;
    padding-block-start: 39px;
  }
  .single-project-page .project-gallery {
    row-gap: 37px;
  }
}

/* Full-size image dialog for migrated project galleries. */
.project-lightbox {
  border: 0;
  padding: 0;
  margin: auto;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  background: transparent;
  color: #fff;
}
.project-lightbox::backdrop {
  background: var(--color-dark);
  opacity: 0.9;
}
.project-lightbox[open] {
  display: grid;
  place-items: center;
}
.project-lightbox > img {
  width: auto;
  height: auto;
  max-width: calc(100vw - 120px);
  max-height: calc(100dvh - 100px);
  -o-object-fit: contain;
     object-fit: contain;
}
.project-lightbox > img[hidden] {
  display: none;
}
.project-lightbox button {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  background: #171717;
  color: #fff;
  font: 36px/1 sans-serif;
  cursor: pointer;
}
.project-lightbox button svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.project-lightbox button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.project-lightbox [data-gallery-close] {
  top: 12px;
  right: 12px;
}
.project-lightbox [data-gallery-prev] {
  left: 12px;
  top: calc(50% - 24px);
}
.project-lightbox [data-gallery-next] {
  right: 12px;
  top: calc(50% - 24px);
}
.project-lightbox [data-gallery-counter] {
  position: absolute;
  bottom: 12px;
  margin: 0;
  font: 18px/1.5 sans-serif;
}
.project-lightbox [data-gallery-status] {
  position: absolute;
  top: 65px;
  margin: 0;
  text-align: center;
}
@media (max-width: 47.9375rem) {
  .project-lightbox > img {
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 160px);
  }
  .project-lightbox [data-gallery-prev], .project-lightbox [data-gallery-next] {
    top: auto;
    bottom: 12px;
  }
}

/* Legacy review content markup. */
.review-container {
  width: 100%;
}
.review-container h2 {
  text-align: center;
}
.review-container h3 {
  text-align: center;
  padding-bottom: 30px;
}

.review-left, .review-right {
  width: 48%;
}
.review-left img, .review-right img {
  display: block;
  margin: 0 auto;
  padding-bottom: 5px;
  height: 54px;
  width: auto;
}

.review-left {
  float: left;
  margin-right: 4%;
}

.review-right {
  float: right;
  margin-right: 0;
}

.review-bottom {
  width: 48%;
  float: none;
  margin: 0 auto;
  clear: both;
}
.review-bottom img {
  display: block;
  margin: 0 auto;
  padding-bottom: 5px;
  width: auto;
  padding-top: 20px;
}

.review-button {
  width: 100%;
  display: block;
  font-size: 14px;
  color: var(--brand-color-light);
  border-radius: 6px;
  background-color: var(--brand-color-primary);
  text-align: center;
  padding: 20px 0;
  text-decoration: none;
}

a.review-button {
  color: var(--brand-color-light) !important;
}
a.review-button:hover {
  color: var(--brand-color-light);
  background-color: var(--brand-color-dark);
}

.wistia-review {
  padding-top: 40px;
}

@media (max-width: 767px) {
  .review-left, .review-right {
    width: 100%;
    float: none;
  }
  .review-left {
    margin-right: 0;
  }
  .review-bottom {
    width: 100%;
  }
  .review-right img, .review-bottom img {
    padding-top: 30px;
  }
}

/*# sourceMappingURL=style.css.map */