@charset "UTF-8";
/***
    The new CSS reset - version 1.8.3 (last updated 21.1.2023)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
*:where(:not(html,
iframe, canvas,
img, svg, video, audio,
input, textarea, select, button,
table, caption, tbody, tfoot, thead, tr, th, td):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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: Archivo, Helvetica, Arial, sans-serif, Primary Fallback;
  --font-secondary: Bevan, Georgia, Times New Roman, serif, Secondary Fallback;
  --font-accent: var(--font-primary);
  --font-monospace: monospace;
  /* Styleguide - colors */
  --color-dark: #000F1F;
  --color-dark-alt: #0B2E46;
  --color-light: #FFFFFF;
  --color-light-alt: #C0DEFF;
  --color-primary: #C2DF85;
  --color-primary-alt: var(--color-primary);
  --color-primary-gradient-start: var(--color-primary);
  --color-primary-gradient-end: var(--color-primary-alt);
  --color-secondary: #053262;
  --color-secondary-alt: #0250A3;
  --color-secondary-gradient-start: #003B79;
  --color-secondary-gradient-end: #082A4E;
  --color-accent: #0197F2;
  --color-accent-alt: var(--color-accent);
  --color-accent-gradient-start: var(--color-accent);
  --color-accent-gradient-end: var(--color-primary);
  --color-neutral: #D0D0D0;
  --color-neutral-light: var(--color-neutral);
  --color-neutral-lighter: var(--color-neutral-light);
  --color-neutral-lightest: var(--color-neutral-lighter);
  --color-neutral-dark: var(--color-neutral);
  --color-neutral-darker: var(--color-neutral-dark);
  --color-neutral-darkest: var(--color-neutral-darker);
  --color-success: #00CC00;
  --color-caution: #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 */
  }
}

/* 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;
}
@media (prefers-reduced-motion: reduce) {
  html,
  body {
    scroll-behavior: auto;
  }
}
html,
body {
  /* mobile viewport bug fix */
  min-block-size: 100vb;
  min-block-size: -webkit-fill-available;
  /* accent color for form stuff */
  accent-color: var(--color-primary);
  /* trim text boxes. if font is designed with weird baseline to ascender space, this might help??? */
  text-box-trim: trim-both;
}

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

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

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

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

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

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

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

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

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

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

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

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

button {
  border: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Other custom global scaffolding here....
--------------------------------------------------------------- */
/* Normalize template main and asides' vertical padding. adjust as needed then customize in certain template styles.
You can use classes for other elements that need to share the same padding as well
--------------------------------------------------------------- */
:is(main, .main, aside, .aside) {
  padding-block: 2.125rem 3.125rem;
}
@media only screen and (min-width: 48rem) {
  :is(main, .main, aside, .aside) {
    padding-block: 4rem 5rem;
  }
}
@media only screen and (min-width: 75rem) {
  :is(main, .main, aside, .aside) {
    padding-block: 7rem 7rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(main, .main, aside, .aside) {
    padding-block: 8.75rem 8.75rem;
  }
}
.banner-no-background-image :is(main, .main, aside, .aside) {
  padding-block-start: 0rem;
}
/* These templates' sections provide their own spacing and overlaps. */
#home-page,
#about-page {
  padding-block: 0;
}

/* ...Or separate normalize template main and asides' vertical padding.
--------------------------------------------------------------- */
/* Catch fancy/weird/whatever positioned elements into custom templates' content area only + prevent clipping issues
--------------------------------------------------------------- */
.template-wrapper {
  position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.gfield_contains_required .gfield-custom-label-indicator[data-required-glyph] {
  /* field ui indicator */
}
.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: 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;
}

/* Checkbox controls — consistent with the Figma consent checkbox. */
.gform_wrapper.gravity-theme input[type=checkbox] {
  appearance: none;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  padding: 0;
  border: 0.875px solid var(--color-light-alt);
  border-radius: 1.75px;
  background-color: var(--color-light);
  cursor: pointer;
}
.gform_wrapper.gravity-theme input[type=checkbox]::before {
  content: "";
  inline-size: 4px;
  block-size: 7px;
  border: solid var(--color-dark-alt);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
  opacity: 0;
}
.gform_wrapper.gravity-theme input[type=checkbox]:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.gform_wrapper.gravity-theme input[type=checkbox]:checked::before {
  opacity: 1;
}
.gform_wrapper.gravity-theme input[type=checkbox]:focus-visible {
  outline: 2px solid var(--color-secondary-alt);
  outline-offset: 3px;
}
.gform_wrapper.gravity-theme input[type=checkbox]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
@media (forced-colors: active) {
  .gform_wrapper.gravity-theme input[type=checkbox] {
    appearance: auto;
  }
  .gform_wrapper.gravity-theme input[type=checkbox]::before {
    content: none;
  }
}

/* Footer form — shared field controls, scoped to the existing footer form. */
#footer-form :is(form, .gfield) {
  --field-border-radius: 3px;
  --field-padding-x: 0.9375rem;
  --field-padding-y: 0.84375rem;
  --field-line-height: 1.2;
  --field-placeholder-color: var(--color-dark-alt);
  font-size: 0.9375rem;
  line-height: 1.2;
}
#footer-form .gform_fields {
  gap: 0.25rem 1.5rem;
}
#footer-form .gform_wrapper.gravity-theme .gfield_label {
  margin-block-end: 0.5rem;
}
#footer-form .gfield {
  padding-block: 0.75rem;
}
#footer-form .gfield:is(.form-intro, .form-divider, .gfield--type-consent) {
  padding: 0;
}
#footer-form .gfield:is(.form-intro, .form-divider) {
  font-weight: 700;
}
#footer-form .gfield:is(.form-intro, .form-divider) p {
  margin: 0;
}
#footer-form .gfield:is(.form-intro, .form-divider) hr {
  margin-block: 0.75rem;
  border: 0;
  block-size: 1px;
  inline-size: 100%;
  background: rgba(255, 255, 255, 0.3);
}
#footer-form .gfield.form-intro hr {
  margin-block-start: 1rem;
}
#footer-form .gfield--type-consent {
  margin-block-start: 0.25rem;
}
#footer-form .gfield :is(input[type=text], input[type=email], input[type=tel], select, textarea) {
  color: var(--color-dark-alt);
  border-color: var(--color-light-alt);
  box-shadow: none;
}
#footer-form .gfield :is(input[type=text], input[type=email], input[type=tel], select, textarea)::placeholder {
  color: var(--field-placeholder-color);
  opacity: 1;
}
#footer-form .gfield :is(input[type=text], input[type=email], input[type=tel], select, textarea):focus {
  border-color: var(--color-primary);
}
#footer-form .gfield :is(input[type=text], input[type=email], input[type=tel], select, textarea)[aria-invalid=true] {
  border-color: var(--field-error-color);
}
#footer-form .gfield select {
  appearance: none;
  background-image: url("images/form-select-arrow.svg");
  background-position: right 0.875rem center;
  background-size: 0.75rem 0.5rem;
  background-repeat: no-repeat;
  padding-inline-end: 2.5rem;
}
#footer-form .gfield textarea.large {
  block-size: 6.25rem;
}
#footer-form .gfield--type-select .ginput_container::before {
  content: none;
}
#footer-form .gfield.gfield-custom-inline-choices {
  /* Keep the fieldset legend inside its padding, aligned with text labels. */
}
#footer-form .gfield.gfield-custom-inline-choices .gfield_label {
  float: left;
  inline-size: 100%;
}
#footer-form .gfield.gfield-custom-inline-choices .ginput_container {
  clear: both;
}
#footer-form .gfield.gfield-custom-inline-choices .gfield_radio {
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  min-block-size: 2.875rem;
}
#footer-form .gfield.gfield-custom-inline-choices .gchoice {
  align-items: center;
  gap: 0.5rem;
}
#footer-form .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
#footer-form .ginput_container_consent label {
  flex: 1;
}
#footer-form .ginput_container_consent input[type=checkbox] {
  margin-block-start: 0.125rem;
}
#footer-form {
  /* Use Gravity Forms' existing enhanced dropdown for a branded active option. */
}
#footer-form .chosen-container {
  font: inherit;
  text-align: start;
}
#footer-form .chosen-container .chosen-single {
  block-size: auto;
  padding: var(--field-padding-y) var(--field-padding-x);
  border: 1px solid var(--color-light-alt);
  border-radius: var(--field-border-radius);
  background: var(--color-light);
  box-shadow: none;
  color: var(--color-dark-alt);
  line-height: var(--field-line-height);
}
#footer-form .chosen-container .chosen-single span {
  line-height: inherit;
}
#footer-form .chosen-container .chosen-single div {
  inset-inline-end: 0.875rem;
  inline-size: 0.75rem;
}
#footer-form .chosen-container .chosen-single div b {
  /* Gravity Forms forces its icon sprite on Retina screens. */
  background-image: url("images/form-select-arrow.svg") !important;
  background-size: contain !important;
  background-position: center;
  background-repeat: no-repeat;
}
#footer-form .chosen-container .chosen-search input[type=text] {
  background-image: none !important;
}
#footer-form .chosen-container .chosen-drop {
  border-color: var(--color-light-alt);
}
#footer-form .chosen-container .chosen-results {
  color: var(--color-dark-alt);
}
#footer-form .chosen-container .chosen-results li:is(.highlighted, .result-selected) {
  background: var(--color-primary);
  color: var(--color-dark-alt);
}
#footer-form input:is([type=radio], [type=checkbox]) {
  flex-shrink: 0;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  accent-color: var(--color-primary);
}
#footer-form :is(input, select, textarea, a):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
@media only screen and (max-width: 74.9375rem) {
  #footer-form .gform_fields .gfield--width-third {
    grid-column: span 6;
  }
  #footer-form .gform_fields .gfield--type-radio {
    grid-column: 1/-1;
    margin-block-start: -0.25rem;
  }
}
@media only screen and (max-width: 47.9375rem) {
  #footer-form .gform_fields .gfield {
    grid-column: 1/-1;
  }
  #footer-form .gfield--type-text + .gfield--type-text, #footer-form .gfield--type-phone, #footer-form .gfield--type-select + .gfield--type-select {
    margin-block-start: -0.25rem;
  }
}

/* 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;
}
/* Form on a light card
--------------------------------------------------------------- */
/* Comp: the application form sits on a white card, so the fields take a tinted
fill and a hairline border instead of the panel treatment used on dark sections.
Selectors mirror the shape gravity-theme uses so they win without !important. */
.field-form-style-card {
  --field-card-fill: #fbfbfb;
  --field-card-border: #dfe2e6;
}
.field-form-style-card :is(form, .gfield) {
  --field-border-radius: 3px;
  /* comp pads the field by 14px regardless of its 14px type size */
  --field-padding-x: 0.875rem;
  --field-padding-y: 0.875rem;
  --field-required-color: var(--color-dark);
}
.field-form-style-card .gform_wrapper.gravity-theme .gfield_label,
.field-form-style-card .gfield .gfield_label {
  font-size: 0.9375rem;
  line-height: 1.2;
  font-family: var(--font-primary);
  color: var(--color-dark);
  font-weight: 700;
  margin-block-end: 0.5rem;
}
.field-form-style-card :is(form, .gfield) :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
select,
textarea) {
  font-size: 0.875rem;
  background-color: var(--field-card-fill);
  border-color: var(--field-card-border);
  box-shadow: none;
}
.field-form-style-card {
  /* Upload: drop zone, its prompt and the browse button */
}
.field-form-style-card .gform_wrapper.gravity-theme .gform_drop_area,
.field-form-style-card .gfield .gform_drop_area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: 11rem;
  padding: 0.875em;
  background-color: var(--field-card-fill);
  border: 1px solid var(--field-card-border);
  border-radius: 3px;
}
.field-form-style-card .gform_drop_instructions {
  font-size: 1rem;
  line-height: 1.2;
  font-family: var(--font-primary);
  color: var(--color-secondary-alt);
  font-weight: 700;
}
.field-form-style-card .gform_wrapper.gravity-theme .gform_button_select_files,
.field-form-style-card .gfield .gform_button_select_files {
  font-size: 1rem;
  line-height: 1;
  font-family: var(--font-primary);
  color: var(--color-secondary-alt);
  font-weight: 700;
  padding-block: 0.8125em;
  padding-inline: 1.375em;
  background-color: color-mix(in srgb, var(--color-light-alt) 30%, transparent);
  border: 1px solid var(--color-secondary-alt);
  border-radius: 999em;
  cursor: pointer;
}
.field-form-style-card .gform_wrapper.gravity-theme .gform_button_select_files:is(:hover, :focus),
.field-form-style-card .gfield .gform_button_select_files:is(:hover, :focus) {
  background-color: var(--color-light-alt);
}
.field-form-style-card .gform_wrapper.gravity-theme .gfield_description.gform_fileupload_rules,
.field-form-style-card .gform_fileupload_rules {
  font-size: 0.75rem;
  line-height: 1.48;
  font-family: var(--font-primary);
  color: var(--color-dark);
  font-weight: 400;
  padding-block-start: 0.5rem;
}
.field-form-style-card .gform_footer {
  justify-content: center;
  margin-block-start: 2.5rem;
}

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

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

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

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

/* Center the review link vertically between the circular controls. */
.home-section-3 .swiper-custom-buttons {
  align-items: center;
  gap: 0.6875rem;
}

/* Homepage offers: keep the mascot inside the sliding surface and controls outside. */
.home-section-4 .section-coupons {
  --swiper-custom-arrow-offset-x: 0rem;
  --swiper-navigation-sides-offset: -1.66291rem;
  --swiper-navigation-top-offset: 54.1%;
  --swiper-pagination-bottom: 1.75rem;
  --swiper-pagination-color: var(--color-accent);
  --swiper-pagination-bullet-inactive-color: var(--color-light-alt);
  --swiper-pagination-bullet-horizontal-gap: 0.5625rem;
}
.home-section-4 .section-coupons .swiper-slide {
  padding-block-start: 3.375rem;
}
.home-section-4 .section-coupons .swiper-button-prev,
.home-section-4 .section-coupons .swiper-button-next {
  position: absolute;
  z-index: 2;
}
@media only screen and (min-width: 112.5rem) {
  .home-section-4 .section-coupons .swiper-slide {
    padding-block-start: 4.1875rem;
  }
}

/* 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: normal;
}
:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(: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: 1.5rem;
  line-height: 1.2;
  font-family: var(--font-primary);
  color: var(--scheme-sp, var(--color-secondary-alt));
  letter-spacing: 0em;
  text-transform: capitalize;
  font-style: normal;
  font-weight: 800;
}
:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(: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: 1.25rem;
  line-height: 1.2;
  font-family: var(--font-primary);
  color: var(--scheme-sp, var(--color-secondary));
  letter-spacing: 0em;
  text-transform: none;
  font-style: normal;
  font-weight: 800;
}
:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(: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(--scheme-sp, var(--color-accent));
}

/* The comps set prose h3s in caps. The `.h3` utility is also worn by component
titles (widget headings, accordion questions), which keep their own casing, so the
transform is applied to the actual heading tag only. */
:where(:is(.content, .editor-styles-wrapper) :where(h3)) {
  text-transform: uppercase;
}

/* 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: 1.125rem;
  line-height: 1.6;
  font-family: var(--font-primary);
  color: var(--scheme-sp, var(--color-secondary-alt));
  letter-spacing: 0em;
  text-transform: none;
  font-style: normal;
  font-weight: 700;
}
/* H5s - if not in the styleguide, can be repurposed for other smaller headings present in the design. commonly testimonial quote sources, contact info titles, etc
--------------------------------------------------------------- */
:where(*.h5, :is(.content, .editor-styles-wrapper) :where(h5)) {
  font-size: 1.125rem;
  line-height: 1.6;
  font-family: var(--font-primary);
  color: var(--scheme-sp, var(--color-secondary-alt));
  letter-spacing: 0em;
  text-transform: none;
  font-style: normal;
  font-weight: 700;
}
/* 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: 1.125rem;
  line-height: 1.6;
  font-family: var(--font-primary);
  color: var(--scheme-sp, var(--color-secondary-alt));
  letter-spacing: 0em;
  text-transform: none;
  font-style: normal;
  font-weight: 700;
}
/* 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: 1.5625rem;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--scheme-sb-contrast, var(--color-secondary));
  text-transform: none;
  font-style: normal;
  font-weight: normal;
  text-wrap: balance;
  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: 2.1875rem;
    line-height: 1.2;
  }
}
@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-primary));
  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)):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)) {
  /* comp runs list copy tighter and darker than body text */
  line-height: 1.4;
  color: var(--scheme-fg, var(--color-dark));
}
: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: 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) :is(:is(.content, .editor-styles-wrapper) :where(li))::marker {
  color: currentColor;
}

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

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

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

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

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

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

/* The Content - Other Obscure tags in case it can be utilized for design
--------------------------------------------------------------- */
/* images.
- NOTE: DO NOT MANIPULATE THE MARGIN, PADDING, DISPLAY PROPERTIES. THIS WILL BREAK THE CORE CLASSES AND ANY OTHER CONTENT RELATED STYLES 
- USE TO ONLY PIZZAZZ THE IMAGES ACCORDING TO DESIGN
*/
:where(:is(.content, .editor-styles-wrapper) :where(img)) {
  border-radius: 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: 1.125rem;
  line-height: 1.6;
  font-family: var(--font-primary);
  color: var(--scheme-fg, var(--color-dark-alt));
}
/* 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: 1.5556em;
}
: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.6em;
}
: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: 0rem;
}
: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: 0.4444em;
}
:where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
.editor-styles-wrapper) :where(*.h2, h2) {
  margin-block-end: 0.8333em;
}
:where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
.editor-styles-wrapper) :where(*.h3, h3) {
  margin-block-end: 0.4em;
}
:where(.content:not(:is(.content-style-no-block-margins, .content-style-no-block-margins *)),
.editor-styles-wrapper) :where(*.blockquote, blockquote) {
  margin-block: 2.5rem;
}
: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: 0.625rem;
}
.content.content-size-small {
  font-size: 0.875rem;
}
.content.content-size-large {
  font-size: 1.125rem;
}
/* Content Weight Variations - For when the design needs a different weight for like 10 different sections
--------------------------------------------------------------- */
/* for content with thicker weight than usual. Less specific */
.content.content-weight-thick {
  font-weight: bolder;
}

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

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

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

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

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

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

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

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

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

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

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

/* Designs with fancy first letters. adjust styles as needed */
.content.content-style-drop-caps > p:first-of-type::first-letter {
  font-size: 2.75rem;
  font-family: var(--font-accent);
  color: var(--color-primary);
  float: inline-start;
  margin: 0 0.1em -0.25em 0;
}
.content.content-style-drop-caps > p:first-of-type + * {
  clear: inline-start;
}
/* Company introductions use the prose styles with a larger subsection gap. */
:is(.home-section-2, .about-section-1) .section-content h2 {
  margin-block: 2.8125rem 0.625rem;
}
:is(.home-section-2, .about-section-1) .section-content > :last-child {
  margin-block-end: 0;
}
@media only screen and (min-width: 112.5rem) {
  :is(.home-section-2, .about-section-1) .section-content p:nth-of-type(n + 2) {
    max-inline-size: 40rem;
  }
}

/* Content Callout
--------------------------------------------------------------- */
/* Comp: the tinted, accent-bordered box that tops the article. Same treatment the
accordion block uses, applied here through the theme's existing `fancy-box` helper
so an editor can add it to a Group block from Additional CSS Classes. */
.content .fancy-box {
  --fancy-box-background: #f2f6fd;
  --fancy-box-box-shadow: none;
  --fancy-box-border-radius: 10px;
}
.content .fancy-box {
  border: 1px solid var(--color-accent);
  border-radius: var(--fancy-box-border-radius);
  padding-block: 2rem;
  padding-inline: 1.625rem;
}
.content .fancy-box > :first-child {
  margin-block-start: 0;
}
.content .fancy-box > :last-child {
  margin-block-end: 0;
}

/* Homepage benefits use the design's dark body text. */
.home-section-5 .section-lead {
  color: var(--color-dark);
}

/* Homepage service descriptions retain the shared prose typography. */
.home-section-4 .section-content h3 {
  font-size: 1.5rem;
  line-height: 1.2;
  position: relative;
  color: var(--color-secondary-alt);
  text-transform: capitalize;
  margin-block: 2.5rem 0.625rem;
}
.home-section-4 .section-content h3:first-child {
  margin-block-start: 0;
}
.home-section-4 .section-content h3::before {
  content: "";
  position: absolute;
  inset-inline-end: calc(100% + 0.375rem);
  inset-block-start: 0;
  inline-size: 1.5rem;
  block-size: 1.375rem;
  background: url("images/home-services-check.svg") center/contain no-repeat;
}
.home-section-4 .section-content p {
  margin-block: 0;
}
.home-section-4 .section-content:last-child h3:not(:first-child) {
  margin-block-start: 2.8125rem;
}
@media only screen and (min-width: 48rem) {
  .home-section-4 .section-content h3 {
    margin-block-start: 2.8125rem;
  }
}

/* Homepage plan checklists and financing partner text. */
.home-section-6 .section-content {
  --plan-list-gap: 0.53642rem;
  --plan-check-size: 0.68272rem;
  --plan-check-gap: 0.29259rem;
  font-size: 1rem;
  line-height: 1.2;
  color: inherit;
  display: grid;
  gap: 0.5rem;
  inline-size: min(100%, 11.99636rem);
  margin-block: var(--section-plan-gap) 1.21914rem;
  text-align: start;
}
.home-section-6 .section-content ul {
  display: grid;
  align-content: start;
  gap: var(--plan-list-gap);
  list-style: none;
  padding: 0;
  margin: 0;
}
.home-section-6 .section-content li {
  margin: 0;
  padding-inline-start: calc(var(--plan-check-size) + var(--plan-check-gap));
  line-height: inherit;
  color: inherit;
}
.home-section-6 .section-content li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.22em;
  inline-size: var(--plan-check-size);
  aspect-ratio: 14/13;
  background: url("images/home-plans-check.svg") center/contain no-repeat;
}
.home-section-6 .section-block-palette-dark .section-content {
  inline-size: 100%;
  line-height: 1;
  margin-block-end: var(--section-plan-gap);
}
.home-section-6 .section-block-palette-dark .section-content li::before {
  inset-block-start: 0.18em;
}
.home-section-6 .section-block-partner {
  font-size: 0.7315rem;
  line-height: 1;
  color: inherit;
}
@media only screen and (min-width: 48rem) {
  .home-section-6 .section-content {
    grid-template-columns: 10.10031rem minmax(0, 1fr);
    column-gap: 2.63335rem;
    inline-size: calc(100% + 1.175rem);
    max-inline-size: none;
  }
  .home-section-6 .section-block-palette-dark .section-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.73131rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .home-section-6 .section-content {
    --plan-list-gap: 0.6875rem;
    --plan-check-size: 0.875rem;
    --plan-check-gap: 0.375rem;
    font-size: 1.125rem;
    grid-template-columns: 11.5rem minmax(0, 1fr);
    column-gap: 3.375rem;
    inline-size: 100%;
    margin-block-end: 1.5625rem;
  }
  .home-section-6 .section-block-palette-dark .section-content {
    column-gap: 0.9375rem;
  }
  .home-section-6 .section-block-partner {
    font-size: 0.9375rem;
  }
}

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

/* Helpers: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/helper.md
Note: Styles already prebuilt in this sass file must not be omitted
--------------------------------------------------------------- */
/* Clearfix stuff
--------------------------------------------------------------- */
.clearfix::after {
  content: "";
  font-size: 0;
  visibility: hidden;
  block-size: 0;
  clear: both;
  display: table;
  inline-size: 100%;
  flex: 0 0 auto;
}

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

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

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

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

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

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

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

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

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

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

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

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

@media only print {
  .print-only {
    display: block !important;
  }
  .print-hide {
    display: none !important;
  }
}
@media only screen and (min-width: 112.5rem) {
  .xl-only {
    display: block !important;
  }
  .xl-hide {
    display: none !important;
  }
}
@media only screen and (min-width: 87.5rem) and (max-width: 112.4375rem) {
  .lg-only {
    display: block !important;
  }
  .lg-hide {
    display: none !important;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .md-only {
    display: block !important;
  }
  .md-hide {
    display: none !important;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 74.9375rem) {
  .sm-only {
    display: block !important;
  }
  .sm-hide {
    display: none !important;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .xs-only {
    display: block !important;
  }
  .xs-hide {
    display: none !important;
  }
}
/* Add more helpers as needed */
/* color helpers
--------------------------------------------------------------- */
:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(: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);
}

/* Buttons: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/button.md#button
--------------------------------------------------------------- */
/* .button Skeletons. Do Not Edit */
.button {
  border: var(--button-border-width, 1px) solid;
  padding-inline: var(--button-padding-x, 1em);
  padding-block: calc(var(--button-padding-y, calc((var(--button-height, 4em) - var(--button-border-width, 2px) * 2 - 1em * var(--button-lines, 1) * var(--button-line-height, 1.25)) * 0.5)) - var(--button-border-width, 1px));
  line-height: var(--button-line-height, 1.5);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  max-inline-size: 100%;
  background: none;
  text-align: center;
  transition: all 0.125s ease-in-out;
  border-radius: var(--button-border-radius, 0px);
}
@media only print {
  .button {
    display: none !important;
  }
}
.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: 2px;
  /* border width. This will be accounted for in calculating the button height as well */
  --button-border-radius: 999em;
  /* button radius */
  --button-padding-x: 1.5em;
  /* horizontal padding */
  --button-padding-y: max(1em, 1rem);
  /* vertical padding */
  --button-line-height: 1;
  /* line height
  	* Usually there's no need to modify this unless a multiline button is present in the design and has a line height drastically different to what is set (currently 1.125).
  	* NOTE: this value has to be unitless for calc values to work.
  	* Formula is line-height-px / font-size-px 
  	* font-size 16px and line-height at 20px
  	* 20/16 = 1.25 (Note: Unitless value) */
  font-size: 1.125rem;
  line-height: var(--button-line-height);
  font-family: var(--font-accent);
  color: var(--color-primary);
  letter-spacing: 0em;
  text-transform: none;
  font-style: normal;
  font-weight: 800;
  text-decoration: none;
  min-inline-size: 12ch;
}
@media only screen and (min-width: 75rem) and (prefers-reduced-motion: no-preference) {
  .button {
    transition-duration: 0.22s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  .button:not(.swiper-button-prev, .swiper-button-next, .prev, .next):is(:hover, :focus-visible) {
    translate: 0 -2px;
  }
  .button:not(.swiper-button-prev, .swiper-button-next, .prev, .next):active {
    translate: 0 0;
  }
}
/* Buttons Sizing Helpers: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/button.md#button-size-name
--------------------------------------------------------------- */
/* button w/ a height even more smaller than the default height */
.button.button-size-micro {
  font-size: 0.75rem;
  --button-padding-y: 0.5em;
}
/* button w/ a height smaller than the default height */
.button.button-size-small {
  font-size: 1rem;
  --button-padding-y: 0.9375em;
  --button-padding-x: 1em;
}
/* 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: 1.125rem;
  --button-padding-y: 1em;
}
/* button w/ a height that's even larger for no reason than the larger height */
.button.button-size-larger {
  font-size: 1.25rem;
  --button-padding-y: 1.75em;
}
/* constricts the width equal to whatever size height is set*/
.button.button-size-equal {
  --button-padding-x: var(--button-padding-y);
  min-inline-size: 0;
  block-size: var(--button-height, calc(1em * var(--button-line-height) + 2em));
  inline-size: auto;
  aspect-ratio: 1/1;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Buttons Color Palette Helpers: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/button.md#button-palette-name
--------------------------------------------------------------- */
/* 
* Default - most frequent button palette in the comps
* Invert - reuses default's colors but palettes for hover vs not hover are reversed
* Outline - text w/ border influencing text color
* Minimal - no colors except for the text
Adjust as needed.
*/
.button.button-palette-default, .button.button-palette-reverse:is(:hover, :focus) {
  background-image: linear-gradient(to top, var(--color-primary-gradient-start) 0%, var(--color-primary-gradient-end) 100%);
  background-color: var(--color-primary);
  color: var(--color-dark-alt);
  border-color: transparent;
}
.button.button-palette-default:is(:hover, :focus), .button.button-palette-outline:is(:hover, :focus), .button.button-palette-reverse {
  background-image: none;
  background-color: var(--color-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(--scheme-sp, var(--color-primary));
  border-color: transparent;
}
.button.button-palette-outline {
  background-color: transparent;
  background-image: none;
  color: inherit;
  border-color: currentColor;
}
/*
primary palette. adjust or omit as needed
* Tip: if both a flat and gradient version of the palette exists in the design, adding the class .button-style-flat to this .button-palette-* class will disable the gradient
*/
/*
secondary palette. adjust or omit as needed
* Tip: if both a flat and gradient version of the palette exists in the design, adding the class .button-style-flat to this .button-palette-* class will disable the gradient
*/
/*
accent palette. adjust or omit as needed
* Tip: if both a flat and gradient version of the palette exists in the design, adding the class .button-style-flat to this .button-palette-* class will disable the gradient
*/
/* 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 */
#home-banner .button.button-style-special {
  --button-border-width: 0px;
  flex-wrap: nowrap;
}
.button.button-style-special {
  --button-special-disc-size: 2.3125rem;
  /* diameter of the arrow disc */
  --button-special-disc-inset: 0.4375rem;
  /* space between the disc and the pill edge */
  --button-special-arrow: url('images/reviews-button-arrow.svg');
  /* Shared 37px arrow disc from the primary button component. */
}
.button.button-style-special {
  /* the disc is the tallest item in the row, so the inset alone sets the height */
  --button-padding-y: var(--button-special-disc-inset);
  padding-inline: 1.25rem var(--button-special-disc-inset);
  gap: 0.5625rem;
}
.button.button-style-special::after {
  content: "";
  flex: 0 0 auto;
  align-self: center;
  inline-size: var(--button-special-disc-size);
  block-size: var(--button-special-disc-size);
  border-radius: 50%;
  background-color: var(--color-secondary-alt);
  background-image: var(--button-special-arrow);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: background-color 0.125s ease-in-out;
}
.button.button-style-special:is(:hover, :focus)::after {
  background-color: var(--color-primary);
  background-image: url("images/button-arrow-hover.svg");
}

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

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

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

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

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

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

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

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

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

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

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

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

/* Homepage review actions */
.home-section-3 .button {
  text-transform: capitalize;
}
.home-section-3 .button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 0.25rem;
}
.home-section-3 .button.button-palette-outline {
  --button-padding-x: 1.125rem;
  --button-padding-y: 1rem;
  background-color: var(--color-secondary);
  border-color: var(--color-primary);
}
.home-section-3 .button.button-palette-outline:is(:hover, :focus) {
  background-color: var(--color-secondary-alt);
}
.home-section-3 .button.button-style-slider {
  --button-height: 3.32581rem;
  --button-padding-x: 0rem;
  --button-padding-y: 0rem;
  min-inline-size: 0;
  inline-size: 3.32581rem;
  flex: 0 0 auto;
}
.home-section-3 .button.button-style-slider.prev img {
  transform: scaleX(-1);
}
@media only screen and (max-width: 47.9375rem) {
  .home-section-3 .button.button-palette-outline {
    --button-padding-x: clamp(0.375rem, 30vi - 5.625rem, 1.125rem);
    min-inline-size: 0;
  }
}

/* Homepage service-area and benefits actions. */
:is(.home-section-4, .home-section-5) .button {
  text-transform: capitalize;
}

.home-section-4 .button.button-style-slider {
  --button-height: 3.32581rem;
  --button-padding-x: 0rem;
  --button-padding-y: 0rem;
  min-inline-size: 0;
  inline-size: 3.32581rem;
}
.home-section-4 .button.button-style-slider.prev img {
  transform: scaleX(-1);
}
.home-section-4 .button.button-style-slider.swiper-button-lock {
  display: none;
}

.home-section-6 .button {
  text-transform: capitalize;
}

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

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

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

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

/* .group- universal helpers
--------------------------------------------------------------- */
/* .group-style-maxed - dont let stuff grow too wide or beyond available width */
.group-style-maxed:is(.group-frame) {
  /* if placed on group-frame, the frame will only grow based on max width of its contents available */
  max-inline-size: max-content;
  justify-self: center;
  margin-inline: auto;
}
.group-style-maxed:is(.group-module, :has(.group-frame > .group-module)),
.group-style-maxed .group-module {
  /* if child of group-frame or placed on group-module, the frame will only grow based on the group-frame's available width */
  max-inline-size: 100%;
}
@media only screen and (min-width: 22.5rem) and (max-width: 47.9375rem) {
  .group-style-maxed-xs:is(.group-frame) {
    max-inline-size: max-content;
    justify-self: center;
    margin-inline: auto;
  }
  .group-style-maxed-xs:is(.group-module, :has(.group-frame > .group-module)),
  .group-style-maxed-xs .group-module {
    max-inline-size: 100%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 74.9375rem) {
  .group-style-maxed-sm:is(.group-frame) {
    max-inline-size: max-content;
    justify-self: center;
    margin-inline: auto;
  }
  .group-style-maxed-sm:is(.group-module, :has(.group-frame > .group-module)),
  .group-style-maxed-sm .group-module {
    max-inline-size: 100%;
  }
}
@media only screen and (min-width: 75rem) {
  .group-style-maxed-nontouch:is(.group-frame) {
    max-inline-size: max-content;
    justify-self: center;
    margin-inline: auto;
  }
  .group-style-maxed-nontouch:is(.group-module, :has(.group-frame > .group-module)),
  .group-style-maxed-nontouch .group-module {
    max-inline-size: 100%;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .group-style-maxed-touch:is(.group-frame) {
    max-inline-size: 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;
}
@media only print {
  .container {
    --container-fallback: 1in !important;
    --container-gutter: var(--container-fallback) !important;
  }
}

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

/* Custom Container Size Variations: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/container.md#container-size-name
--------------------------------------------------------------- */
/* repeating/ internal page container sizing. sometimes designers will use the same gutter width for internals and or gridded template. this can be used so you dont have to copy paste identical styles to different selectos like 10 times */
.container.container-size-default {
  /* Measured off the comps' `content + Sidebar` frame, which is centred at every
  breakpoint: 30 / 86 / 60 / 120 / 328. Note this is intentionally non-monotonic,
  the 768 comp is inset further than the 1200 one. */
  --container-gutter: 1.875rem;
}
@media only screen and (min-width: 48rem) {
  .container.container-size-default {
    --container-gutter: 5.375rem;
  }
}
@media only screen and (min-width: 75rem) {
  .container.container-size-default {
    --container-gutter: 3.75rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .container.container-size-default {
    --container-gutter: 7.5rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .container.container-size-default {
    --container-gutter: 20.5rem;
  }
}

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

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

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

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

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

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

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

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

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

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

/* Fancy Icons: /* https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/fancy.md#fancy-icon
--------------------------------------------------------------- */
.fancy-icon-menu {
  position: relative;
  --fancy-icon-menu-width: 2rem;
  --fancy-icon-menu-height: 1rem;
  --fancy-icon-menu-bar-height: 2px;
  --fancy-icon-menu-bar-top-width: 100%;
  --fancy-icon-menu-bar-top-margin-l: auto;
  --fancy-icon-menu-bar-top-margin-r: auto;
  --fancy-icon-menu-bar-center-width: 100%;
  --fancy-icon-menu-bar-center-margin-l: auto;
  --fancy-icon-menu-bar-center-margin-r: auto;
  --fancy-icon-menu-bar-bottom-width: 100%;
  --fancy-icon-menu-bar-bottom-margin-l: auto;
  --fancy-icon-menu-bar-bottom-margin-r: auto;
  inline-size: var(--fancy-icon-menu-width);
  block-size: var(--fancy-icon-menu-height);
}
.fancy-icon-menu span {
  position: absolute;
  transform-origin: center center;
  background: currentColor;
  inset: 0;
  block-size: var(--fancy-icon-menu-bar-height);
  inline-size: 100%;
  transition-duration: 0.375s;
  transition-timing-function: ease-in-out;
  transition-property: top, bottom, left, right, transform, inline-size;
}
.fancy-icon-menu span:where(:first-child) {
  inset-block-end: auto;
  inline-size: var(--fancy-icon-menu-bar-top-width);
  margin: auto var(--fancy-icon-menu-bar-top-margin-r) auto var(--fancy-icon-menu-bar-top-margin-l);
}
.fancy-icon-menu span:where(:last-child) {
  inset-block-start: auto;
  inline-size: var(--fancy-icon-menu-bar-bottom-width);
  margin: auto var(--fancy-icon-menu-bar-bottom-margin-r) auto var(--fancy-icon-menu-bar-bottom-margin-l);
}
.fancy-icon-menu span:where(:nth-child(2), :nth-child(3)) {
  inline-size: var(--fancy-icon-menu-bar-center-width);
  margin: auto var(--fancy-icon-menu-bar-center-margin-r) auto var(--fancy-icon-menu-bar-center-margin-l);
}
.open .fancy-icon-menu span {
  margin: auto;
}
.open .fancy-icon-menu span:nth-child(2) {
  transform: rotateZ(45deg);
}
.open .fancy-icon-menu span:nth-child(3) {
  transform: rotateZ(-45deg);
}
.open .fancy-icon-menu span:is(:nth-child(2), :nth-child(3)) {
  inline-size: 100%;
}
.open .fancy-icon-menu span:is(:first-child, :last-child) {
  inline-size: 0;
}
/* fancy boxes that is just boxed. rehash or rebuild as needed
--------------------------------------------------------------- */
/* @VersionA: version w/ backdrop. this version does not rely on variables to customize padding. simplest setup */
.fancy-box {
  --fancy-box-background: var(--scheme-bg, var(--color-light));
  --fancy-box-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.15);
  --fancy-box-pseudo-background: var(--color-light-alt);
  --fancy-box-pseudo-offset: 1.25rem;
  --fancy-box-pseudo-offset-x: var(--fancy-box-pseudo-offset);
  --fancy-box-pseudo-offset-bottom: var(--fancy-box-pseudo-offset);
  --fancy-box-pseudo-offset-top: var(--fancy-box-pseudo-offset-bottom);
  --fancy-box-border-radius: 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
--------------------------------------------------------------- */
/* Forms https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/helper/form.md
For Gravity Forms specific styles go to scss/vendors/gforms
-------------------------------------------------------------------------------- */
.field-form {
  max-inline-size: 100%;
}
.field-form:where(.group-frame) {
  gap: 3rem;
}
.field-form:where(.group-frame) :where(.gform_wrapper, .gform_body, form) {
  display: contents;
}
.field-form :where(.gform_wrapper) :is(.gform_title,
.gform_description,
.gform_footer,
.gform_page_footer,
.gform_body) {
  margin: 0;
  padding: 0;
}
.field-form :where(.gform_wrapper) .gform_heading {
  /* gform heading: gforms generated or template custom ones */
}
.field-form :where(.gform_wrapper) .gform_heading:where(:not(.group-frame *)) {
  margin-block-end: 2rem;
}
.field-form :where(.gform_wrapper) .gform_heading:where(.group-frame) {
  gap: 0.25rem;
}
.field-form :where(.gform_wrapper) :where(.gform_heading, .gform_title, .gform_description) {
  /* everything inside the heading: gforms generated or template custom ones */
  /* center the heading stuff. or adjust as needed if that's not the case */
  margin-inline: auto;
}
.field-form :is(.gform_wrapper) :is(.gform_title, .gform_description):last-child {
  margin-block-end: 0;
}
.field-form :is(.gform_wrapper) .gform_body {
  /* body: gforms generated or template custom ones */
}
.field-form :is(.gform_wrapper) :is(.gform_footer, .gform_page_footer) {
  /* footer: gforms generated or template custom ones */
}
.field-form :is(.gform_wrapper) :is(.gform_footer, .gform_page_footer) {
  /* reset margin and padding and add  one margin to keep spacing simple to setup. Gravity forms man. */
  padding: 0;
  margin: 0;
}
.field-form :is(.gform_wrapper) :is(.gform_footer, .gform_page_footer):where(:not(.group-frame *)) {
  margin-block-start: 2rem;
}
.field-form :is(.gform_wrapper) :is(.gform_footer, .gform_page_footer) :is(.gform_button, .button) {
  /* that goes for the button too */
  margin-block-end: 0;
  margin-block-start: 0;
}
.field-form :is(.gform_wrapper) :is(.gform_footer, .gform_page_footer):not(:has(.gform_button)) {
  display: none;
}
.field-form-body :is(.gform_wrapper) .gform_heading {
  /* in case gravity forms decides to add more ugly things */
  display: none;
}

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

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

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

/* The homepage plan photos are the existing artboard-specific gallery crops. */
.home-section-6 .responsive-background {
  --responsive-background-overlay-opacity: 1;
  --responsive-background-overlay-mix-blend: multiply;
  --responsive-background-overlay-background: linear-gradient(var(--plan-overlay-angle, 133.707deg), rgba(11, 46, 70, 0.7) 24.852%, rgba(11, 46, 70, 0) 50.586%), linear-gradient(rgba(0, 14, 29, 0.15), rgba(0, 14, 29, 0.15));
}
@media only screen and (min-width: 48rem) {
  .home-section-6 .responsive-background {
    --plan-overlay-angle: 151.55deg;
  }
}
@media only screen and (min-width: 75rem) {
  .home-section-6 .responsive-background {
    --plan-overlay-angle: 163.056deg;
  }
}
@media only screen and (min-width: 87.5rem) {
  .home-section-6 .responsive-background {
    --plan-overlay-angle: 165.2deg;
  }
}
@media only screen and (min-width: 112.5rem) {
  .home-section-6 .responsive-background {
    --plan-overlay-angle: 163.297deg;
  }
}

/* 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
--------------------------------------------------------------- */
#home-banner .banner-rep .carousel-item-image {
  overflow: hidden;
}
#home-banner .banner-rep .carousel-item-image :where(img, svg, object, picture) {
  inline-size: 100% !important;
  max-block-size: none !important;
}

.home-section-2 .awards-item:nth-child(6) .carousel-item-image {
  inline-size: 7.5rem;
  overflow: hidden;
}
.home-section-2 .awards-item:nth-child(6) .carousel-item-image :where(img, svg, object, picture) {
  inline-size: 100% !important;
  max-block-size: none !important;
}

:where(.swiper, .slick) {
  /* height of award. best to set to the tallest award logo provided  */
  --carousel-height: 7.5rem;
}
/* Coupons https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/repeater/coupon.md
-------------------------------------------------------------------------------- */
/* Coupon Card
-------------------------------------------------------------------------------- */
/* Comp: a dark card with a dashed, gradient rule set in from its edge. */
.coupon {
  --coupon-inset: 0.625rem;
  --coupon-dash-length: 4px;
}
.coupon {
  background-color: var(--color-secondary);
  background-image: linear-gradient(to bottom, var(--color-secondary-gradient-start) 0%, var(--color-secondary-gradient-end) 100%);
  border-radius: 5px;
  padding: var(--coupon-inset);
  margin: 0;
}

/* Coupon Container - the dashed rule
-------------------------------------------------------------------------------- */
.coupon-container {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.625rem;
  block-size: 100%;
  border-radius: 5px;
  padding-block: 2.5rem;
  padding-inline: 1.25rem;
  text-align: center;
}
.coupon-container {
  /* a dashed border cannot carry a gradient, so the gradient is masked down to
  dashes on each edge instead */
}
.coupon-container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(to right, var(--color-accent-gradient-start), var(--color-accent-gradient-end));
  mask-image: repeating-linear-gradient(to right, #000 0 var(--coupon-dash-length), rgba(0, 0, 0, 0) var(--coupon-dash-length) calc(var(--coupon-dash-length) * 2)), repeating-linear-gradient(to right, #000 0 var(--coupon-dash-length), rgba(0, 0, 0, 0) var(--coupon-dash-length) calc(var(--coupon-dash-length) * 2)), repeating-linear-gradient(to bottom, #000 0 var(--coupon-dash-length), rgba(0, 0, 0, 0) var(--coupon-dash-length) calc(var(--coupon-dash-length) * 2)), repeating-linear-gradient(to bottom, #000 0 var(--coupon-dash-length), rgba(0, 0, 0, 0) var(--coupon-dash-length) calc(var(--coupon-dash-length) * 2));
  mask-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
  mask-position: left top, left bottom, left top, right top;
  mask-repeat: no-repeat;
  pointer-events: none;
}

/* Coupon Title - the offer
-------------------------------------------------------------------------------- */
.coupon-title {
  font-size: 2.1875rem;
  line-height: 1.2;
  font-family: var(--font-primary);
  color: var(--color-light);
  text-transform: uppercase;
  font-weight: 800;
  margin-block: 0;
}
@media only screen and (min-width: 48rem) {
  .coupon-title {
    font-size: 2.8125rem;
  }
}

/* Coupon Type - what the offer applies to
-------------------------------------------------------------------------------- */
.coupon-type {
  font-size: 1.125rem;
  line-height: 1.35;
  font-family: var(--font-secondary);
  color: var(--color-light-alt);
  text-transform: uppercase;
  font-weight: 400;
  margin-block: 0;
}

/* Coupon Description
-------------------------------------------------------------------------------- */
.coupon-description {
  font-size: 1rem;
  line-height: 1.35;
  color: var(--color-light);
  margin-block-start: -0.3125rem;
}

/* Coupon CTA
-------------------------------------------------------------------------------- */
.coupon-cta {
  margin-block-start: 0.4375rem;
}

/* Coupon Expiration / Disclaimer - not drawn in the comp, kept legible on the card
-------------------------------------------------------------------------------- */
.coupon-expiration,
.coupon-disclaimer {
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--color-light-alt);
  margin-block: 0;
}

/* Homepage coupons share the card component with a decorative mascot. */
.home-section-4 .coupon {
  --coupon-inset: 0.548rem;
  position: relative;
  min-block-size: 22.25rem;
  background-image: linear-gradient(to top, var(--color-secondary-gradient-start), var(--color-secondary-gradient-end) 91.916%);
}
.home-section-4 .coupon-mascot {
  display: block;
  position: absolute;
  z-index: 1;
  inset-inline-start: 50%;
  inset-block-start: -3.375rem;
  inline-size: 5.72932rem;
  transform: translateX(-50%);
}
.home-section-4 .coupon-mascot img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.home-section-4 .coupon-container {
  gap: 0;
  padding: 3.95rem 0.375rem 3.4rem;
}
.home-section-4 .coupon-title {
  font-size: 2.8125rem;
  margin-block-end: 0.6975rem;
}
.home-section-4 .coupon-type {
  font-size: 1rem;
  letter-spacing: 0.05em;
  max-inline-size: 16.19155rem;
  margin-block-end: 0.548rem;
}
.home-section-4 .coupon-description {
  font-size: 0.75rem;
  max-inline-size: 14.49766rem;
  margin: 0;
}
.home-section-4 .coupon-cta {
  margin-block-start: 1.54444rem;
}
@media only screen and (min-width: 112.5rem) {
  .home-section-4 .coupon {
    --coupon-inset: 0.6875rem;
    min-block-size: 27.9375rem;
  }
  .home-section-4 .coupon-mascot {
    inline-size: 7.1875rem;
    inset-block-start: -4.1875rem;
  }
  .home-section-4 .coupon-container {
    padding-block: 4.96875rem;
  }
  .home-section-4 .coupon-title {
    font-size: 3.75rem;
    margin-block-end: 0.875rem;
  }
  .home-section-4 .coupon-type {
    font-size: 1.125rem;
    max-inline-size: 20.3125rem;
    margin-block-end: 0.6875rem;
  }
  .home-section-4 .coupon-description {
    font-size: 1rem;
    max-inline-size: 18.1875rem;
  }
  .home-section-4 .coupon-cta {
    margin-block-start: 1.9375rem;
  }
}

/* List: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/list.md#list
* This include tends to be multipurpose ie accordion, fake widgets, listed contents, etc.
--------------------------------------------------------------- */
/* Universal styles */
/* Styles when an accordion. NOTE: blocks plugin may still conflict, use important for now if needed */
.list:has(.accordion) {
  inline-size: 60rem;
  max-inline-size: 100%;
  margin-inline: auto;
  border-block-end: 1px solid var(--color-neutral);
  padding-block-end: 2rem;
  margin-block-end: 2rem;
}
/* Styles when an column */
/* add other variations as needed */
/* Menu Directories https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/repeater/menudir.md
-------------------------------------------------------------------------------- */
/*
* Menu Directory Skeleton. Do not Edit
-------------------------------------------------------------------------------- */
.menudir-title {
  padding-inline: var(--pa-title-padding-x);
}
.menudir-title:is(.fancy-border-after):after, .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;
  padding-block: calc(var(--pa-item-padding-y, calc((var(--pa-item-height, 3em) - var(--pa-item-border-width, 1px) * 2 - 1em * var(--pa-item-lines, 2) * var(--pa-item-line-height, 1.25)) * 0.5)) - var(--pa-item-border-width, 1px) * 0.5);
  padding-inline: var(--pa-item-padding-x);
  min-block-size: var(--pa-item-height);
}
.menudir-menu li a:is([href="#"]) {
  pointer-events: none;
}
@media only screen and (max-width: 47.9375rem) {
  .menudir-menu li a {
    min-block-size: 0;
  }
}

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

/*
* Menu Directory Category Title
-------------------------------------------------------------------------------- */
.menudir-title {
  margin-block-end: 2rem;
}
/*
* Menu Directory Menu
-------------------------------------------------------------------------------- */
.menudir-menu a {
  text-decoration: none;
}
.menudir-menu li:is(:hover, :focus-within) a:not([href="#"]) {
  color: var(--color-primary);
}
.menudir-menu:where(.columns) li {
  border-block-start: 1px solid var(--color-neutral);
}
.menudir-menu:where(.columns) li:nth-child(-n+1) {
  border-block-start: 0;
}
/*
* includes/repeater-menudir
-------------------------------------------------------------------------------- */
.menudir {
  max-inline-size: 100%;
}
.menudir, .menudir-container {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
}
.menudir-container {
  inline-size: 100%;
  flex: 1 1;
}
/* Testimonial https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/repeater/testimonial.md
-------------------------------------------------------------------------------- */
/*
* Testimonial Stars
-------------------------------------------------------------------------------- */
.testimonial-stars {
  font-size: 2rem;
}
/*
* Testimonial Highlight / Main quote
-------------------------------------------------------------------------------- */
.testimonial-highlight {
  text-align: inherit;
  max-inline-size: none;
  margin-inline: 0;
}
/*
* Testimonial Quote Body / other parts of the quote
-------------------------------------------------------------------------------- */
/*
* Testimonial Divider - Optional
-------------------------------------------------------------------------------- */
.testimonial-divider {
  --fancy-border-margin-y: 0em;
}
/*
* Testimonial Source + Optional Icon
-------------------------------------------------------------------------------- */
.testimonial-source span:nth-last-child(n+2)::after {
  content: "\25CF\FE0E";
  color: var(--color-primary);
  letter-spacing: 0em;
  margin-inline: 0.25em;
}
.testimonial-source.testimonial-source-has-first-letter::before {
  content: attr(data-first-letter);
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  inline-size: 1.75em;
  block-size: 1.75em;
  border-radius: 999em;
  background: var(--scheme-sp, var(--color-primary));
  font-size: 1.125rem;
  font-family: var(--font-accent);
  color: var(--color-light);
  text-transform: uppercase;
}
:where(.scheme-palette-dark,
.scheme-palette-dark-on-hover:is(: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;
}
/* Review text stays clear at the top until it is scrolled. */
.testimonial .clamp-text-scroll {
  --testimonial-fade-top: 0px;
  --testimonial-fade-bottom: calc(var(--clamp-text-mask-height, 1.5em) * 1.5);
  mask-image: none;
}
.testimonial .clamp-text-scroll.is-scrollable {
  mask-image: linear-gradient(to bottom, transparent 0%, black var(--testimonial-fade-top), black calc(100% - var(--testimonial-fade-bottom)), transparent 100%);
}
.testimonial .clamp-text-scroll.is-scrolled {
  --testimonial-fade-top: calc(var(--clamp-text-mask-height, 1.5em) * 0.5);
}
.testimonial .clamp-text-scroll.is-scroll-end {
  --testimonial-fade-bottom: 0px;
}

/* Homepage review cards */
.home-section-3 .testimonial {
  min-block-size: 23.75rem;
  padding: 2.9375rem 1.1875rem 3.1875rem;
  border: 1px solid var(--color-primary);
  border-radius: 0.3125rem;
  background: linear-gradient(to top, var(--color-secondary-gradient-start), var(--color-secondary-gradient-end) 91.916%);
  text-align: center;
}
.home-section-3 .testimonial-container {
  gap: 1.8125rem;
  align-items: center;
}
.home-section-3 .testimonial-stars {
  font-size: 1.25rem;
  line-height: 1;
}
.home-section-3 .testimonial-highlight, .home-section-3 .testimonial-quote {
  font-size: 1.125rem;
  line-height: 1.444444;
  font-weight: 400;
  margin: 0;
}
.home-section-3 .testimonial-source {
  font-size: 1rem;
  line-height: 1.25;
  color: var(--color-primary);
  font-weight: 800;
  margin: 0;
}
@media only screen and (min-width: 48rem) {
  .home-section-3 .testimonial {
    padding-inline: 2.9375rem;
  }
}

/* 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);
}
/* Layout Header https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/layout/header.md
Note: The styles will be setup mobile first starting with the smallest device comp where the header menu toggle is no longer visible  (usually initially at md/laptop)
And then Desktop first starting with the largest device comp where the the header toggle is visible (Usually sm/tablet)
Tip: setting up mobile navigation desktop-first starting at sm-max for touch screen styles, and then mobile-first starting at md for desktop styles helps simplify the styles and lessen the need for overrides.
Also Tip: Default styles are set based on its sticky state, and then overriding these styles when no scroll has happened yet (.doc-header-not-sticky). This is to keep styles less repetitive and as simple as possible
--------------------------------------------------------------- */
/* Layout Header Variables
--------------------------------------------------------------- */
/* Tip: placing the css var on :root can allow elements outside of the layout header utilize the variable if needed ie sticky stuff, offsets, jump link scroll etc. */
:root {
  --layout-header-height: 7.375rem;
  /* 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-rule-size: 3px;
  /* thickness of the accent rule under the header */
  --layout-header-logo-height: 8.125rem;
  /* 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 (min-width: 112.5rem) {
  :root {
    --layout-header-logo-height: 8.1875rem;
  }
}
@media only screen and (max-width: 74.9375rem) {
  :root {
    /* Touch Devices Header Styles Start */
    --layout-header-height: 5.3125rem;
    --layout-header-logo-height: 5.75rem;
    /* 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: 11rem;
    --layout-header-logo-height: 6.9375rem;
    /* 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-alt));
  transition: 0.25s top ease-in-out;
  box-shadow: inset 0 calc(var(--layout-header-rule-size) * -1) 0 0 var(--color-accent), 0 0 10px -5px rgba(0, 0, 0, 0.8);
}
.layout-header-container {
  --container-gutter: 1rem;
}
@media only screen and (min-width: 75rem) {
  .layout-header {
    /* Non-touch Devices Header Styles Start */
  }
  .layout-header-container {
    --container-gutter: 2.1875rem;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .layout-header {
    /* Touch Devices Header Styles Start */
  }
  .layout-header-container {
    --container-gutter: 1rem;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .layout-header {
    /* logo sits on white, contact sits on the dark band, accent rule between them */
    --layout-header-rule-size: 0px;
    background-color: transparent;
    background-image: linear-gradient(to bottom, var(--color-light) 0 var(--layout-header-logo-height), var(--color-accent) var(--layout-header-logo-height) calc(var(--layout-header-logo-height) + 3px), var(--color-dark-alt) calc(var(--layout-header-logo-height) + 3px) 100%);
  }
  .layout-header-container {
    --container-gutter: 1.375rem;
  }
}
.doc-header-not-sticky .header-can-overlap .layout-header {
  /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices. NOTE: You can modify where overlay styles can appear by modifying the functions body header classes */
}
@media only screen and (min-width: 75rem) {
  .doc-header-not-sticky .header-can-overlap .layout-header {
    /* remove background */
    background: transparent;
    /* remove dropdown shadow on all devices when not scrolling yet */
    box-shadow: none;
  }
}
@media only screen and (max-width: 74.9375rem) {
  :not(.doc-header-menu-open).doc-header-not-sticky .header-can-overlap .layout-header {
    /* Touch Devices Header Styles Start */
  }
}
.doc-header-not-sticky .layout-header {
  /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */
}
@media only screen and (max-width: 47.9375rem) {
  .doc-header-not-sticky .layout-header {
    /* reset offset when no scrolling yet */
    --layout-header-offset: 0;
  }
}
.doc-header-menu-open .layout-header {
  /* Styles/Selectors for when header menu accordion for touch devices is open */
}
.header-can-overlap .layout-header {
  /* Overlay header on header-can-overlap. best for setting position on large devices AND NOTHING ELSE */
}
/* Header Blocks - How elements will be layed out in the header
--------------------------------------------------------------- */
:where(.header-block, .header-blocks) {
  /* uncomment if flex/grid is causing any issues*/
  min-inline-size: 0;
}

.header-blocks {
  justify-content: center;
  align-items: center;
  column-gap: var(--container-gutter);
  row-gap: 0rem;
  inline-size: auto;
  block-size: var(--layout-header-height);
}
.header-block:is(.header-logo) {
  grid-area: logo;
  justify-self: self-start;
  block-size: var(--layout-header-logo-height);
}
.header-block:is(.header-nav) {
  grid-area: nav;
}
.header-block:is(.header-cta) {
  grid-area: cta;
}
.header-block:is(.header-toggle-menu) {
  grid-area: toggle-menu;
  align-self: stretch;
}
@media only screen and (min-width: 75rem) {
  .header-block {
    /* Non-touch Devices Header Styles Start */
  }
  .header-blocks {
    row-gap: 0;
    grid-template-columns: auto 1fr;
    grid-template-rows: max-content max-content;
    grid-template-areas: "logo cta" "logo nav";
  }
  .header-block:is(.header-logo) {
    align-self: start;
    margin-block-end: min(0px, (var(--layout-header-logo-height) - var(--layout-header-height)) * -1);
  }
  .header-block:is(.header-nav) {
    justify-self: self-end;
    align-self: self-end;
  }
  .header-block:is(.header-cta) {
    justify-self: self-end;
    align-self: self-end;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .header-block {
    /* Touch Devices Header Styles Start */
  }
  .header-blocks {
    align-items: center;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo cta toggle-menu";
  }
  .header-block:is(.header-cta) {
    justify-self: self-end;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .header-blocks {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    grid-template-areas: "logo logo" "cta toggle-menu";
    column-gap: 0;
  }
  .header-block:is(.header-logo) {
    justify-self: stretch;
  }
  .header-block:is(.header-cta) {
    justify-self: stretch;
    align-self: stretch;
  }
}
.doc-header-not-sticky .header-can-overlap .header-block {
  /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices. NOTE: You can modify where overlay styles can appear by modifying the functions body header classes */
}
@media only screen and (min-width: 75rem) {
  .doc-header-not-sticky .header-can-overlap .header-blocks {
    block-size: var(--layout-header-height-before-sticky);
  }
}
@media only screen and (min-width: 75rem) and (max-width: 112.4375rem) {
  .doc-header-not-sticky .header-can-overlap .header-block:is(.header-nav) {
    align-self: 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: 1rem;
  flex: 0 0 auto;
  /* support logo offseting on overlay banner + not sticky state. comment if not needed */
  position: relative;
}
.header-logo .logo-wrapper-br, .header-logo .logo-wrapper-before-sticky {
  /* hide possible variations of logo */
  display: none;
}
.header-logo {
  /* the mark fills the reserved logo height so it can hang past the bar */
  align-items: flex-end;
}
.header-logo .logo-wrapper,
.header-logo .logo-image,
.header-logo img {
  display: block;
  block-size: 100%;
  inline-size: auto;
  max-inline-size: 100%;
}
.header-logo img {
  object-fit: contain;
  object-position: left bottom;
}
@media only screen and (min-width: 75rem) {
  .header-logo {
    padding-block: 1.375rem 0;
    /* Non-touch Devices Header Styles Start */
    margin-inline-start: calc(var(--container-gutter, 0px) * -1);
    padding-inline: var(--container-gutter, 1.5rem);
  }
}
@media only screen and (max-width: 74.9375rem) {
  .header-logo {
    /* Touch Devices Header Styles Start */
    padding-block: 1.1875rem 0;
    z-index: 10000;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .header-logo {
    padding-block: 0.8125rem;
    max-inline-size: 100%;
    inline-size: 100%;
  }
  .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: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex: 0 0 auto;
  padding: 0;
}
@media only screen and (min-width: 75rem) {
  .header-toggle {
    /* Non-touch Devices Header Styles Start */
  }
}
@media only screen and (max-width: 74.9375rem) {
  .header-toggle {
    /* Touch Devices Header Styles Start */
  }
}
.doc-header-not-sticky .header-can-overlap .header-toggle {
  /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices. NOTE: You can modify where overlay styles can appear by modifying the functions body header classes */
}
@media only screen and (max-width: 74.9375rem) {
  :not(.doc-header-menu-open).doc-header-not-sticky .header-can-overlap .header-toggle {
    /* Touch Devices Header Styles Start */
  }
}
.doc-header-not-sticky .header-toggle {
  /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */
}
@media only screen and (max-width: 74.9375rem) {
  .doc-header-not-sticky .header-toggle {
    /* Touch Devices Header Styles Start */
  }
}
.doc-header-menu-open .header-toggle {
  /* Styles/Selectors for when header menu accordion for touch devices is open */
}
@media only screen and (max-width: 74.9375rem) {
  .doc-header-menu-open .header-toggle {
    /* Touch Devices Header Styles Start */
  }
}
.doc-header-menu-open.doc-header-not-sticky .header-toggle {
  /* Styles/Selectors for when header menu accordion for touch devices is open and header is not sticky yet */
}
@media only screen and (max-width: 74.9375rem) {
  .doc-header-menu-open.doc-header-not-sticky .header-toggle {
    /* Touch Devices Header Styles Start */
  }
}
/* Header Toggle - Menu
--------------------------------------------------------------- */
.header-toggle-menu {
  --layout-header-menu-toggle-open-offset: 0rem;
  background: none;
  color: var(--color-secondary);
  position: relative;
  z-index: 99999;
  inset-block-start: 0;
  transition: 0.375s all ease-in-out;
  order: 99;
}
.header-toggle-menu.open {
  color: var(--color-secondary);
  inset-block-start: var(--layout-header-menu-toggle-open-offset);
}
.header-toggle-menu-icon {
  --fancy-icon-menu-width: 1.875rem;
  --fancy-icon-menu-height: 1.1875rem;
  --fancy-icon-menu-bar-height: 3px;
}
.header-toggle-menu.open .header-toggle-menu-icon {
  color: inherit;
}
.header-toggle-menu-label {
  display: none;
}
@media only screen and (max-width: 47.9375rem) {
  .header-toggle-menu, .header-toggle-menu.open {
    color: var(--color-light);
  }
}

/* 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: 0.3125rem;
  }
}
@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 */
    /* eyebrow stacks over the phone, button sits alongside them */
    display: grid;
    grid-template-columns: max-content max-content;
    grid-template-areas: "text button" "phone button";
    justify-content: flex-end;
    align-items: center;
    column-gap: 2.125rem;
    row-gap: 0.25rem;
    text-align: center;
  }
  .header-cta .header-cta-text {
    grid-area: text;
  }
  .header-cta .header-numbers {
    grid-area: phone;
  }
  .header-cta .header-cta-button {
    grid-area: button;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .header-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1;
    padding-inline: 0;
    /* comp drops the button on mobile, the phone carries the cta */
  }
  .header-cta .header-cta-button {
    display: none;
  }
}
.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 {
  font-size: 1rem;
  line-height: 1;
  font-family: var(--font-accent);
  color: var(--color-secondary-alt);
  text-transform: none;
  font-weight: 700;
}
.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 */
    font-size: 0.875rem;
    line-height: 1;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .header-cta-text {
    font-size: 0.875rem;
    line-height: 1;
    color: var(--color-primary);
  }
}
.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: 1.875rem;
  line-height: 1;
  font-family: var(--font-secondary);
  color: var(--color-secondary);
  font-weight: 400;
}
@media only screen and (min-width: 75rem) {
  .header-numbers {
    /* Non-touch Devices Header Styles Start */
  }
}
@media only screen and (max-width: 74.9375rem) {
  .header-numbers {
    /* Touch Devices Header Styles Start */
  }
  .header-numbers .number-link {
    font-size: 1.5rem;
    line-height: 1;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .header-numbers .number-link {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-light);
  }
}
.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-x: hidden;
    overflow-y: auto;
    background: var(--color-light);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    opacity: 0;
    z-index: 9999;
    scrollbar-width: none;
    position: fixed;
    inset-block-end: 0;
    inset-inline-start: 100%;
    inset-block-start: var(--layout-header-menu-touch-offset);
    box-shadow: inset 0 5px 10px -5px rgba(0, 0, 0, 0.8);
  }
  .header-nav::-webkit-scrollbar {
    display: none;
  }
}
.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: 1rem;
  line-height: 1;
  font-family: var(--font-accent);
  color: var(--color-dark-alt);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 800;
}
.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;
  /* keep the label and its dropdown caret on one line */
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  transition: 0.125s ease-in-out all;
  gap: 0.1875em;
  flex: 1 0;
  text-decoration: none;
  /* comment out if borders are not desired */
  border-block-end: 1px solid var(--color-neutral);
  justify-content: flex-start;
}
.header-nav .menu li:last-child, .header-nav .menu li:last-child > a {
  /* disable border for last items */
  border: none;
}
.header-nav .menu li:is(.menu-item-has-children) > a::after {
  display: inline-block;
  align-self: center;
  flex: 0 0 auto;
  content: "";
  block-size: 0.625em;
  inline-size: 1em;
  vertical-align: middle;
  background: var(--color-primary);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  transform-origin: center center;
}
.header-nav .menu ul {
  background-color: var(--color-light);
  color: var(--color-dark);
}
.header-nav .menu ul:is(.menu-item-has-children) > a::after {
  color: inherit;
}
@media only screen and (min-width: 75rem) {
  .header-nav .menu {
    gap: 1.875em;
    display: flex;
    justify-content: flex-end;
    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-accent));
  }
  .header-nav .menu ul {
    inline-size: clamp(14.375rem, 18vi, 20.3125rem);
    inset-block-start: 0;
    inset-inline-start: 100%;
    /* Take dropdowns out of doc flow + setup for hover/focus effects */
    position: absolute;
    box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.8);
    z-index: 1;
    /* additional border styles + align to current item indicator. comment out if not needed */
    border-block-start: var(--layout-header-menu-nontouch-current-height) solid var(--color-accent);
    margin-block-start: calc(var(--layout-header-menu-nontouch-current-height) * -1);
  }
  .header-nav .menu ul li:is(.menu-item-has-children) > a::after {
    transform: rotate(180deg);
    color: inherit;
  }
  .header-nav .menu > li {
    flex-direction: row;
    padding-inline: 0;
  }
  .header-nav .menu > li > a {
    padding-block: 0 1.4375rem;
    padding-inline: 0;
    border: none;
  }
  .header-nav .menu > li::before {
    /* current menu item indicator */
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    margin: 0 auto;
    transition: 0.125s ease-in-out inline-size;
    inline-size: 0;
    block-size: var(--layout-header-menu-nontouch-current-height);
    background: var(--color-accent);
  }
  .header-nav .menu > li:is(:hover, :focus, :focus-within, .menu-item-special .open), .header-nav .menu > li:is(:hover, :focus, :focus-within, .menu-item-special .open) > a {
    /* undo fanciness from non-media query scaffolding for top level menu item and its child a tag */
    border: none;
    background: none;
    color: inherit;
    margin: 0;
  }
  .header-nav .menu > li:is(:hover, :focus, :focus-within, .menu-item-special .open)::before {
    /* current menu item indicator if active */
  }
  .header-nav .menu > li:is(.current-menu-item, .current-menu-ancestor)::before {
    /* current menu item indicator if active */
  }
  .header-nav .menu > li:is(.current-menu-item,
  .current-menu-ancestor,
  :hover,
  :focus,
  :focus-within)::before {
    /* current menu item indicator if active */
    inline-size: 100%;
  }
  .header-nav .menu > li:is(.menu-item-has-children) > a::after {
    color: var(--color-primary);
  }
  .header-nav .menu > li.menu-item-special {
    --layout-header-nav-special-sub-width: 20.3125em;
    --layout-header-nav-special-padding-y: 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 > ul > li:is(:last-child, :nth-last-child(2):nth-child(odd)) > a {
    border-block-end: 0;
  }
  .header-nav .menu > li.menu-item-special:nth-last-child(-n+2) > ul {
    left: auto;
    right: 0;
    transform: none;
  }
  .header-nav .menu > li.menu-item-special > ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-content: start;
    column-gap: var(--layout-header-menu-nontouch-dropdown-padding-x);
    padding-inline: var(--layout-header-menu-nontouch-dropdown-padding-x) calc(var(--layout-header-menu-nontouch-dropdown-padding-x) + var(--layout-header-nav-special-sub-width));
    inline-size: min(80vi, 68rem);
    max-inline-size: calc(100vi - var(--container-gutter) * 2);
    max-block-size: calc(90vb - var(--layout-header-height));
    min-block-size: min(44rem, 75vb - var(--layout-header-height));
  }
  .header-nav .menu > li.menu-item-special > ul:not(:has(> li > ul)) {
    min-block-size: 0;
  }
  .header-nav .menu > li.menu-item-special > ul {
    margin-inline: auto;
    inset-inline: auto 0;
  }
  .header-nav .menu > li.menu-item-special > ul ul {
    border-radius: 0;
    box-shadow: none;
    color: inherit;
  }
  .header-nav .menu > li.menu-item-special > ul,
  .header-nav .menu > li.menu-item-special > ul ul {
    padding-block: var(--layout-header-nav-special-padding-y);
    scrollbar-width: none;
    overflow-y: scroll;
  }
  .header-nav .menu > li.menu-item-special > ul::-webkit-scrollbar,
  .header-nav .menu > li.menu-item-special > ul ul::-webkit-scrollbar {
    display: none;
  }
  .header-nav .menu > li.menu-item-special > ul > li > ul {
    mask-image: linear-gradient(to bottom, transparent 0%, white 1.5em, white calc(100% - 3em), transparent calc(100% - 1.5em));
    position: absolute;
    inset-block: 0;
    right: 0;
    left: auto;
    width: var(--layout-header-nav-special-sub-width);
    background: none;
  }
  .header-nav .menu > li.menu-item-special > ul > li > ul ul {
    width: auto;
    position: static;
    margin-inline: calc(var(--layout-header-menu-nontouch-dropdown-padding-x) * -1);
  }
  .header-nav .menu > li.menu-item-18325 > ul {
    inline-size: 20.3125rem;
  }
  .header-nav .menu > li > ul {
    inset-block-start: 100%;
    inset-inline-start: 0;
  }
  .header-nav .menu > li > ul ul {
    color: inherit;
  }
  .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+2) > ul {
    inset-inline-start: auto;
    transform: none;
    inset-inline-end: 0;
  }
  .header-nav .menu > li:nth-last-child(-n+2) > ul ul {
    inset-inline-end: calc(var(--layout-header-menu-nontouch-dropdown-padding-x) * 2);
    inset-inline-start: auto;
  }
  .header-nav .menu {
    /* 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 (max-width: 74.9375rem) {
  .header-nav .menu {
    background: var(--color-light);
    color: var(--color-dark);
    padding-block-start: 6rem;
    padding-block-end: 6rem;
    inline-size: 100%;
    box-shadow: inherit;
    max-inline-size: 100%;
  }
  .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 */
    text-align: start;
    justify-content: space-between;
  }
  .header-nav .menu li:is(:hover, :focus, :focus-within, .open) > a {
    /* activated styles upon interaction for touch */
    color: var(--scheme-sp, var(--color-primary));
  }
  .header-nav .menu li:is(.open) {
    border-block-end: 0;
  }
  .header-nav .menu li:is(.open) > a {
    border-block-end: 0;
  }
  .header-nav .menu ul {
    background-color: color-mix(in srgb, var(--color-secondary) 5%, var(--color-light));
    color: inherit;
    align-self: stretch;
    order: 99;
    flex: 1 0 100%;
    /* basic borders to contrast multiple dropdown levels */
    border-block: 1px solid var(--color-neutral);
  }
  .header-nav .menu ul:has(> li:last-child.open), .header-nav .menu ul:is(li:last-child.open > ul) {
    margin-block-end: 0 !important;
  }
  .header-nav .menu ul:has(> li:last-child.open) {
    padding-block-end: 0 !important;
  }
  .header-nav .menu > li > ul ul {
    background-color: color-mix(in srgb, var(--color-secondary) 9%, var(--color-light));
  }
}
@media only screen and (max-width: 47.9375rem) {
  .header-nav .menu {
    padding-block: 1.5rem 2rem;
  }
}
.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;
  }
}
/* 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 (min-width: 75rem) and (prefers-reduced-motion: no-preference) {
  .layout-banner .banner-body,
  .layout-banner .banner-rep {
    animation: onep21-banner-enter 750ms cubic-bezier(0.25, 0.1, 0.25, 1) backwards;
  }
}
@media print {
  .layout-banner .banner-body,
  .layout-banner .banner-rep {
    animation: none;
  }
}
@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 */
}
@keyframes onep21-banner-enter {
  from {
    translate: 0 10px;
  }
  to {
    translate: 0 0;
  }
}
/* Banner Background
--------------------------------------------------------------- */
.banner-background {
  --responsive-background-overlay-mix-blend: multiply;
  --responsive-background-overlay-background: rgba(0, 0, 0, 0.5);
  --responsive-background-overlay-opacity: 0.75;
  --responsive-background-bg-position: center top;
  /* Keep the team's faces below the banner content as the photo scales wider. */
}
@media only screen and (min-width: 112.5rem) {
  #home-banner .banner-background {
    --responsive-background-bg-position: center calc(100% + max(0px, (100vi - 120rem) * 0.16));
  }
}
@media only screen and (min-width: 48rem) {
  .banner-background {
    --responsive-background-overlay-background:
    	/* example of gradient to contrast header further */
    	linear-gradient(
    		to bottom,
    		rgba(0, 0, 0, 0.8) 0,
    		transparent calc(var(--layout-header-height, 0) * 1.5)
    	),
    	/* example of gradient to keep contrats on text. TIP: calculating from the center of the viewport width retains the gradients alignment to the text like in the comps */
    		linear-gradient(
    			45deg,
    			var(--color-dark) calc(50vi - min(480px, 25%)),
    			transparent calc(50vi + min(480px, 25%))
    		);
  }
}
@media only screen and (min-width: 48rem) and (max-width: 87.4375rem) {
  body:not(.home).banner-has-background-image .layout-banner .banner-background {
    /* Figma's 67% navy overlay, accounting for the existing 75% layer opacity. */
    --responsive-background-overlay-background: linear-gradient(191.022deg, rgba(0, 28, 53, 0.893333) 28.071%, rgba(12, 28, 2, 0) 84.501%);
  }
}
@media only screen and (min-width: 75rem) {
  body:not(.home).banner-has-background-image .layout-banner .banner-background {
    /* The desktop layout starts at 1200px, including the shared breakpoint. */
    --responsive-background-overlay-background: linear-gradient(88deg, rgba(0, 0, 0, 0.67) 26.53%, rgba(12, 28, 2, 0) 69.72%);
  }
}
/* Banner Main
--------------------------------------------------------------- */
.banner-main {
  padding-block: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.banner-main-blocks {
  justify-items: center;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}
.banner-main-block:only-child {
  flex: 1 1;
  grid-column: 1/-1;
  grid-row: 1/-1;
  justify-self: stretch;
}
@media only screen and (min-width: 75rem) {
  .banner-main {
    padding-block: 5rem 4rem;
  }
  .banner-main-blocks {
    grid-template-columns: 1fr auto;
  }
}
.banner-has-background-image .banner-main {
  /* Styles specific for when banner has background image */
}
.banner-has-background-image .banner-main {
  /* comp keeps the copy near the top of a tall hero on touch */
  justify-content: flex-start;
  padding-block: 1.3125rem 0;
  min-block-size: 28.4375rem;
}
.banner-has-background-image .banner-main:is(.content-palette-dark) {
  background-color: var(--scheme-bg, var(--color-dark-alt));
  color: var(--scheme-fg, var(--color-light));
}
.banner-has-background-image .banner-main-container {
  --container-gutter: 1.5rem;
}
@media only screen and (min-width: 48rem) {
  .banner-has-background-image .banner-main {
    padding-block: 3.875rem 0;
    min-block-size: 34.875rem;
  }
  .banner-has-background-image .banner-main-container {
    --container-gutter: 5.6875rem;
  }
}
@media only screen and (min-width: 75rem) {
  .banner-has-background-image .banner-main {
    /* centred in the strip from md up */
    justify-content: center;
    padding-block: 5.6875rem;
    min-block-size: 23.75rem;
  }
  .banner-has-background-image .banner-main-container {
    --container-gutter: 4.6875rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .banner-has-background-image .banner-main {
    padding-block: 6.4375rem;
    min-block-size: 26rem;
  }
  .banner-has-background-image .banner-main-container {
    --container-gutter: 8.0625rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .banner-has-background-image .banner-main {
    padding-block: 6.625rem;
    min-block-size: 27.125rem;
  }
  .banner-has-background-image .banner-main-container {
    --container-gutter: 10.125rem;
  }
}
.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 {
  /* Comp: an accent -> primary wash across the top of the banner, faded out to
  the page background. Same treatment the footer's contact section uses. */
}
.banner-no-background-image .banner-main {
  background-color: var(--color-light);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--color-light) var(--banner-fade-stop, 100%)), linear-gradient(to right, var(--color-accent-gradient-start), var(--color-accent-gradient-end));
  color: var(--color-dark-alt);
  padding-block: 3rem 2.0625rem;
  text-align: center;
}
@media only screen and (min-width: 48rem) {
  .banner-no-background-image .banner-main {
    padding-block: 5.5rem 2.0625rem;
  }
}
@media only screen and (min-width: 75rem) {
  .banner-no-background-image .banner-main {
    padding-block: 8.625rem 2.0625rem;
  }
}

/* Banner Body
--------------------------------------------------------------- */
.banner-body, .banner-body-blocks {
  align-items: inherit;
  justify-content: inherit;
  justify-items: inherit;
}
.banner-body-block, .banner-body-blocks {
  min-inline-size: 0;
  max-inline-size: 100%;
}
.banner-body-blocks {
  gap: 2.125rem;
}
.banner-has-background-image .banner-body {
  /* Styles specific for when banner has background image customized */
}
.banner-has-background-image .banner-body-blocks {
  /* comp centres the copy on touch, flushes it left from md up */
  justify-items: center;
  text-align: center;
  row-gap: 0.25rem;
  max-inline-size: 19.5rem;
  justify-self: center;
}
.banner-has-background-image .banner-body-blocks .banner-content {
  margin-block-start: 0.25rem;
}
.banner-has-background-image .banner-body-blocks .banner-buttons {
  margin-block-start: 0.75rem;
}
@media only screen and (min-width: 48rem) {
  .banner-has-background-image .banner-body-blocks {
    /* comp centres the block here but keeps the copy ranged left */
    text-align: start;
    row-gap: 0.625rem;
    max-inline-size: 36.625rem;
  }
  .banner-has-background-image .banner-body-blocks .banner-buttons {
    margin-block-start: 1rem;
  }
}
@media only screen and (min-width: 75rem) {
  .banner-has-background-image .banner-body-blocks {
    justify-items: start;
    text-align: start;
    max-inline-size: 36.875rem;
    justify-self: start;
  }
}
@media only screen and (min-width: 87.5rem) {
  .banner-has-background-image .banner-body-blocks {
    max-inline-size: 48.625rem;
  }
}
.banner-no-background-image .banner-body {
  /* Comp: heading and button centred, 20px apart */
}
.banner-no-background-image .banner-body-blocks {
  gap: 1.25rem;
  justify-items: center;
}

/* Global Banner Text
--------------------------------------------------------------- */
.banner-has-background-image .banner-text {
  /* Styles specific for when banner has background image */
}
.banner-no-background-image .banner-text {
  /* Styles specific for when banner doesnt support background image */
}
/* Global Secondary Heading
--------------------------------------------------------------- */
.secondary-heading {
  font-size: 1rem;
}
.secondary-heading em {
  /* emphasized words */
  color: var(--scheme-sp, var(--color-accent));
  letter-spacing: 0em;
  font-style: normal;
}
.secondary-heading::before,
.secondary-heading > span::before {
  color: var(--scheme-sb, var(--color-primary));
  font-style: normal;
}
@media only screen and (min-width: 48rem) {
  .secondary-heading > span {
    display: inline-block;
  }
  .secondary-heading > span:nth-child(n+2)::before {
    content: "\25CF\FE0E";
    margin-inline: 0.5em;
  }
}
@media only screen and (max-width: 74.9375rem) {
  .secondary-heading > span {
    display: inline-block;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .secondary-heading {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
  }
  .secondary-heading::before {
    content: "\25CF\FE0E" "\25CF\FE0E" "\25CF\FE0E";
    display: block;
  }
}
.banner-has-background-image .secondary-heading {
  /* Styles specific for when banner has background image */
  font-size: 1rem;
  line-height: 1.2;
  font-family: var(--font-primary);
  color: var(--color-primary);
  text-transform: capitalize;
  font-weight: 700;
  /* comp has no dot motif on the banner eyebrow */
}
.banner-has-background-image .secondary-heading::before {
  content: none;
}
@media only screen and (min-width: 48rem) {
  .banner-has-background-image .secondary-heading {
    /* fits on one line from here up */
    line-height: 1;
  }
}
.banner-no-background-image .secondary-heading {
  /* Styles specific for when banner doesnt support background image */
}
.secondary-heading.secondary-heading-default {
  /* Styles specific for default template primary heading (Single Post, Single Page, Possibly Blog/ Archive etc.) */
}
.secondary-heading.secondary-heading-blog {
  /* Styles specific for blog post/ blog archive custom primary heading (Blog/ Archive) and blog post titles*/
}
.secondary-heading.secondary-heading-blog-posts {
  /* Styles specific for blog post/ blog archive custom primary heading (Blog/ Archive) */
}
.secondary-heading.secondary-heading-blog-post {
  /* Styles specific for the blog post title*/
}
/* Global Primary Heading
--------------------------------------------------------------- */
/* Note: default styles are set to custom internal templates w/ no banner background images  (Case Results, Testimonials, etc.) to reduce repetitive styles and or lengthy selectors */
.primary-heading {
  /* Global Styles / custom page template heading styles (Testimonials Grid, Attorney Grid, etc.) */
  font-size: 3rem;
  line-height: calc(1em + 5px);
  text-wrap: balance;
  margin-block-end: 0;
}
.primary-heading em {
  /* emphasized words */
  color: var(--scheme-sp, var(--color-accent));
  font-style: normal;
}
@media only screen and (min-width: 48rem) {
  .primary-heading {
    font-size: 4rem;
  }
}
@media only screen and (min-width: 75rem) {
  .primary-heading {
    font-size: 5rem;
  }
}
.primary-heading.primary-heading-default {
  /* Styles specific for default template primary heading (Single Post, Single Page, Possibly Blog/ Archive etc.) */
  font-size: 2rem;
  margin-block: 0 0.2em;
}
@media only screen and (min-width: 48rem) {
  .primary-heading.primary-heading-default {
    font-size: 3rem;
  }
}
@media only screen and (min-width: 75rem) {
  .primary-heading.primary-heading-default {
    font-size: 4rem;
  }
}
.primary-heading.primary-heading-default-h1 {
  /* Styles specific for default template primary heading set as an h1 (Single Post, Single Page) */
}
.primary-heading.primary-heading-blog {
  /* Styles specific for blog post/ blog archive custom primary heading (Blog/ Archive) and blog post titles*/
}
.primary-heading.primary-heading-blog-posts {
  /* Styles specific for blog post/ blog archive custom primary heading (Blog/ Archive) */
}
.primary-heading.primary-heading-blog-post {
  /* Styles specific for the blog post title*/
}
.layout-banner .primary-heading {
  /* Styles specific for when it's inside a banner */
}
.primary-heading.h1-fallback-heading {
  /* Styles specific for when banner does not exist/ rendered as a helper class for the fallback h1 */
}
.primary-heading.h1-fallback-heading:where(.section-heading) {
  text-align: center;
}
.banner-has-background-image .layout-banner .primary-heading {
  color: inherit;
}
.banner-has-background-image .primary-heading {
  /* Styles specific for when banner has background image */
  font-size: 2.5rem;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-light);
  font-weight: 400;
  /* the h1 utility carries a bottom margin, the comp spaces with the grid gap instead */
  margin-block: 0;
}
@media only screen and (min-width: 48rem) {
  .banner-has-background-image .primary-heading {
    font-size: 3.125rem;
    line-height: 1.2;
  }
}
@media only screen and (min-width: 87.5rem) {
  .banner-has-background-image .primary-heading {
    font-size: 3.75rem;
    line-height: 1.2;
  }
}
@media only screen and (min-width: 112.5rem) {
  .banner-has-background-image .primary-heading {
    font-size: 4.375rem;
    line-height: 1.2;
  }
}
.banner-no-background-image .primary-heading {
  /* Comp: Bevan on the light wash rather than the hero's white */
}
.banner-no-background-image .primary-heading {
  font-size: 2.1875rem;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-secondary);
  text-transform: none;
  font-weight: 400;
  margin-block: 0;
}
@media only screen and (min-width: 48rem) {
  .banner-no-background-image .primary-heading {
    font-size: 2.8125rem;
  }
}
@media only screen and (min-width: 75rem) {
  .banner-no-background-image .primary-heading {
    font-size: 3.25rem;
  }
}

/* Banner Awards (Optional depending on comps)
--------------------------------------------------------------- */
.banner-awards {
  grid-column: 1/-1;
  flex: 0 0 auto;
  order: 99;
}
.banner-has-background-image .banner-awards {
  /* Styles specific for when banner has background image */
}
.banner-no-background-image .banner-awards {
  /* Styles specific for when banner doesnt support background image */
}
/* Banner video (Optional depending on comps)
--------------------------------------------------------------- */
.banner-video .video-thumbnail {
  inline-size: 18.75rem;
}
.banner-video-cta.video-button:not(.video-button-default-has-text) {
  display: block;
}
@media only screen and (min-width: 75rem) {
  .banner-video {
    order: 99;
  }
}
.banner-has-background-image .banner-video {
  /* Styles specific for when banner has background image */
}
.banner-no-background-image .banner-video {
  /* Styles specific for when banner doesnt support background image */
}
/* Banner Content (Optional depending on comps)
--------------------------------------------------------------- */
.banner-content {
  text-wrap: balance;
  max-inline-size: 90ch;
}
.banner-has-background-image .banner-content {
  /* Styles specific for when banner has background image */
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--color-light);
  font-weight: 400;
}
@media only screen and (min-width: 75rem) {
  .banner-has-background-image .banner-content {
    line-height: 1;
  }
}
.banner-no-background-image .banner-content {
  /* Styles specific for when banner doesnt support background image */
}
/* Banner Buttons
--------------------------------------------------------------- */
.banner-buttons {
  display: inline-flex;
  gap: 1rem;
  align-items: center;
  text-align: inherit;
  justify-content: inherit;
}
.banner-buttons-touch {
  display: flex;
  margin-block-start: 3.25rem;
  margin-block-end: 4rem;
}
.banner-buttons-touch:first-child {
  margin-block-start: -1rem;
}
@media only screen and (min-width: 48rem) {
  .banner-button-shift .banner-buttons-touch, .banner-has-h1.banner-button-shift .banner-buttons-touch + hr {
    /* hide buttons outside of banner */
    display: none;
  }
}
@media only screen and (max-width: 47.9375rem) {
  .banner-buttons, .banner-buttons-touch {
    flex-direction: column;
  }
  .banner-buttons-touch {
    inline-size: 100%;
    align-items: stretch;
  }
  .h1-fallback-heading:has(+ .banner-buttons-touch) {
    margin-block-end: 0;
  }
  .banner-button-shift :is(.layout-banner .banner-buttons, .banner-buttons-nontouch) {
    /* hide buttons inside of banner */
    display: none;
  }
}

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

/* Banner Company info
--------------------------------------------------------------- */
.banner-com-info {
  padding-block: 2rem;
  background: var(--color-light-alt);
}
.banner-com-info-header {
  text-align: center;
  margin-block-end: 2rem;
}
/* Layout Contact https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/layout/contact.md
-------------------------------------------------------------------------------- */
/* Layout contact Variables
--------------------------------------------------------------- */
/* In case contact is also as crazy as the header */
/* Tip: placing the css var on :root can allow elements outside of the layout header utilize the variable if needed ie sticky stuff, offsets, jump link scroll etc. */
:root {
  --layout-contact-offset: 6.25rem;
}
/* Layout contact Overlaps
	NOTE: Classes to use:
		.layout-contact-offset-element => the element within the layout that will have the negative margins to overlap itself
		.has-layout-contact-offset => the adjacent layouts/ child of adjacent layouts that will have the pseudo element to adjust itself if the `layout-contact-offset-element` is next to it
--------------------------------------------------------------- */
.contact-can-overlap:has(.has-layout-contact-offset) .layout-contact:has(.layout-contact-offset-element) {
  isolation: isolate;
}
.contact-can-overlap .has-layout-contact-offset:not(:has(.has-layout-contact-offset)):is(.footer-top:has(+ .footer-bottom .footer-contact:first-child),
.footer-top:has(+ .footer-bottom .footer-contact:first-child) + *,
.template-wrapper:has(:is(.main, main) .layout-contact:nth-child(n+2)))::after {
  content: "";
  flex: 0 0 auto;
  grid-column: 1/-1;
  block-size: var(--layout-contact-offset, 0px);
  display: block;
  inline-size: 100%;
}
.contact-can-overlap:has(.has-layout-contact-offset) .layout-contact-offset-element:is(.layout-contact > :last-child,
.layout-contact > :last-child *) {
  margin-block-start: max(0, (var(--layout-contact-offset, 0px) + var(--overlap-buffer)) * -1) !important;
}
.contact-can-overlap:has(.has-layout-contact-offset) .layout-contact:has(.layout-contact-offset-element),
.contact-can-overlap:has(.has-layout-contact-offset) :is(main, .main):has(.layout-contact) {
  padding-block-start: var(--overlap-buffer) !important;
}

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

/* Contact  Related Classes

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

For styles applied globally for the contact information, apply styles to layouts/layout-contact.scss
For Contact Page only overrides for the contact informatio, apply styles to templates/template-contact.scss -> #contact-page
For Footer section only overrides for the contact informatio, apply styles to layout/layout-footer.scss -> .footer-contact styles section
-------------------------------------------------------------------------------- */
/* Global Stylees - Numbers (eg. header phone number, footer phone number, etc.)
-------------------------------------------------------------------------------- */
.number-link {
  font-size: 1.25rem;
  line-height: 1;
  font-family: var(--font-secondary);
  color: inherit;
  font-weight: normal;
  text-decoration: none;
  display: inline-block;
}
/* Global Stylees - Locations
-------------------------------------------------------------------------------- */
.location-content {
  display: contents;
}
.location-embed {
  --cover-aspect-w: 1;
  --cover-aspect-l: 1;
}
.location-numbers {
  display: contents;
  align-items: inherit;
  justify-content: inherit;
}
.location-number {
  flex-wrap: wrap;
}
.location-number-label {
  margin-inline-end: 0.25em;
}
/* Global Stylees - Social Links (ie. Company social media, blog share icons, etc)
-------------------------------------------------------------------------------- */
.social {
  font-size: 1.5rem;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.social-item-link {
  /* Comp: 48px tile, 24px glyph */
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2em;
  block-size: 2em;
  border-radius: 0.5rem;
  background-color: var(--color-secondary);
  color: var(--color-light);
}
.social-item-link svg * {
  fill: currentColor;
}
@media only print {
  .social-item-link:not([href="#"])::after {
    content: attr(href);
    font-size: 1rem;
  }
}
.social-item:is(:hover, :focus, :focus-within) > .social-item-link {
  background-color: var(--color-accent);
}
@media only print {
  .social:is(.social-style-circle) {
    display: none !important;
  }
}
.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: 1rem;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-secondary);
  text-transform: uppercase;
  font-weight: 400;
  max-inline-size: max-content;
  display: inline-block;
  margin-block-end: 0;
}

/* Confact Info Block - Basic Text Content
-------------------------------------------------------------------------------- */
.contact-block-content {
  flex: 1 1;
}
:where(.contact-block-content :where(a)) {
  color: inherit;
  text-decoration: none;
}
:where(.contact-block-content :where(a)):where(:hover, :focus) {
  text-decoration: underline;
}

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

.contact-block.contact-lists .contact-lists-content {
  row-gap: 4rem;
  display: grid;
}
.contact-block:is(.contact-menudir, .contact-menudirs) .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;
  }
}
/* Contact Blocks Layout
	The footer and the contact page draw this block identically: a centred column
	holding the logo row, its rule and the four info columns.
-------------------------------------------------------------------------------- */
.footer-contact {
  min-inline-size: 0;
  max-inline-size: 100%;
}

:is(.footer-contact, .contact-page, #contact-page) .layout-contact {
  min-inline-size: 0;
  max-inline-size: 100%;
  /* Comp: one centred block holding the logo row, its rule and the four info
  columns. The blocks are ordered logo / phone / social / rule / visit us / hours /
  services / our company, which is not the order they are output in. */
  --contact-blocks-gap: 2.5rem;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-blocks {
  inline-size: 100%;
  max-inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--contact-blocks-gap);
  text-align: center;
  /* Comp: `Rectangle 100` - 53px of clearance on either side */
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-blocks::before {
  content: "";
  order: 4;
  inline-size: 100%;
  block-size: 1px;
  background-color: var(--color-light-alt);
  margin-block: 0.8125rem;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact {
  /* the shared grid scaffold pins every block to 100% - the footer lays them out
  as content sized flex items instead */
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-block {
  inline-size: auto;
  max-inline-size: 100%;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-special {
  order: 1;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-number {
  order: 2;
  display: grid;
  gap: 0.3125rem;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-number .number-title {
  font-size: 1rem;
  line-height: 1;
  font-family: var(--font-primary);
  color: var(--color-secondary-alt);
  text-transform: capitalize;
  font-weight: 700;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-number .number-link {
  font-size: 2rem;
  line-height: 1;
  font-family: var(--font-secondary);
  color: var(--color-secondary);
  font-weight: 400;
  text-decoration: none;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-social {
  order: 3;
  /* the comp tightens the icons under the phone rather than using the block gap */
  margin-block-start: -1.5rem;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-location {
  order: 5;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-list {
  order: 6;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-menudir {
  /* `.menudir-container` is `display: contents`, so the title and menu are rows
  of this block. The pointer area vars set the comp's tight item rhythm. */
  --pa-title-padding-x: 0rem;
  --pa-item-padding-x: 0rem;
  --pa-item-padding-y: 0rem;
  --pa-item-border-width: 0px;
  --pa-item-height: auto;
  --pa-item-line-height: 1;
  order: 7;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact {
  /* Logo and business license */
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-special-content {
  display: grid;
  gap: 0.6875rem;
  text-align: center;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-logo {
  display: block;
  inline-size: 19.0625rem;
  max-inline-size: 100%;
  margin-inline: auto;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-license {
  font-size: 1rem;
  line-height: 1;
  font-family: var(--font-primary);
  color: var(--color-dark-alt);
  font-weight: 700;
  margin: 0;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact {
  /* Visit us - `.location-content` is `display: contents`, so the title, address
  and button are all rows of this grid */
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-location {
  display: grid;
  gap: 1.125rem;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .location-address {
  font-size: 1rem;
  line-height: 1.35;
  font-style: normal;
  margin: 0;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .location-directions {
  margin: 0;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .location-directions-button {
  --button-padding-y: 0.75em;
  --button-padding-x: 0.9375em;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact {
  /* Hours */
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-list {
  display: grid;
  gap: 1.0625rem;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-list .list-items,
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-list .list-item {
  display: contents;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-list .list-item-el {
  font-size: 1rem;
  line-height: 1.35;
  color: var(--color-dark);
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-list .list-item-el p {
  margin: 0;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-list .list-item-el p + p {
  margin-block-start: 1.0625rem;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-list .list-item-el strong {
  color: var(--color-secondary-alt);
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact {
  /* Services / our company */
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .menudir-title {
  margin-block-end: 0;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .menudir-menu {
  display: grid;
  gap: 0.9375rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .menudir-menu li {
  margin: 0;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .menudir-menu a {
  font-size: 1rem;
  line-height: 1;
  font-family: var(--font-primary);
  color: var(--color-dark);
  font-weight: 400;
  text-decoration: none;
}
:is(.footer-contact, .contact-page, #contact-page) .layout-contact .menudir-menu a:is(:hover, :focus) {
  color: var(--color-secondary-alt);
}
@media only screen and (min-width: 48rem) {
  :is(.footer-contact, .contact-page, #contact-page) .layout-contact {
    /* Comp: logo centred on its own line, phone and icons paired under it, columns 2 x 2.
    The comp's own block is 510 wide but its phone/icon pair measures 513, so the
    cap is rounded up to keep that pair on one line. */
  }
  :is(.footer-contact, .contact-page, #contact-page) .layout-contact {
    max-inline-size: 32.5rem;
    margin-inline: auto;
  }
  :is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-blocks {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: 2.25rem;
  }
  :is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-special {
    flex: 0 0 100%;
  }
  :is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-number {
    margin-inline-start: auto;
    align-self: center;
    text-align: start;
    /* let the label wrap rather than drop the icons to their own line */
    min-inline-size: 0;
  }
  :is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-social {
    margin-inline-end: auto;
    align-self: center;
    margin-block-start: 0;
    flex: 0 0 auto;
  }
  :is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-location,
  :is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-list,
  :is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-menudir {
    flex: 0 1 calc(50% - 1.125rem);
    text-align: start;
  }
}
@media only screen and (min-width: 75rem) {
  :is(.footer-contact, .contact-page, #contact-page) .layout-contact {
    /* Comp: logo opposite the phone group, then the four columns spread edge to edge */
  }
  :is(.footer-contact, .contact-page, #contact-page) .layout-contact {
    max-inline-size: none;
  }
  :is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-blocks {
    text-align: start;
  }
  :is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-special {
    flex: 0 1 auto;
    align-self: center;
  }
  :is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-social {
    margin-inline-end: 0;
  }
  :is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-location,
  :is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-list,
  :is(.footer-contact, .contact-page, #contact-page) .layout-contact .contact-menudir {
    flex: 0 1 auto;
  }
}
@media only screen and (min-width: 112.5rem) {
  :is(.footer-contact, .contact-page, #contact-page) .layout-contact {
    /* the logo row and columns stay narrower than the utility row below them */
  }
  :is(.footer-contact, .contact-page, #contact-page) .layout-contact {
    max-inline-size: 82.6875rem;
    margin-inline: auto;
  }
}

/* Layout Footer https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/layout/footer.md
--------------------------------------------------------------- */
/* Layout Footer Variables
--------------------------------------------------------------- */
/* In case footer is also as crazy as the header */
/* Tip: placing the css var on :root can allow elements outside of the layout header utilize the variable if needed ie sticky stuff, offsets, jump link scroll etc. */
:root {
  /* The comps transition into the footer with the decorative wave rather than by
  floating the form over the section above, so the offset pair (the spacer on the
  preceding section and the form's matching negative margin) is zeroed out. The
  machinery stays in place for any template that does want it. */
  --layout-footer-offset: 0rem;
}
/* Layout Footer Overlaps
	NOTE: Classes to use:
		.layout-footer-offset-element => the element within the layout that will have the negative margins to overlap itself
		.has-layout-footer-offset => the adjacent layouts/ child of adjacent layouts that will have the pseudo element to adjust itself if the `layout-footer-offset-element` is next to it
--------------------------------------------------------------- */
.footer-can-overlap:has(.has-layout-footer-offset) .layout-footer:is(.layout-footer-offset-element,
:has(.layout-footer-offset-element)) {
  isolation: isolate;
  z-index: 10;
  position: relative;
}
.footer-can-overlap .has-layout-footer-offset:not(:has(.layout-footer-offset-element)):is(:has(+ .layout-footer),
.template-wrapper:has(+ .layout-footer) :is(.template-wrapper:has(+ .layout-footer) > :last-child,
:is(.main, main, .aside, aside):last-child,
:is(.main, main):last-child > :is(section, .section):last-child,
:is(.main, main):last-child > :is(section, .section):last-child *))::after {
  content: "";
  flex: 0 0 auto;
  grid-column: 1/-1;
  block-size: var(--layout-footer-offset, 0px);
  display: block;
  inline-size: 100%;
}
@media only screen and (min-width: 75rem) {
  .footer-can-overlap .has-layout-footer-offset:not(:has(.layout-footer-offset-element)):is(:is(.main, main):has(+ :is(.aside, aside):last-child),
  :is(.main, main):has(+ :is(.aside, aside):last-child) *)::after {
    content: "";
    flex: 0 0 auto;
    grid-column: 1/-1;
    block-size: var(--layout-footer-offset, 0px);
    display: block;
    inline-size: 100%;
  }
}
.footer-can-overlap:has(.has-layout-footer-offset) .layout-footer-offset-element:is(.layout-footer > :first-child,
.layout-footer > :first-child *,
.layout-footer) {
  margin-block-start: calc((var(--layout-footer-offset, 0px) + var(--overlap-buffer)) * -1) !important;
}
.footer-can-overlap:has(.has-layout-footer-offset) .layout-footer:has(.layout-footer-offset-element) {
  padding-block-start: var(--overlap-buffer) !important;
}

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

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

.onep21 {
  font-size: 3.125rem;
}

.ihealth {
  font-size: 2.125rem;
}

/* Layout Footer
--------------------------------------------------------------- */
.layout-footer {
  /* Comp: `Vector 10` - the accent/primary wave that tops the footer. The comps draw
  it as one 1920x271 graphic, so it is centred and cropped below that width and
  stretched to fit past it. */
  --layout-footer-wave-size: max(100%, 120rem) 16.9375rem;
  --layout-footer-wave-overhang: 3.5625rem;
  /* how much of the wave sits above the form section */
}
.layout-footer {
  position: relative;
  /* `.footer-can-overlap` claims this element's padding for `--overlap-buffer`,
  so the wave's clearance is carried by the form section's margin instead.
  `flow-root` keeps that margin from collapsing out of the footer. */
  display: flow-root;
  background-color: var(--color-light);
  color: var(--color-dark);
}
.layout-footer::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 16.9375rem;
  background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 271" preserveAspectRatio="none"><defs><linearGradient id="a" x1="0" y1="0" x2="1920" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="%230197F2"/><stop offset="1" stop-color="%23C2DF85"/></linearGradient></defs><path opacity=".4" fill="url(%23a)" d="M462.291 107.603C305.709 53.8015 107.28 12.6201 0 0V271H1920V107.603C1887.51 89.6691 1860.64 64.0534 1771.03 53.8015C1614.29 35.8676 1461.44 119.559 1346.21 119.559C1215.38 119.559 1034.63 53.8015 820.23 53.8015C605.825 53.8015 531.262 131.301 462.291 107.603Z"/></svg>');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: var(--layout-footer-wave-size);
  pointer-events: none;
}
@media only screen and (min-width: 48rem) {
  .layout-footer {
    --layout-footer-wave-overhang: 4.4375rem;
  }
}
.layout-footer {
  /* Let the homepage fleet photo show through the wave's transparent crest. */
}
.layout-footer#home-footer {
  --layout-footer-home-overlap: 6.375rem;
  margin-block-start: calc(-1 * var(--layout-footer-home-overlap));
  background-color: transparent;
}
@media only screen and (min-width: 48rem) {
  .layout-footer#home-footer {
    --layout-footer-home-overlap: 7rem;
  }
}
@media only screen and (min-width: 75rem) {
  .layout-footer#home-footer {
    --layout-footer-home-overlap: 6.875rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .layout-footer#home-footer {
    --layout-footer-home-overlap: 8.125rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .layout-footer#home-footer {
    --layout-footer-home-overlap: 13.6875rem;
  }
}

/* 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 {
  /* Figma supplies a separate ray background and wave crop at each breakpoint. */
  --footer-background-image: url('images/footer-form-background-mobile.svg');
  --footer-background-size: 100% 100%;
  --footer-background-x: center;
}
.footer-top {
  position: relative;
  margin-block-start: var(--layout-footer-wave-overhang);
  /* Extend the blue beneath transparent export edges without covering the wave. */
  background-image: var(--footer-background-image), linear-gradient(#09396a, #054688);
  background-size: var(--footer-background-size), 100% calc(100% - 4.625rem);
  background-position: var(--footer-background-x) top, center bottom;
  background-repeat: no-repeat;
  padding-block: 7.1875rem 2.9375rem;
}
.footer-top-container {
  --container-gutter: 1.5rem;
}
@media only screen and (min-width: 48rem) {
  .footer-top {
    padding-block: 6.625rem 3.5rem;
    --footer-background-image: url('images/footer-form-background-sm.svg');
    /* The exported wave is wider than its blue body. Scale and centre that
    body so intermediate widths never expose transparent side gutters. */
    --footer-background-size: max(120rem, calc(100% * 1920 / 1048)) 100%;
    --footer-background-x: calc(50% + max(1.625rem, calc(100vi * 26 / 1048)));
  }
  .footer-top-container {
    --container-gutter: 5.375rem;
  }
}
@media only screen and (min-width: 75rem) {
  .footer-top {
    /* 1400 insets by a further ~9px, which reads the same, so md carries through to xl */
  }
  .footer-top {
    padding-block: 9.0625rem 5.875rem;
    --footer-background-image: url('images/footer-form-background-md.svg');
    --footer-background-size: max(120rem, calc(100% * 1920 / 1200)) 100%;
    --footer-background-x: calc(50% + max(0.6875rem, calc(100vi * 11 / 1200)));
  }
  .footer-top-container {
    --container-gutter: 10.25rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .footer-top {
    --footer-background-image: url('images/footer-form-background-lg.svg');
    --footer-background-size: max(120rem, calc(100% * 1920 / 1400)) 100%;
    --footer-background-x: calc(50% - max(2rem, calc(100vi * 32 / 1400)));
  }
  .footer-top-container {
    --container-gutter: 16.5rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .footer-top {
    --footer-background-image: url('images/footer-form-background.svg');
    --footer-background-size: max(100%, 120.1875rem) 100%;
    --footer-background-x: center;
  }
  .footer-top-container {
    --container-gutter: 32.75rem;
  }
}

/* Footer Form
--------------------------------------------------------------- */
#footer-form {
  /* Comp: the form sits straight on the section gradient, so the boilerplate's
  boxed treatment is dropped. The inner container only re-centres the form. */
}
#footer-form {
  inline-size: 100%;
}
.footer-form-container {
  --container-gutter: 0rem;
}

#footer-form .field-form {
  gap: 1.625rem;
}
#footer-form .field-form-body {
  padding-block: 1.5rem;
  gap: 1.75rem;
}
#footer-form .field-form-header {
  max-inline-size: 45.25rem;
  margin-inline: auto;
}
#footer-form .gform_wrapper.faux-gform_wrapper {
  display: grid;
  gap: 1.125rem;
}
#footer-form .gform_title {
  font-size: 1.125rem;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-light);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 400;
}
#footer-form .gform_description {
  font-size: 2.1875rem;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-primary);
  text-transform: none;
  font-weight: 400;
  max-inline-size: none;
}
#footer-form .gform_description p {
  margin: 0;
}
#footer-form .gform_footer {
  justify-content: center;
  text-align: center;
}
@media only screen and (min-width: 48rem) {
  #footer-form .field-form-body {
    padding-inline: 1.5rem;
  }
  #footer-form .field-form-header {
    inline-size: min(45.25rem, 100vi - 3rem);
    max-inline-size: none;
    margin-inline: 0;
    align-self: center;
    justify-self: center;
  }
  #footer-form .gform_description {
    font-size: 2.8125rem;
  }
}
@media only screen and (min-width: 75rem) {
  #footer-form .gform_title {
    font-size: 1.25rem;
  }
  #footer-form .gform_description {
    font-size: 3.25rem;
  }
}
@media only screen and (max-width: 47.9375rem) {
  #footer-form .field-form-header {
    inline-size: calc(100% + 1.375rem);
    max-inline-size: none;
    margin-inline: -0.6875rem;
  }
}

/* Footer Contact
/* Footer Contact
	The block layout is shared with the contact page, so it lives in
	scss/layouts/_layout-contact.scss alongside the rest of the contact styles.
-------------------------------------------------------------------------------- */
/* Footer Split - Bottom
--------------------------------------------------------------- */
.footer-bottom {
  /* Comp: `Rectangle 99` - an accent to primary wash across the top of the white
  section, faded out downwards. */
  --footer-bottom-wash-height: 19rem;
}
.footer-bottom {
  position: relative;
  isolation: isolate;
  background-color: var(--color-light);
  color: var(--color-dark);
  padding-block: 3.0625rem;
}
.footer-bottom::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: var(--footer-bottom-wash-height);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--color-light) 100%), linear-gradient(to right, var(--color-accent-gradient-start), var(--color-accent-gradient-end));
  pointer-events: none;
}
.footer-bottom-container {
  display: grid;
  gap: 4rem;
  --container-gutter: 1.71875rem;
}
@media only screen and (min-width: 48rem) {
  .footer-bottom {
    padding-block: 4rem;
  }
  .footer-bottom-container {
    --container-gutter: 2.9375rem;
  }
}
@media only screen and (min-width: 75rem) {
  .footer-bottom {
    padding-block: 4.1875rem;
  }
  .footer-bottom-container {
    gap: 6.5rem;
    --container-gutter: 6.25rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .footer-bottom {
    --footer-bottom-wash-height: 18.125rem;
  }
  .footer-bottom-container {
    --container-gutter: 3.03125rem;
  }
}

/* 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 {
  font-size: 0.875rem;
  line-height: 1.2;
  font-family: var(--font-primary);
  color: var(--color-dark-alt);
  letter-spacing: 0.03em;
  font-weight: 400;
}
.footer-utility-blocks {
  row-gap: 1rem;
  column-gap: 2rem;
  align-items: center;
  justify-items: center;
  text-align: center;
}
.footer-utility-block:only-child {
  grid-column: 1/-1;
}
.footer-utility {
  /* Comp: copyright, menu and licence run as one pipe separated line */
}
.footer-utility-content :is(p:not(.footer-disclaimer), ul, li) {
  display: inline;
  margin: 0;
}
.footer-utility-content :is(p:not(.footer-disclaimer), ul, li):nth-child(n+2)::before {
  content: " | ";
  display: inline-block;
  margin: 0 0.5em 0 0.25em;
}
@media only screen and (min-width: 75rem) {
  .footer-utility-blocks {
    grid-template-columns: 1fr auto;
    justify-items: start;
    text-align: start;
  }
  .footer-utility-content {
    margin-inline-end: auto;
    order: -1;
  }
  .footer-utility :is(.footer-brand) {
    order: 99;
    justify-self: self-end;
    text-align: right;
    align-self: center;
  }
}

/* Footer logo
--------------------------------------------------------------- */
/* Footer disclaimer
--------------------------------------------------------------- */
.footer-disclaimer {
  margin-block-start: 1em;
}
/*
* Home Banner
-------------------------------------------------------------------------------- */
#home-banner {
  --home-banner-pad-start: 2.25rem;
  --home-banner-pad-end: 8.375rem;
  --home-banner-text-size: 17.1875rem;
  --home-banner-image-size: 50rem;
  --home-banner-gutter: 1.25rem;
  --home-banner-overlap: 0rem;
  --home-rep-scale: 0.77489;
  --home-rep-size: calc(27.15625rem * var(--home-rep-scale));
  --home-rep-card-inset: calc(1.296875rem * var(--home-rep-scale));
}
.banner-can-overlap:has(.has-layout-banner-offset) #home-banner {
  --home-banner-overlap: var(--layout-banner-offset, 0rem);
}
#home-banner .banner-main {
  min-block-size: 32.0625rem;
  padding-block: var(--home-banner-pad-start) max(0rem, var(--home-banner-pad-end) - var(--home-banner-overlap));
  justify-content: flex-start;
}
#home-banner .banner-main-container {
  --container-gutter: var(--home-banner-gutter);
}
#home-banner .banner-main-blocks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.125rem;
}
#home-banner .banner-background {
  --responsive-background-overlay-opacity: 1;
  --responsive-background-overlay-background:
  	linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
  	linear-gradient(180deg, #576a7e 22.417%, rgba(9, 57, 106, 0) 83.626%);
}
#home-banner .banner-background .responsive-background-bg {
  inline-size: max(100%, var(--home-banner-image-size));
  max-inline-size: none;
  margin-inline: calc(min(100% - var(--home-banner-image-size), 0px) / 2);
}
#home-banner .banner-body {
  inline-size: 100%;
  max-inline-size: var(--home-banner-text-size);
  margin-inline: auto;
}
#home-banner .banner-body-blocks {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-inline-size: none;
  gap: 0;
  text-align: center;
}
#home-banner .banner-body-blocks .banner-content,
#home-banner .banner-body-blocks .banner-buttons {
  margin-block-start: 0;
}
#home-banner {
  /* Selling points replace the shared secondary-heading bullets. */
}
#home-banner .secondary-heading:is(.secondary-heading-sps) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin-block-end: 0.625rem;
}
#home-banner .secondary-heading:is(.secondary-heading-sps)::before {
  content: none;
}
#home-banner .secondary-heading:is(.secondary-heading-sps) .secondary-heading-sp {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
#home-banner .secondary-heading:is(.secondary-heading-sps) .secondary-heading-sp:first-child {
  gap: 0.4375rem;
}
#home-banner .secondary-heading:is(.secondary-heading-sps) .secondary-heading-sp::before, #home-banner .secondary-heading:is(.secondary-heading-sps) .secondary-heading-sp::after {
  content: none;
}
#home-banner .secondary-heading:is(.secondary-heading-sps) .secondary-heading-sp-icon {
  display: block;
  inline-size: 1.959375rem;
  flex: 0 0 auto;
}
#home-banner .secondary-heading:is(.secondary-heading-sps) .secondary-heading-sp-icon img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
#home-banner .secondary-heading:is(.secondary-heading-sps) .secondary-heading-sp-text {
  font-size: 1rem;
  line-height: 1;
  font-family: var(--font-primary);
  color: var(--color-primary);
  text-transform: capitalize;
  font-weight: 700;
}
#home-banner .primary-heading {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-block: 0 0.5rem;
}
#home-banner .primary-heading,
#home-banner .banner-content {
  max-inline-size: 15.625rem;
}
#home-banner .banner-content {
  font-size: 1.25rem;
  line-height: 1;
  text-transform: capitalize;
  text-wrap: wrap;
  margin-block-end: 1rem;
}
#home-banner .banner-buttons {
  inline-size: 100%;
}
#home-banner .banner-buttons .button {
  inline-size: 100%;
  justify-content: center;
}
#home-banner .banner-rep {
  display: none;
  position: relative;
  isolation: isolate;
  inline-size: 100%;
  max-inline-size: var(--home-rep-size);
  margin-inline: auto;
  padding-block-start: calc(4.4375rem * var(--home-rep-scale));
}
#home-banner .banner-rep-container {
  margin-inline: var(--home-rep-card-inset);
  background-color: #f2f6fd;
  border: 1px solid var(--color-primary);
  border-radius: 0.34375rem;
}
#home-banner .banner-rep-figure {
  display: block;
  inline-size: calc(100% + 2px);
  block-size: calc(9.8125rem * var(--home-rep-scale));
  border-radius: 0.34375rem 0.34375rem 0 0;
  margin: -1px -1px 0;
}
#home-banner .banner-rep-figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: inherit;
}
#home-banner .banner-rep {
  /* The ribbon spans the card's outer width, with the supplied folded ends. */
}
#home-banner .banner-rep-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: calc(2.75rem * var(--home-rep-scale));
  margin-inline: calc(-1 * var(--home-rep-card-inset) - 1px);
  margin-block-start: calc(-1.08125rem * var(--home-rep-scale));
  background-color: var(--color-primary);
  border-radius: 0.1375rem;
  text-align: center;
}
#home-banner .banner-rep-heading::before, #home-banner .banner-rep-heading::after {
  content: "";
  position: absolute;
  inset-block-start: calc(-1.30625rem * var(--home-rep-scale));
  inline-size: calc(2.38157rem * var(--home-rep-scale));
  block-size: calc(2.01314rem * var(--home-rep-scale));
  background: center/contain no-repeat;
  z-index: -1;
}
#home-banner .banner-rep-heading::before {
  inset-inline-start: 0;
  background-image: url("images/banner-ribbon-left.svg");
  transform: scaleX(-1);
}
#home-banner .banner-rep-heading::after {
  inset-inline-end: 0;
  background-image: url("images/banner-ribbon-right.svg");
}
#home-banner .banner-rep-heading-text {
  font-size: calc(1.16875rem * var(--home-rep-scale));
  line-height: 1;
  font-family: var(--font-secondary);
  color: var(--color-dark-alt);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
#home-banner .banner-rep-awards, #home-banner .banner-rep-slider {
  --carousel-height: calc(5.625rem * var(--home-rep-scale));
  max-inline-size: calc(19.3125rem * var(--home-rep-scale));
  margin-inline: auto;
  margin-block-start: calc(1.45625rem * var(--home-rep-scale));
}
#home-banner .banner-rep-awards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: calc(1.4375rem * var(--home-rep-scale));
  padding-block-end: calc(1.5rem * var(--home-rep-scale));
}
#home-banner .banner-rep-awards > .banner-rep-award:nth-child(n+4) {
  --carousel-height: calc(2.9375rem * var(--home-rep-scale));
}
#home-banner .banner-rep-award, #home-banner .banner-rep-slide {
  inline-size: calc(var(--home-rep-award-width, 5.625rem) * var(--home-rep-scale));
  flex-shrink: 0;
}
#home-banner .banner-rep-award:nth-child(1), #home-banner .banner-rep-slide:nth-child(1) {
  --home-rep-award-width: 4.8125rem;
}
#home-banner .banner-rep-award:nth-child(2), #home-banner .banner-rep-slide:nth-child(2) {
  --home-rep-award-width: 5.625rem;
}
#home-banner .banner-rep-award:nth-child(3), #home-banner .banner-rep-slide:nth-child(3) {
  --home-rep-award-width: 5.6875rem;
}
#home-banner .banner-rep-award:nth-child(4), #home-banner .banner-rep-slide:nth-child(4) {
  --home-rep-award-width: 8.375rem;
}
#home-banner .banner-rep-award:nth-child(5), #home-banner .banner-rep-slide:nth-child(5) {
  --home-rep-award-width: 8.0625rem;
}
#home-banner .banner-rep-slide .banner-rep-award {
  inline-size: 100%;
}
#home-banner .banner-rep-slider {
  --swiper-custom-arrow-offset-x: 0rem;
  --swiper-pagination-bottom: 1.365rem;
  --swiper-pagination-bullet-horizontal-gap: 0.5rem;
  --swiper-pagination-color: var(--color-primary);
  --swiper-pagination-bullet-inactive-color: var(--color-light-alt);
  margin-block-end: 1.25rem;
}
#home-banner .banner-rep-icon {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: calc(8.8rem * var(--home-rep-scale));
  z-index: 1;
}
#home-banner .banner-rep-icon img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
@media only screen and (min-width: 48rem) {
  #home-banner {
    --home-banner-pad-start: 3.4375rem;
    --home-banner-pad-end: 11.1875rem;
    --home-banner-text-size: 41rem;
    --home-banner-image-size: 75rem;
    --home-banner-gutter: 3.5rem;
  }
  #home-banner .banner-main {
    min-block-size: 51.625rem;
  }
  #home-banner .banner-background {
    --responsive-background-overlay-background:
    	linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
    	linear-gradient(180deg, #576a7e 16.374%, rgba(9, 57, 106, 0) 56.14%);
  }
  #home-banner .secondary-heading:is(.secondary-heading-sps) {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 1.125rem;
  }
  #home-banner .primary-heading {
    font-size: 3.75rem;
    margin-block-end: 0.875rem;
  }
  #home-banner .primary-heading,
  #home-banner .banner-content {
    max-inline-size: none;
  }
  #home-banner .banner-content {
    margin-block-end: 1.625rem;
  }
  #home-banner .banner-buttons .button {
    inline-size: auto;
  }
  #home-banner .banner-rep {
    display: block;
  }
}
@media only screen and (min-width: 75rem) {
  #home-banner {
    --home-banner-pad-start: 1.9375rem;
    --home-banner-pad-end: 14.625rem;
    --home-banner-image-size: 87.5rem;
    --home-banner-gutter: 4.4375rem;
  }
  #home-banner .banner-main {
    min-block-size: 38.9375rem;
  }
  #home-banner .banner-main-blocks {
    flex-direction: row;
    justify-content: space-between;
    gap: 2.5rem;
  }
  #home-banner .banner-body {
    flex: 0 1 var(--home-banner-text-size);
    margin-inline: 0;
  }
  #home-banner .banner-body-blocks {
    align-items: flex-start;
    text-align: initial;
  }
  #home-banner .secondary-heading:is(.secondary-heading-sps) {
    justify-content: flex-start;
  }
  #home-banner .banner-rep {
    flex: 0 0 var(--home-rep-size);
    margin-inline: 0;
  }
}
@media only screen and (min-width: 87.5rem) {
  #home-banner {
    --home-banner-pad-start: 2.1875rem;
    --home-banner-pad-end: 23.0625rem;
    --home-banner-image-size: 112.5rem;
    --home-banner-gutter: 7.8125rem;
    --home-rep-scale: 0.86148;
  }
  #home-banner .banner-main {
    min-block-size: 50.125rem;
  }
  #home-banner .banner-body {
    margin-block-start: 1.75rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  #home-banner {
    --home-banner-pad-start: 2.8125rem;
    --home-banner-pad-end: 21.75rem;
    --home-banner-text-size: 48.625rem;
    --home-banner-image-size: 120rem;
    --home-banner-gutter: clamp(10.125rem, calc((100% - 82.5rem) / 2), 18.75rem);
    --home-rep-scale: 1;
  }
  #home-banner .banner-main {
    min-block-size: 53.4375rem;
  }
  #home-banner .banner-body {
    margin-block-start: 0;
  }
  #home-banner .primary-heading {
    font-size: 4.375rem;
  }
}

/*
* Home Section 1
-------------------------------------------------------------------------------- */
.home-section-1 {
  --section-banner-overlap: 9.9375rem;
  --section-pad-start: 9.9375rem;
  --section-services-size: 14.5rem;
  --section-truck-size: 20.81667rem;
  --section-truck-gap: 5.6875rem;
  --section-truck-overlap: 4.875rem;
  --section-truck-shift: -0.21875rem;
  --section-truck-height: calc(min(var(--section-truck-size), 100vi - 1.25rem) * 500.485 / 886.675);
  position: relative;
  padding-block-start: var(--section-pad-start);
  isolation: isolate;
}
.home-section-1 {
  /* Extend the waves over the banner using its existing overlap allowance. */
}
.banner-can-overlap:has(#home-banner) .home-section-1 {
  margin-block-start: calc(var(--layout-banner-offset, 0rem) - var(--section-banner-overlap));
}
.home-section-1 .section-container {
  --container-gutter: 0rem;
}
.home-section-1 .section-decoration {
  position: absolute;
  inset-block: 0 calc(var(--section-truck-height) - var(--section-truck-overlap));
  inset-inline: 0;
  z-index: -1;
  pointer-events: none;
}
.home-section-1 .section-decoration::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/services-wave-blue-mobile.svg") calc(50% + 1.15625rem) 4.29503rem/120.1875rem 4.02319rem no-repeat, url("images/services-wave-gradient-mobile.svg") calc(50% + 1.15625rem) top/120.1875rem 14.73358rem no-repeat;
}
.home-section-1 .section-decoration::after {
  content: "";
  position: absolute;
  inset: 8.263855rem 0 0;
  background: url("images/services-burst-mobile.svg") calc(50% + 1.15625rem) top/120.0625rem 62.08765rem no-repeat;
}
.home-section-1 .section-heading {
  font-size: 2.1875rem;
  line-height: 1;
  font-family: var(--font-secondary);
  color: var(--color-light);
  text-transform: capitalize;
  text-align: center;
  margin: 0;
}
.home-section-1 .section-services {
  --swiper-custom-arrow-offset-x: 0rem;
  --swiper-pagination-bottom: 1.875rem;
  --swiper-pagination-bullet-horizontal-gap: 0.625rem;
  --swiper-pagination-color: var(--color-primary);
  --swiper-pagination-bullet-inactive-color: var(--color-light-alt);
  inline-size: var(--section-services-size);
  max-inline-size: calc(100% - 1.25rem);
  margin-inline: auto;
  margin-block-start: 1.875rem;
}
.home-section-1 .section-figure {
  display: block;
  position: relative;
  inset-inline-start: var(--section-truck-shift);
  inline-size: var(--section-truck-size);
  max-inline-size: calc(100% - 1.25rem);
  margin-inline: auto;
  margin-block-start: var(--section-truck-gap);
  aspect-ratio: 886.675/500.485;
  isolation: isolate;
}
.home-section-1 .section-figure::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.27%;
  inset-block-start: 61.75%;
  inline-size: 98.59%;
  aspect-ratio: 874.205/157.465;
  background: url("images/services-truck-shadow.svg") center/contain no-repeat;
  transform: rotate(-4.57deg);
  z-index: -1;
}
.home-section-1 .section-figure img {
  display: block;
  inline-size: 99.02%;
  block-size: auto;
  margin-inline-start: 0.98%;
}
.home-section-1 {
  /* Service cards reuse includes/repeater-sp, with their entire surface linked. */
}
.home-section-1 .sp {
  display: block;
  padding-block-start: 0.9375rem;
  text-decoration: none;
}
.home-section-1 .sp-container {
  position: relative;
  transition: transform 400ms ease-out;
}
.home-section-1 .sp-icon {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  inline-size: 100%;
  block-size: 12.875rem;
  margin: 0;
  border-radius: 0.3125rem 0.3125rem 0 0;
  background-color: #bcda7d;
}
.home-section-1 .sp-icon::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(50% - 11.625rem);
  inset-block-start: -1.3125rem;
  inline-size: 23.25rem;
  block-size: 13.5625rem;
  z-index: -1;
  background: url("images/service-texture-rays.svg") center/contain no-repeat;
  transform: scaleY(-1);
  transition: transform 400ms ease-out;
}
.home-section-1 .sp-icon img, .home-section-1 .sp-icon svg {
  inline-size: auto;
  block-size: auto;
}
.home-section-1 .sp-icon svg [fill="#0197F2" i] {
  transition: fill 400ms ease-out;
}
.home-section-1 .sp-title {
  font-size: 1.25rem;
  line-height: 1;
  font-family: var(--font-primary);
  color: var(--color-secondary);
  text-transform: capitalize;
  font-weight: 800;
  text-align: center;
  padding: 1.625rem 0.625rem;
  border-radius: 0 0 0.3125rem 0.3125rem;
  background-color: var(--color-light);
}
.home-section-1 .sp-link {
  position: absolute;
  inset-block-start: 12.0625rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  inline-size: 1.8025rem;
  block-size: 1.8025rem;
  border-radius: 50%;
  background-color: var(--color-accent);
  transition: background-color 400ms ease-out;
}
.home-section-1 .sp-link::before {
  content: "";
  inline-size: 0.59869rem;
  block-size: 0.59872rem;
  background: url("images/service-arrow.svg") center/contain no-repeat;
  transform: rotate(45deg);
  transition: transform 400ms ease-out;
}
.home-section-1 .sp:is(:hover, :focus-visible) .sp-container {
  transform: translateY(-0.9375rem);
}
.home-section-1 .sp:is(:hover, :focus-visible) .sp-icon::before {
  transform: translateY(0.9375rem) rotate(-20deg) scale(var(--service-texture-scale, 1.5)) scaleY(-1);
}
.home-section-1 .sp:is(:hover, :focus-visible) .sp-icon svg [fill="#0197F2" i] {
  fill: var(--color-secondary-alt);
}
.home-section-1 .sp:is(:hover, :focus-visible) .sp-link {
  background-color: var(--color-secondary-alt);
}
.home-section-1 .sp:is(:hover, :focus-visible) .sp-link::before {
  transform: rotate(0deg);
}
.home-section-1 .sp:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
  .home-section-1 .sp .sp-container, .home-section-1 .sp .sp-icon::before, .home-section-1 .sp .sp-link, .home-section-1 .sp .sp-link::before,
  .home-section-1 .sp .sp-icon svg [fill="#0197F2" i] {
    transition: none;
  }
  .home-section-1 .sp:is(:hover, :focus-visible) .sp-container {
    transform: none;
  }
  .home-section-1 .sp:is(:hover, :focus-visible) .sp-icon::before {
    transform: scaleY(-1);
  }
}
.home-section-1 {
  /* Each Figma variant enlarges the same ray texture by a slightly different amount. */
}
.home-section-1 .section-services-slide:nth-child(1) {
  --service-texture-scale: 1.50871;
}
.home-section-1 .section-services-slide:nth-child(2) {
  --service-texture-scale: 1.36060;
}
.home-section-1 .section-services-slide:nth-child(3) {
  --service-texture-scale: 1.26846;
}
.home-section-1 .section-services-slide:nth-child(4) {
  --service-texture-scale: 1.30154;
}
.home-section-1 .section-services-slide:nth-child(5) {
  --service-texture-scale: 1.32359;
}
@media only screen and (min-width: 48rem) {
  .home-section-1 {
    --section-banner-overlap: 9.125rem;
    --section-pad-start: 12rem;
    --section-services-size: 30.625rem;
    --section-truck-size: 37.64717rem;
    --section-truck-gap: 3.625rem;
    --section-truck-overlap: 11.3125rem;
    --section-truck-shift: -0.84375rem;
  }
  .home-section-1 .section-decoration::before {
    background: url("images/services-waves.svg") center top/max(100%, 120.1875rem) 16.9375rem no-repeat;
  }
  .home-section-1 .section-decoration::after {
    inset-block-start: 9.5rem;
    background: url("images/services-burst.svg") center top/max(100.2%, 120.0625rem) 71.375rem no-repeat;
  }
  .home-section-1 .section-heading {
    font-size: 2.5rem;
  }
}
@media only screen and (min-width: 75rem) {
  .home-section-1 {
    --section-banner-overlap: 9.75rem;
    --section-pad-start: 12.6875rem;
    --section-services-size: 62.875rem;
    --section-truck-size: 45.8125rem;
    --section-truck-gap: 2.875rem;
    --section-truck-overlap: 11.375rem;
    --section-truck-shift: 0rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .home-section-1 {
    --section-banner-overlap: 9.1875rem;
    --section-pad-start: 12.25rem;
    --section-truck-gap: 3.625rem;
    --section-truck-overlap: 11.0625rem;
  }
  .home-section-1 {
    /* This artboard repeats the translucent wave decoration. */
  }
  .home-section-1 .section-decoration::before {
    background-image: url("images/services-waves.svg"), url("images/services-waves.svg");
  }
}
@media only screen and (min-width: 112.5rem) {
  .home-section-1 {
    --section-banner-overlap: 10.375rem;
    --section-pad-start: 12rem;
    --section-services-size: 79rem;
    --section-truck-size: 55.41719rem;
    --section-truck-gap: 2.375rem;
    --section-truck-overlap: 14.8125rem;
  }
  .home-section-1 .section-decoration::before {
    background-image: url("images/services-waves.svg");
  }
}

/*
* Home Section 2
-------------------------------------------------------------------------------- */
.home-section-2 {
  --section-content-size: 18.75rem;
  --section-awards-size: 18.75rem;
  --section-card-size: 18.75rem;
  --section-block-gap: 2.5rem;
  --section-awards-gap: 2.5rem;
  padding-block: 3.0625rem;
}
.home-section-2 .section-container {
  --container-gutter: max(1.875rem, (100% - var(--section-content-size)) / 2);
}
.home-section-2 .section-blocks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--section-block-gap);
  justify-items: center;
}
.home-section-2 .section-body {
  min-inline-size: 0;
  inline-size: 100%;
}
.home-section-2 .section-header {
  --fancy-border-height: 0.5rem;
  --fancy-border-margin-y: 1.25rem;
}
.home-section-2 .section-heading {
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--color-secondary);
  text-transform: capitalize;
  margin: 0;
}
.home-section-2 .section-content {
  margin-block-start: 2.8125rem;
}
.home-section-2 .section-card {
  inline-size: var(--section-card-size);
  max-inline-size: 100%;
}
.home-section-2 .section-figure {
  display: block;
  position: relative;
  z-index: 1;
  inline-size: 90.5433%;
  margin-inline: auto;
  border-radius: 0.1875rem 0.1875rem 0 0;
  overflow: hidden;
}
.home-section-2 .section-figure img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.home-section-2 .section-lead {
  font-size: 0.875rem;
  line-height: 1.3;
  font-family: var(--font-secondary);
  color: var(--color-dark-alt);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  margin-block: -5.1583% 0;
  padding: 1.33625rem 0.5rem 0.375rem;
  background: url("images/home-intro-ribbon-mobile.svg") center/100% 100% no-repeat;
}
.home-section-2 .section-services {
  font-size: 1rem;
  line-height: 1.25;
  color: var(--color-light);
  font-weight: 700;
  inline-size: 90.5433%;
  margin-inline: auto;
  padding: 1.16375rem 1.0625rem 1.5625rem;
  border: 1px solid var(--color-primary);
  border-radius: 0 0 0.1875rem 0.1875rem;
  background: linear-gradient(to top, var(--color-secondary-gradient-start), var(--color-secondary-gradient-end) 91.916%);
}
.home-section-2 .section-services ul {
  display: grid;
  row-gap: 0.9375rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.home-section-2 .section-services li {
  position: relative;
  padding-inline-start: 1.1875rem;
}
.home-section-2 .section-services li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.25rem;
  inline-size: 0.83058rem;
  block-size: 0.77125rem;
  background: url("images/home-intro-check.svg") center/contain no-repeat;
}
.home-section-2 .section-services li:nth-child(n+5)::before {
  inline-size: 0.95363rem;
  block-size: 0.88551rem;
  background-image: url("images/home-intro-check-alt.svg");
}
.home-section-2 .section-awards {
  inline-size: var(--section-awards-size);
  min-block-size: 10.4375rem;
  max-inline-size: calc(100vi - 3.75rem);
  margin-inline: auto;
  margin-block-start: var(--section-awards-gap);
}
.home-section-2 .section-awards .swiper {
  --carousel-height: 7.8125rem;
  --swiper-custom-arrow-offset-x: 0rem;
  --swiper-pagination-bottom: 2.25rem;
  --swiper-pagination-bullet-horizontal-gap: 0.5625rem;
  --swiper-pagination-color: var(--color-accent);
  --swiper-pagination-bullet-inactive-color: var(--color-light-alt);
}
.home-section-2 .section-awards .swiper-slide {
  inline-size: auto;
}
.home-section-2 .section-awards .carousel-item {
  inline-size: var(--carousel-image-width);
  max-inline-size: 100%;
  margin-inline: auto;
}
.home-section-2 .section-awards .carousel-item .carousel-item-image picture,
.home-section-2 .section-awards .carousel-item .carousel-item-image img {
  inline-size: 100% !important;
  block-size: 100% !important;
  object-fit: contain;
}
@media only screen and (min-width: 48rem) {
  .home-section-2 {
    --section-content-size: 35.1875rem;
    --section-card-size: 31.0625rem;
    --section-awards-size: 37.8125rem;
    --section-block-gap: 5rem;
    --section-awards-gap: 5.125rem;
    padding-block: 3.5625rem 2.875rem;
  }
  .home-section-2 .section-heading {
    font-size: 2.5rem;
  }
  .home-section-2 .section-figure {
    border-radius: 0.3125rem 0.3125rem 0 0;
  }
  .home-section-2 .section-lead {
    font-size: 1.25rem;
    margin-block-start: -5.23139%;
    padding: 2.5rem 1rem 0.8125rem;
    background-image: url("images/home-intro-ribbon.svg");
  }
  .home-section-2 .section-services {
    padding: 2.125rem 2.625rem 2.5625rem;
    border-radius: 0 0 0.3125rem 0.3125rem;
  }
  .home-section-2 .section-services ul {
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    grid-template-columns: 1fr 1.1fr;
    column-gap: 3.9375rem;
  }
  .home-section-2 .section-awards {
    margin-inline-start: calc((100% - var(--section-awards-size)) / 2);
  }
}
@media only screen and (min-width: 75rem) {
  .home-section-2 {
    --section-content-size: 65.6875rem;
    --section-awards-size: 56.8125rem;
    --section-block-gap: 6.25rem;
    padding-block: 5.70357rem 5.6875rem;
  }
  .home-section-2 .section-blocks {
    grid-template-columns: minmax(0, 1fr) var(--section-card-size);
    align-items: start;
  }
}
@media only screen and (min-width: 87.5rem) {
  .home-section-2 {
    --section-content-size: 72.5rem;
    --section-awards-size: 68.75rem;
    padding-block: 3.82857rem 5.375rem;
  }
  .home-section-2 .section-blocks {
    align-items: center;
  }
  .home-section-2 .section-heading {
    font-size: 2.8125rem;
    inline-size: calc(100% + 0.3125rem);
  }
}
@media only screen and (min-width: 112.5rem) {
  .home-section-2 {
    --section-content-size: 82.625rem;
    --section-awards-size: 82.625rem;
    --section-block-gap: 10.125rem;
    padding-block: 2.03219rem 10.3125rem;
  }
  .home-section-2 .section-heading {
    font-size: 3.25rem;
    inline-size: 100%;
  }
}

/*
* Home Section 3
-------------------------------------------------------------------------------- */
.home-section-3 {
  position: relative;
  isolation: isolate;
  padding-block: 11.429rem 3.308rem;
  color: var(--color-light);
  overflow: hidden;
}
.home-section-3 .section-container {
  --container-gutter: 0rem;
}
.home-section-3 .section-decoration {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("images/reviews-waves-mobile.svg") center top/max(100%, 120.1875rem) 15.25744rem no-repeat;
}
.home-section-3 .section-decoration::after {
  content: "";
  position: absolute;
  inset: 8.61399rem 0 0;
  background: var(--color-secondary) url("images/reviews-burst-mobile.svg") center 39.674%/max(100.5%, 120.5625rem) 168.4366% no-repeat;
}
.home-section-3 .section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding-inline: 1.25rem;
}
.home-section-3 .section-heading {
  font-size: 2.1875rem;
  line-height: 1;
  font-family: var(--font-secondary);
  color: inherit;
  text-align: center;
  max-inline-size: 25.6875rem;
  margin: 0;
}
.home-section-3 .section-testimonials {
  --swiper-custom-arrow-offset-x: 0rem;
  inline-size: min(19.6875rem, 100% - 2.5rem);
  margin-inline: auto;
  margin-block-start: 2.5rem;
}
.home-section-3 .section-slide {
  inline-size: 100%;
}
.home-section-3 .section-footer {
  margin-block-start: 2.5rem;
  padding-inline: 0.625rem;
}
@media only screen and (min-width: 48rem) {
  .home-section-3 {
    padding-block: 13.5625rem 5.67419rem;
  }
  .home-section-3 .section-decoration {
    background-image: url("images/reviews-waves.svg");
    background-size: max(100%, 120.1875rem) 16.9375rem;
  }
  .home-section-3 .section-decoration::after {
    inset-block-start: 9.5625rem;
    background-image: url("images/reviews-burst.svg");
  }
  .home-section-3 .section-heading {
    font-size: 3rem;
    max-inline-size: 33.9375rem;
  }
  .home-section-3 .section-testimonials {
    inline-size: 100%;
  }
  .home-section-3 .section-slide {
    inline-size: 23.1875rem;
  }
}
@media only screen and (min-width: 75rem) {
  .home-section-3 {
    padding-block: 14.4375rem 4.79919rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .home-section-3 {
    padding-block: 12.4375rem 5.54919rem;
  }
  .home-section-3 .section-heading {
    font-size: 3.625rem;
    max-inline-size: 39.3125rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .home-section-3 {
    margin-block-start: -9.5rem;
    padding-block: 12.625rem 5.04919rem;
  }
  .home-section-3 .section-heading {
    font-size: 3.75rem;
  }
}

/* Home Section 4: Service areas and offers
-------------------------------------------------------------------------------- */
.home-section-4 {
  --section-content-size: 19.4375rem;
  --section-offers-size: 20.6529rem;
  padding-block-start: 4.375rem;
}
.home-section-4 .section-container {
  --container-gutter: max(1.5rem, (100% - var(--section-content-size)) / 2);
}
.home-section-4 .section-header {
  display: grid;
  gap: 1.875rem;
  text-align: center;
}
.home-section-4 .section-heading, .home-section-4 .section-offers-heading {
  font-size: 2.1875rem;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-secondary);
  text-transform: capitalize;
  font-weight: 400;
  margin: 0;
}
.home-section-4 .section-intro {
  display: grid;
  gap: 1.0625rem;
  justify-items: center;
}
.home-section-4 .section-images {
  position: relative;
  display: grid;
  gap: 0.86208rem;
  margin-block-start: 3.5rem;
}
.home-section-4 .section-image, .home-section-4 .section-offers-image {
  display: block;
  border-radius: 0.3125rem;
  overflow: hidden;
}
.home-section-4 .section-image img, .home-section-4 .section-offers-image img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.home-section-4 .section-image:nth-child(2), .home-section-4 .section-mascot {
  display: none;
}
.home-section-4 .section-services {
  display: grid;
  gap: 2.5rem;
  margin-block-start: 3.5rem;
}
.home-section-4 .section-content {
  padding-inline: 1.875rem 0.1875rem;
}
.home-section-4 .section-content:last-child {
  padding-inline: 2.0625rem 0.6875rem;
}
.home-section-4 .section-offers-container {
  position: relative;
  z-index: 1;
  --container-gutter: max(0.75rem, (100% - var(--section-offers-size)) / 2);
  margin-block-start: 3.75rem;
}
.home-section-4 .section-offers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.home-section-4 .section-offers-header {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  inline-size: 15rem;
  max-inline-size: 100%;
  margin-inline: 1.6875rem 0;
  margin-block-end: 1.5625rem;
}
.home-section-4 .section-offers-icon {
  display: block;
  flex: 0 0 3.3125rem;
}
.home-section-4 .section-offers-icon img {
  display: block;
}
.home-section-4 .section-offers-image {
  grid-area: 2/1;
  align-self: start;
}
.home-section-4 .section-coupons {
  position: relative;
  z-index: 1;
  grid-area: 2/1;
  inline-size: min(18.0625rem, 100% - 2.5rem);
  min-inline-size: 0;
  margin-inline: auto;
  margin-block-start: 69.6027%;
}
@media only screen and (min-width: 48rem) {
  .home-section-4 {
    --section-content-size: 37.4375rem;
    --section-offers-size: 40.3936rem;
    --section-background-start: 39rem;
    --section-background-end: 15.18rem;
    padding-block-start: 6.5625rem;
    background: linear-gradient(to bottom, transparent var(--section-background-start), #f2f6fd var(--section-background-start), #f2f6fd calc(100% - var(--section-background-end)), transparent calc(100% - var(--section-background-end)));
  }
  .home-section-4 .section-container, .home-section-4 .section-offers-container {
    position: relative;
    inset-inline-start: 0.96875rem;
  }
  .home-section-4 .section-heading, .home-section-4 .section-offers-heading {
    font-size: 2.5rem;
  }
  .home-section-4 .section-intro {
    max-inline-size: 35.375rem;
    margin-inline: auto;
  }
  .home-section-4 .section-images {
    grid-template-columns: 225.775fr 14.312fr 225.775fr 14fr;
    gap: 0.86208rem 0;
    inline-size: 29.99144rem;
    margin-inline: auto;
    margin-block-start: 4.625rem;
  }
  .home-section-4 .section-image:first-child {
    grid-column: 1/-1;
  }
  .home-section-4 .section-image:nth-child(2) {
    display: block;
    grid-column: 1;
  }
  .home-section-4 .section-image:nth-child(3) {
    grid-column: 3;
  }
  .home-section-4 .section-services {
    gap: 2.8125rem;
    margin-block-start: 6rem;
  }
  .home-section-4 .section-content {
    padding-inline-end: 1.1875rem;
  }
  .home-section-4 .section-content:last-child {
    padding-inline-end: 1rem;
  }
  .home-section-4 .section-offers-container {
    margin-block-start: 9.6875rem;
  }
  .home-section-4 .section-offers {
    grid-template-columns: minmax(0, 1fr) 29.0811rem;
  }
  .home-section-4 .section-offers-header {
    grid-column: 1/-1;
    inline-size: auto;
    margin-inline: 0;
    margin-block-end: 2.1875rem;
  }
  .home-section-4 .section-offers-image {
    grid-area: 2/2;
  }
  .home-section-4 .section-coupons {
    grid-area: 2/1/3/-1;
    inline-size: 19.875rem;
    margin-inline: 0;
    margin-block-start: 2.375rem;
    align-self: start;
  }
}
@media only screen and (min-width: 75rem) {
  .home-section-4 {
    --section-content-size: 59.9375rem;
    --section-offers-size: 62.73985rem;
    --section-background-start: 38.70357rem;
    --section-background-end: 10.8125rem;
    padding-block-start: 9.82857rem;
  }
  .home-section-4 .section-container, .home-section-4 .section-offers-container {
    inset-inline-start: 0;
  }
  .home-section-4 .section-header {
    grid-template-columns: 27.5625rem 26.0625rem;
    gap: 5rem;
    align-items: center;
    text-align: start;
  }
  .home-section-4 .section-intro {
    justify-items: start;
  }
  .home-section-4 .section-images {
    inline-size: 100%;
    grid-template-columns: 661fr 311fr 311fr;
    gap: 1.438%;
  }
  .home-section-4 .section-image:nth-child(n) {
    grid-column: auto;
  }
  .home-section-4 .section-services {
    grid-template-columns: 467fr 398fr;
    gap: 5rem;
    margin-inline: 0.4375rem;
    margin-block-start: 7rem;
  }
  .home-section-4 .section-content, .home-section-4 .section-content:last-child {
    padding-inline-end: 0;
  }
  .home-section-4 .section-offers-container {
    margin-block-start: 7rem;
  }
  .home-section-4 .section-offers {
    grid-template-columns: minmax(0, 1fr) 31.86485rem;
    grid-template-rows: auto 1fr;
  }
  .home-section-4 .section-offers-header {
    grid-area: 1/1/2/-1;
    margin-block: 0.4375rem 1.8125rem;
    z-index: 1;
    justify-self: start;
  }
  .home-section-4 .section-offers-image {
    grid-area: 1/2/3/3;
  }
  .home-section-4 .section-coupons {
    inline-size: 40.5536rem;
    margin-block-start: 0;
  }
}
@media only screen and (min-width: 87.5rem) {
  .home-section-4 {
    --section-background-start: 32.25rem;
    padding-block-start: 6.1875rem;
  }
  .home-section-4 .section-heading {
    font-size: 2.8125rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .home-section-4 {
    --section-content-size: 82.5625rem;
    --section-offers-size: 80.6875rem;
    --section-background-start: 38rem;
    --section-background-end: 16.875rem;
    padding-block-start: 9rem;
  }
  .home-section-4 .section-header {
    grid-template-columns: 37.75rem 29.625rem;
    gap: 9.875rem;
  }
  .home-section-4 .section-heading {
    font-size: 3.25rem;
  }
  .home-section-4 .section-intro {
    margin-inline: 0;
  }
  .home-section-4 .section-mascot {
    display: block;
    position: absolute;
    inline-size: 23.875rem;
    inset-inline-start: -5rem;
    inset-block-start: 5.3125rem;
  }
  .home-section-4 .section-mascot img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }
  .home-section-4 .section-services {
    grid-template-columns: 580fr 583fr;
    gap: 6.5rem;
    margin-inline: 1.75rem 1.625rem;
    margin-block-start: 7.625rem;
  }
  .home-section-4 .section-offers-container {
    margin-block-start: 9.5rem;
    position: relative;
    inset-inline-start: 0.9375rem;
  }
  .home-section-4 .section-offers {
    grid-template-columns: minmax(0, 1fr) 41.1875rem;
  }
  .home-section-4 .section-offers-header {
    margin-block-start: 0.6875rem;
  }
  .home-section-4 .section-coupons {
    inline-size: 50.875rem;
  }
}

/* Home Section 5: Why choose Wright Choice Plumbing
-------------------------------------------------------------------------------- */
.home-section-5 {
  position: relative;
  padding-block: 3.5rem 4.25rem;
}
.home-section-5 .section-container {
  --container-gutter: max(1.25rem, (100% - 17.1875rem) / 2);
}
.home-section-5 .section-header {
  display: grid;
  justify-items: center;
  gap: 1.3125rem;
  text-align: center;
}
.home-section-5 .section-heading {
  font-size: 2rem;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-secondary);
  font-weight: 400;
  margin: 0;
}
.home-section-5 .section-blocks {
  display: grid;
  grid-template-columns: minmax(0, 16.25rem);
  justify-content: center;
  gap: 0.9375rem;
  margin-block-start: 3.875rem;
}
.home-section-5 {
  /* Benefit cards reuse the theme's selling-point partial. */
}
.home-section-5 .sp {
  margin: 0;
  min-inline-size: 0;
  border: 1px solid var(--color-accent);
  border-radius: 0.3125rem;
  background-color: #f2f6fd;
  text-align: center;
}
.home-section-5 .sp-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1875rem;
  min-block-size: 12.5rem;
  padding: 2.5rem 1.8125rem 1.875rem;
}
.home-section-5 .sp-icon {
  display: grid;
  place-items: center;
  block-size: 3rem;
}
.home-section-5 .sp-icon img {
  display: block;
  inline-size: auto;
  block-size: auto;
  max-block-size: 3rem;
}
.home-section-5 .sp-title {
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--color-secondary);
  text-transform: capitalize;
  font-weight: 800;
  margin: 0;
}
@media only screen and (min-width: 48rem) {
  .home-section-5 {
    --section-wave-overlap: 16.93018rem;
    padding-block: 6rem 9.50732rem;
  }
  .home-section-5::before {
    content: "";
    position: absolute;
    inset-block-start: calc(-1 * var(--section-wave-overlap));
    inset-inline: 0;
    block-size: 36.25rem;
    background: url("images/home-benefits-wave.svg") center top/max(100%, 120.1875rem) 100% no-repeat;
    pointer-events: none;
  }
  .home-section-5 .section-container {
    --container-gutter: max(1.875rem, (100% - 33.4375rem) / 2);
    position: relative;
  }
  .home-section-5 .section-header {
    max-inline-size: 29.6875rem;
    margin-inline: auto;
  }
  .home-section-5 .section-heading {
    font-size: 2.1875rem;
    line-height: 1.2;
  }
  .home-section-5 .section-heading br {
    display: none;
  }
  .home-section-5 .section-blocks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 75rem) {
  .home-section-5 {
    --section-wave-overlap: 15.25rem;
    padding-block: 7rem 8.48395rem;
  }
  .home-section-5 .section-container {
    --container-gutter: max(1.875rem, (100% - 67.8125rem) / 2);
  }
  .home-section-5 .section-header {
    max-inline-size: 56.5625rem;
  }
  .home-section-5 .section-heading {
    font-size: 2.5rem;
    line-height: 1.2;
  }
  .home-section-5 .section-heading br {
    display: initial;
  }
  .home-section-5 .section-blocks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 87.5rem) {
  .home-section-5 {
    --section-wave-overlap: 16.12781rem;
    padding-block-end: 9.05969rem;
  }
  .home-section-5 .section-heading {
    font-size: 2.8125rem;
    line-height: 1.2;
  }
}
@media only screen and (min-width: 112.5rem) {
  .home-section-5 {
    --section-wave-overlap: 20.125rem;
    padding-block: 8.4375rem 9.8125rem;
  }
  .home-section-5 .section-heading {
    font-size: 3.75rem;
    line-height: 1.2;
  }
}

/* Home Section 6: Maintenance plans and financing
-------------------------------------------------------------------------------- */
.home-section-6 {
  --section-content-size: 20.3125rem;
  --section-photo-size: 50rem;
  --section-plan-gap: 1.7068rem;
  padding-block: 4.1875rem 7rem;
  min-block-size: 86.625rem;
  overflow: clip;
  color: var(--color-light);
}
.home-section-6 .section-container {
  --container-gutter: max(1rem, (100% - var(--section-content-size)) / 2);
}
.home-section-6 .section-background {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  inline-size: max(100%, var(--section-photo-size));
  transform: translateX(-50%);
  z-index: -1;
}
.home-section-6 .section-heading {
  font-size: 2.1875rem;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: inherit;
  font-weight: 400;
  max-inline-size: 16.6875rem;
  margin: 0 auto 1.25rem;
  text-align: center;
}
.home-section-6 .section-heading strong {
  font-weight: inherit;
  color: var(--color-primary);
}
.home-section-6 .section-blocks {
  display: grid;
  gap: 1.125rem;
}
.home-section-6 .section-block {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  border-radius: 0.24383rem;
  background-color: var(--color-light);
  color: var(--color-dark);
  overflow: hidden;
}
.home-section-6 .section-block-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 3.125rem clamp(1.875rem, 13.89vi, 3.125rem);
}
.home-section-6 .section-block-header {
  display: grid;
  gap: 0.48766rem;
  inline-size: 100%;
  text-align: center;
}
.home-section-6 .section-block-heading {
  font-size: 1.375rem;
  line-height: 1.2;
  font-family: var(--font-secondary);
  color: var(--color-secondary);
  text-transform: uppercase;
  font-weight: 400;
  margin: 0;
}
.home-section-6 .section-block-subheading {
  font-size: 1rem;
  line-height: 1.2;
  color: var(--color-secondary-alt);
  font-weight: 800;
  margin: 0;
}
.home-section-6 .section-block-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.53642rem;
  min-block-size: 3.0625rem;
  padding: 0.585rem 0.625rem;
  background-color: var(--color-secondary);
}
.home-section-6 .section-block-logo {
  flex: 0 0 5.21793rem;
}
.home-section-6 .section-block-logo img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.home-section-6 .section-block-palette-dark {
  background-image: linear-gradient(to top, var(--color-secondary-gradient-start), var(--color-secondary-gradient-end) 91.916%);
  color: var(--color-light);
}
.home-section-6 .section-block-palette-dark .section-block-main {
  padding-block-end: 2.6875rem;
}
.home-section-6 .section-block-palette-dark .section-block-heading {
  color: inherit;
}
.home-section-6 .section-block-palette-dark .section-block-subheading {
  color: var(--color-light-alt);
}
@media only screen and (min-width: 48rem) {
  .home-section-6 {
    --section-content-size: 31.1875rem;
    --section-photo-size: 75rem;
    padding-block: 4rem 6.99688rem;
    min-block-size: 67.125rem;
  }
  .home-section-6 .section-heading {
    font-size: 2.5rem;
    line-height: 1.2;
    max-inline-size: none;
    text-align: start;
  }
  .home-section-6 .section-blocks {
    max-inline-size: 29.74709rem;
    margin-inline: auto;
  }
  .home-section-6 .section-block-main {
    align-items: flex-start;
    padding: 3.16975rem 3.09663rem 2.63338rem;
  }
  .home-section-6 .section-block-header {
    text-align: start;
  }
  .home-section-6 .section-block-heading {
    font-size: 1.75rem;
    line-height: 1.2;
  }
  .home-section-6 .section-block-footer {
    min-block-size: 2.43831rem;
  }
  .home-section-6 .section-block-palette-dark {
    min-block-size: 23.75rem;
  }
  .home-section-6 .section-block-palette-dark .section-block-main {
    padding-inline: 2.80403rem;
    padding-block-end: 2.125rem;
  }
}
@media only screen and (min-width: 75rem) {
  .home-section-6 {
    --section-content-size: 60.875rem;
    --section-photo-size: 87.5rem;
    padding-block: 4.3125rem 6.875rem;
    min-block-size: 43.875rem;
  }
  .home-section-6 .section-heading {
    font-size: 2.8125rem;
    line-height: 1.2;
    margin-block-end: 2.1875rem;
  }
  .home-section-6 .section-blocks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-inline-size: none;
  }
  .home-section-6 .section-block {
    min-block-size: 23.75rem;
  }
  .home-section-6 .section-block-main {
    padding-block: 3.04321rem 2.50674rem;
  }
  .home-section-6 .section-block-palette-dark .section-block-main {
    padding-block-start: 3.16975rem;
  }
}
@media only screen and (min-width: 87.5rem) {
  .home-section-6 {
    --section-photo-size: 112.8125rem;
    padding-block: 5.3125rem 11.125rem;
    min-block-size: 49.125rem;
  }
}
@media only screen and (min-width: 112.5rem) {
  .home-section-6 {
    --section-content-size: 77.75rem;
    --section-photo-size: 120rem;
    --section-plan-gap: 2.1875rem;
    padding-block: 7.6875rem 14.625rem;
    min-block-size: 61rem;
  }
  .home-section-6 .section-heading {
    font-size: 3.75rem;
    line-height: 1.2;
  }
  .home-section-6 .section-blocks {
    gap: 1.5rem;
  }
  .home-section-6 .section-block {
    min-block-size: 27.5rem;
    border-radius: 0.3125rem;
  }
  .home-section-6 .section-block-main {
    padding: 4.0625rem 3.96875rem 3.375rem;
  }
  .home-section-6 .section-block-header {
    gap: 0.625rem;
  }
  .home-section-6 .section-block-heading {
    font-size: 2.1875rem;
    line-height: 1.2;
  }
  .home-section-6 .section-block-subheading {
    font-size: 1.125rem;
    line-height: 1.2;
  }
  .home-section-6 .section-block-footer {
    min-block-size: 3.125rem;
    gap: 0.6875rem;
    padding-block: 0.75rem;
  }
  .home-section-6 .section-block-logo {
    flex-basis: 6.6875rem;
  }
  .home-section-6 .section-block-palette-dark .section-block-main {
    padding: 4.0625rem 3.59375rem 2.125rem;
  }
}

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