:where([data-etch-element="container"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto;
}
:where([data-etch-element="flex-div"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#dwc-header {
  padding-block: 0;
  z-index: 9999;

  body:has([dark-body-bg='true']&) main.etch-builder-block {
    background-color: #15151e;
  }

  /* liquid glass  */
  [data-liquid-glass='true']& .dwc-nest-header:not(.etch-builder-block) {
    --overlay-header-shadow: var(--liquid-shadow);
    border: var(--liquid-glass-border);

    html:not(.dwc-mobile) & {
      backdrop-filter: url(#dwc-liquid-glass) saturate(var(--liquid-glass-saturate));

      /* Safari Specific Fallback Override */
      -webkit-backdrop-filter: blur(var(--header-blur)) saturate(var(--liquid-glass-saturate));

      /* Firefox Specific Fallback Override */
      @supports (-moz-appearance: none) {
        backdrop-filter: blur(var(--header-blur)) saturate(var(--liquid-glass-saturate));
      }
    }

    .dwc-mobile &::before {
      display: block !important;
      content: '';
      position: absolute;
      inset: 0;
      inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + 0px);
      z-index: -1;
      backdrop-filter: url(#dwc-liquid-glass) saturate(var(--liquid-glass-saturate));
      border-radius: var(--overlay-header-radius);

      /* Safari Specific Fallback Override */
      -webkit-backdrop-filter: blur(var(--header-blur)) saturate(var(--liquid-glass-saturate));

      /* Firefox Specific Fallback Override */
      @supports (-moz-appearance: none) {
        backdrop-filter: blur(var(--header-blur)) saturate(var(--liquid-glass-saturate));
      }
    }
  }
}
.dwc-skip-link {
  position: fixed;
  top: 0;
  inset-inline-start: 1rem;
  z-index: 100000;
  transform: translateY(-150%);

  /* Appearance when revealed */
  padding: var(--skip-link-padding);
  background: var(--skip-link-bg);
  color: var(--skip-link-color);
  font-size: var(--skip-link-font-size);
  font-weight: var(--skip-link-weight);
  line-height: 1.2;
  text-decoration: none;
  border-radius: 0 0 0.5rem 0.5rem;
  box-shadow: var(--skip-link-shadow);

  transition: transform 0.2s ease;
  
  &:hover{
    background: var(--skip-link-hover-bg);
  color: var(--skip-link-hover-color);
  }

  /* Reveal on focus */
  &:focus,
  &:focus-visible {
    transform: translateY(calc(0px + var(--wp-admin--admin-bar--height, 0px)));
    outline: var(--skip-link-outline);
    outline-offset: 2px;
  }

  .dwc-skip-links:has(&) {
    display: contents;
  }

  /* Respect reduced-motion preferences */
  @media (prefers-reduced-motion: reduce) {
    & {
      transition: none;
    }
  }
}
.dwc-header-vars {
  --fallback-section-padding: 83px;
  --dropdown-content-width: 75rem;
  --dropdown-content-default-width: 1200px;
  --header-inline-padding: var(--gutter);
  --header-block-padding: 0;
  --header-min-height: var(--header-height);
  --header-bottom-border: 1px solid color-mix(in oklch, var(--white, #fff) 46%, transparent) !important;

  /* when liquid glass is enabled */
  --liquid-glass-shadow: inset 0 0 2px 1px color-mix(in oklch, white 8%, transparent), inset 0 0 10px 4px color-mix(in oklch, white 10%, transparent), 0 6px 24px color-mix(in oklch, #11111a 6%, transparent), 0 12px 40px color-mix(in oklch, #11111a 5%, transparent);

  /*# ===== SKIP LINKS ===== */
  --skip-link-bg: #111;
  --skip-link-hover-bg: #111;
  --skip-link-font-size: 1rem;
  --skip-link-color: var(--white, #fff);
  --skip-link-hover-color: var(--white, #fff);
  --skip-link-padding: 0.75rem 1.25rem;
  --skip-link-outline: 3px solid var(--primary, #4da3ff);
  --skip-link-radius: 0 0 0.5rem 0.5rem;
  --skip-link-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  --skip-link-weight: 600;

  /*# ===== ADAPTIVE HEIGHT/STRIPE ====== */
  --adaptive-height-bg: var(--dropdown-content-bg); /*also controls stripe background*/
  --adaptive-height-border: var(--dropdown-content-border-size) solid var(--dropdown-content-border-color);
  --adaptive-height-shadow: 0 0 30px rgb(39 50 59 / 10%);

  /*# ===== STRIPE only ===== */
  --stripe-border-radius: 1rem;

  /*# ===== STICKY/OVERLAY HEADER SPECIAL STYLES ===== */
  /*===== this styles only apply when Special Sticky/Overlay Styles and sticky header is enabled =====*/

  /*# NOTE: */
  /* to change the values that are set on the component options, use !important e.g.   
   --overlay-header-bg:black !important;
  */

  /*## SVG STYLES BEFORE SCROLLING  */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:not(.scroll-up, .scroll-down) & :is(path, .cls-1):not(.dwce-dropdown path) {
    /* fill: white; */
  }

  /*## SVG STYLES BEFORE SCROLLING - HOVER */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:not(.scroll-up, .scroll-down) &:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover) :is(path, .cls-1):not(.dwce-dropdown path) {
    /* fill: hsl(from #fff h s l / 0.3); */
  }

  /*## SVG STYLES AFTER SCROLLING  */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:is(.scroll-up, .scroll-down) & :is(path, .cls-1):not(.dwce-dropdown path) {
    /* fill: url(#GradientFill_1); */
  }

  /*## SVG STYLES AFTER SCROLLING - HOVER */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:is(.scroll-up, .scroll-down) &:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover) :is(path, .cls-1):not(.dwce-dropdown path) {
    /* fill: hsl(from #000 h s l / 0.3); */
  }

  /*## STYLES BEFORE SCROLLING */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom &:not(:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover)) {
    /* add any of the variables above and update value*/
  }

  /*## STYLES BEFORE SCROLLING - HOVER */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:not(.scroll-up, .scroll-down) &:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover) {
    /* add any of the variables above and update value*/
  }

  /*## STYLES AFTER SCROLLING */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:is(.scroll-up, .scroll-down) &:not(:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover)) {
    /* add any of the variables above and update value*/
  }

  /*## STYLES AFTER SCROLLING - HOVER*/
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:is(.scroll-up, .scroll-down) &:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover) {
    /* add any of the variables above and update value*/
  }

  /*## MOBILE STYLES WHEN MENU IS OPEN*/
  .dwc-mobile:has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom &:has(.dwce-toggle.is-active) {
    /* add any of the variables above and update value*/
    /* --overlay-header-bg: white !important; */
  }

  /*# ===== END STICKY/OVERLAY HEADER SPECIAL STYLES ===== */

  /*# ===== MOBILE ONLY STYLES ===== */
  /* add and modify varibales for mobile breakpoint OR use media query if you experience FOUC*/

  html:is(.dwc-mobile:not(:has([data-offcanvas='true'])), .dwc-offcanvas-mobile) & {
    /* --header-inline-padding: 1rem; */
  }

  /*# SITE OVERRIDES: solid header on pages without a hero (data-no-overlay) */
  body:has([data-no-overlay]) & {
    --header-bg: var(--accent) !important;
  }
}
.dwc-nest-header {
  &:not(.dwc-mobile [data-overlay-header-mobile='true']:has([data-slide-in-direction='top']) &) {
    padding-inline: var(--header-inline-padding);
    padding-block: var(--header-block-padding);
  }

  background-color: var(--header-bg);
  transition:
    opacity 0.1s,
    transform 0.4s,
    background-color 0.4s;

  :is(.scroll-down, .scroll-up) [data-sticky-header='true'] & {
    background-color: var(--header-bg-sticky);
    --overlay-header-bg: var(--header-bg-sticky);
  }
}
.dwc-nest-header__container {
  justify-content: space-between;
  flex-direction: row;
  min-height: var(--header-min-height);
  margin-inline: auto;
  max-inline-size: var(--content-width);
  align-items: center;

  /*when overlay header is active on mobile, and menu slides in from top, use the header padding  */
  .dwc-mobile [data-overlay-header-mobile='true']:has([data-slide-in-direction='top']) & {
    padding-inline: var(--header-inline-padding);
    padding-block: var(--header-block-padding);
  }
}
.dwc-nest-menu__logo {
  --centered-logo-inline-padding: 2rem;
  padding-block: 0rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 9999;

  /* logo size */

  & > :is(svg, img) {
    width: auto;
    height: 50px;
  }

  /* when in centered logo */
  .dwc-header-logo-item &,
  .dwc-nav-nested-items:has(li &) & {
    padding-inline: var(--centered-logo-inline-padding);
  }
}
#dwce-nav-nested {
  @media (width <= 64rem) {
    inline-size: auto;
  }
}
.dwc-nav-wrapper {
  inline-size: 100%;
  max-inline-size: 100%
}
.dwc-nest-menu-top {
  padding-inline: var(--menu-item-inline-padding);
  padding-block: var(--menu-item-block-padding);
  &:not(.dwc-mobile &){
    display:none;
  }
}
.dwc-nest-menu__mobile-logo {
  transition: opacity 0.45s 0.15s var(--mobile-menu-ttf);
  block-size: var(--dwc-nest-header-height);
  max-block-size: var(--mobile-logo-size);
}
.dwce-toggle {
  --toggle-align: 0;

  &[data-flip-toggle='true'] {
    --toggle-align: auto;
    --toggle-horizontal-offset: auto;

    & .dwce-toggle__label-wrap {
      order: -1;
    }
  }

  &[data-toggle-style='techno'] {
    --toggle-line-height: 2px;
    --toggle-line-variance: 1px;
    --iw: var(--toggle-size);
    --aw: var(--toggle-size);

    &:not(.is-active) .dwca-inner {
      inline-size: 75%;
    }
  }

  &[data-equalize='true']:not([data-toggle-style='techno'], .is-active) {
    --toggle-line-variance: 1px;
    --iw: var(--toggle-size);
    --aw: var(--toggle-size);
  }
}
.dwc-nest-toggle--close {
  margin-inline-start: auto !important;
}
.dwc-nav-vars {
  /*# ===== BACK TEXT ===== */
  --back-text-clr: var(--black, #000);
  --back-text-font-size: 1rem;
  --back-text-font-weight: 500;
  --back-text-transform: uppercase;
  --back-text-bg: var(--mobile-menu-bg);
  --back-text-icon-size: 20px;

  /*# ===== MENU ITEMS GAP ===== */
  --menu-items-gap: 0rem;

  /*# ===== MOBILE ONLY STYLES ===== */
  /* Add & update varibale values for mobile breakpoint */
  html:is(.dwc-mobile:not(:has([data-offcanvas='true'])), .dwc-offcanvas-mobile) & {
    --mobile-menu-radius: var(--overlay-header-radius);
  }

  /*# =====  #MOBILE/OFFCANVAS extras ===== */

  /*## Transitions */
  --mobile-menu-ttf: cubic-bezier(0.3, 0.68, 0.1, 1);

  /*# BREAKIN CONTAINER  (see docs) */
  & .breakin-container {
    padding-inline: var(--menu-item-inline-padding);
    padding-block: var(--menu-item-block-padding);
    background: var(--white, #fff);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    &:has(.dwc-is-cta-2):not(:has(.dwc-is-cta-3)) {
      flex-direction: row;
      gap: 1rem;
    }
  }
}
.dwc-megamenu-instruction {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.etch-h576kui {
  font-size: var(--text-m);
}
.dwc-dropdown-items-vars {
  /*## DROPDOWN CONTENT */
  --dropdown-content-bg: var(--white, #fff);
  --dropdown-content-block-padding: var(--dropdown-content-inline-padding);
  --dropdown-content-inline-padding: min(calc(var(--dropdown-item-radius) / 3), 0.5em);

  /*## DEFAULT STATE */
  --dropdown-item-clr: var(--black, #000);
  --dropdown-item-font-size: var(--menu-item-font-size);
  --dropdown-item-bg: initial;
  --dropdown-indent-bg: rgb(40 60 150 / 5%);
  --dropdown-heading-clr: var(--primary-clr);

  /*## HOVER STATE */
  --dropdown-item-hover-clr: var(--menu-item-hover-clr);
  --dropdown-item-hover-bg: hsl(from var(--primary-clr) h s l / 5%);

  /*## EXPANDED STATE (PARENT) - mobile */
  /* when [data-submenu-reveal="expand"] */
  --dropdown-expanded-clr: var(--white, #fff);
  --dropdown-expanded-bg: var(--black, #000);

  /*## PADDING | GAP | INDENT */
  --dropdown-item-inline-padding: var(--menu-item-inline-padding);
  --dropdown-item-block-padding: var(--menu-item-block-padding);
  --dropdown-indent: 0.6rem;
  --dropdown-indent-item-pad-offset: 0.5;
  --dropdown-indent-line: solid 1px rgb(40 60 150 / 20%);

  /*## RADIUS */
  --dropdown-item-radius: var(--dropdown-content-border-radius);
  /*  --dropdown-content-border-radius is set in the DWC Nav component props > DROPDOWN > Dropdown Content Radius
  When stripe style is enabled, the dropdown content radius inherits the stripe radius, found in DWC Header variables
  */

  /*# ===== APPEARANCE: BUTTON ===== */

  &[appearance='button'] > .dwc-submenu-toggle {
    --menu-item-bg: var(--black, #000);
    --menu-item-clr: var(--white, #fff);
    --menu-item-hover-clr: var(--white, #fff);
    --menu-item-hover-bg: var(--black, #000);
    --menu-item-radius: 50vw;
    --menu-item-hover-border-height: 0;
    --icon-size: 0;
    --icon-clr: var(--white, #fff);
    --icon-hover-clr: var(--white, #fff);
    --menu-item-inline-padding: 1.5rem;
    --menu-item-block-padding: 1rem;
    --chevron-clr: var(--icon-clr);
    --chevron-hover-clr: var(--icon-hover-clr);
    --chevron-size: var(--icon-size);

    /*## mobile only*/
    --menu-item-width: 200px;
    --menu-item-border: solid 1px transparent;
    --menu-item-hover-border: solid 1px transparent;
  }

  /*# ===== APPEARANCE: ICON ===== */

  &[appearance='icon'] {
    --icon-button-inline-padding: var(--menu-item-inline-padding);
  }

  &[appearance='icon'] > .dwc-submenu-toggle {
    --menu-item-bg: var(--black, #000);
    --menu-item-clr: var(--white, #fff);
    --menu-item-hover-clr: var(--white, #fff);
    --menu-item-hover-bg: var(--black, #000);
    --icon-clr: var(--white, #fff);
    --icon-hover-clr: var(--white, #fff);
    --icon-size: 0.875rem;
    --menu-item-inline-padding: 1.1rem;
    --button-max-diameter: 2.8125rem;
    --menu-item-radius: 50vw;
    --menu-item-border: solid 1px transparent;
    --menu-item-hover-border: solid 1px transparent;
    --chevron-clr: var(--icon-clr);
    --chevron-hover-clr: var(--icon-hover-clr);
    --chevron-size: var(--icon-size);
  }

  /*# ===== STICKY/OVERLAY HEADER SPECIAL STYLES ===== */
  /*===== this styles only apply when the header div attribute [data-sticky-overlay-special-style] attribute is set to true, and sticky header is enabled =====*/

  /*## STYLES BEFORE SCROLLING - HOVER */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:not(.scroll-up, .scroll-down) .dwce-nav-nested:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover) .dwc-nav-nested-items & {
    /* add any of the variables above and update value*/
  }

  /*## STYLES AFTER SCROLLING - HOVER*/
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:is(.scroll-up, .scroll-down) .dwce-nav-nested:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover) .dwc-nav-nested-items & {
    /* add any of the variables above and update value*/
  }

  /*# ===== MOBILE ONLY STYLES ===== */
  /* add and modify varibales for mobile breakpoint */

  html:is(.dwc-mobile:not(:has([data-offcanvas='true'])), .dwc-offcanvas-mobile) & {
    --dropdown-item-font-size: var(--menu-item-font-size);
  }
}
.dwc-top-level-items-vars {
  /*## DEFAULT STATE */
  --menu-item-clr: var(--white, #fff);
  --menu-item-font-size: var(--text-m);
  --menu-item-font-weight: 400;
  --menu-item-bg: initial;

  /*## HOVER STATE */
  --menu-item-hover-clr: var(--primary-clr);
  --menu-item-hover-bg: transparent;
  --menu-item-hover-border-bg: var(--menu-item-active-border-bg);
  --menu-item-hover-border-height: var(--menu-item-active-border-height);

  /*## ACTIVE STATE - Current Page Link*/
  /*(to exclude a link from this style, 
  add the attribute 'dwc-exclude' to its container)*/
  --menu-item-active-clr: var(--menu-item-clr); /* site: one-page anchors all match "/" */
  --menu-item-active-bg: initial;
  --menu-item-active-border-bg: var(--primary-clr);
  --menu-item-active-border-height: 0px;

  /*## PADDING | GAP */
  --menu-item-inline-padding: clamp(0.75rem, 0.61rem + 0.56vw, 1.1rem);
  --menu-item-block-padding: 1rem;
  /*when menu item hover effect is set to 'Text Roll'*/
  --roll-padding: 1rem;

  /*## BORDERS | RADIUS */
  --menu-item-border: initial;
  --menu-item-radius: 50vw;

  /*## CHEVRON (dropdown arrow) */
  --chevron-size: 1.2em;
  --chevron-clr: var(--menu-item-clr);
  --chevron-hover-clr: var(--menu-item-hover-clr);
  --chevron-gap: 0.625rem;

  /*# ===== CTA BUTTONS (ALL) ===== */

  /*## non last button breakout items   */
  --breakout-border: solid 1px color-mix(in oklch, var(--primary-clr) 50%, transparent);
  --breakout-block-padding: 0.25em;
  --breakout-inline-padding: 0.5em;

  /*## all cta buttons padding */
  --cta-inline-padding: calc(var(--menu-item-inline-padding) * 1.3);
  --cta-block-padding: var(--menu-item-block-padding);

  /*## all cta buttons max width on mobile */
  --cta-width: 100%;

  /*## gap offset between 2 or 3 cta buttons on mobile/offcanvas/sidebar*/
  --cta-gap-offset: 0;

  /*## gap between breakout cta and menu toggle on mobile */
  --cta-breakout-gap: 1.25rem;

  /*# ===== CTA 1 (LAST) ===== */

  /*## DEFAULT STATE */
  --menu-cta-clr: var(--black, #000);
  --menu-cta-bg: var(--primary);
  --menu-cta-inline-padding: var(--btn-padding-inline);
  --menu-cta-block-padding: var(--btn-padding-block);
  --menu-cta-border: var(--btn-border-width) solid transparent;
  --menu-cta-radius: 50vw;

  /*## HOVER STATE */
  --menu-cta-hover-clr: var(--white, #fff);
  --menu-cta-hover-bg: transparent;

  /*# ===== CTA 2 (SECOND) ===== */

  /*## DEFAULT STATE */
  --menu-cta-2-clr: var(--white, #fff);
  --menu-cta-2-bg: var(--black, #000);
  --menu-cta-2-inline-padding: var(--cta-inline-padding);
  --menu-cta-2-block-padding: var(--cta-block-padding);
  --menu-cta-2-border: var(--menu-cta-border);
  --menu-cta-2-radius: var(--menu-cta-radius);

  /*## HOVER STATE */
  --menu-cta-2-hover-clr: var(--white, #fff);
  --menu-cta-2-hover-bg: var(--primary-clr);

  /*# ===== CTA 3 (THIRD) ===== */

  /*## DEFAULT STATE */
  --menu-cta-3-clr: var(--white, #fff);
  --menu-cta-3-bg: var(--black, #000);
  --menu-cta-3-inline-padding: var(--cta-inline-padding);
  --menu-cta-3-block-padding: var(--cta-block-padding);
  --menu-cta-3-border: var(--menu-cta-border);
  --menu-cta-3-radius: var(--menu-cta-radius);

  /*## HOVER STATE */
  --menu-cta-3-hover-clr: var(--white, #fff);
  --menu-cta-3-hover-bg: var(--primary-clr);

  /*# ===== STICKY/OVERLAY HEADER SPECIAL STYLES ===== */
  /*===== this styles only apply when the header div attribute [data-sticky-overlay-special-style] attribute is set to true, and sticky header is enabled =====*/

  /*## STYLES BEFORE SCROLLING */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:not(.scroll-up, .scroll-down) .dwc-nav-nested-items > & {
    /* add any of the variables above and update value*/
  }

  /*## STYLES BEFORE SCROLLING - HOVER */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:not(.scroll-up, .scroll-down) .dwce-nav-nested:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover) .dwc-nav-nested-items > & {
    /* add any of the variables above and update value*/
  }

  /*## STYLES AFTER SCROLLING */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:is(.scroll-up, .scroll-down) .dwce-nav-nested:not(:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover)) .dwc-nav-nested-items > & {
    /* add any of the variables above and update value*/
  }

  /*## STYLES AFTER SCROLLING - HOVER*/
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:is(.scroll-up, .scroll-down) .dwce-nav-nested:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover) .dwc-nav-nested-items > & {
    /* add any of the variables above and update value*/
  }

  /*## BADGE STYLES AFTER SCROLLING */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:is(.scroll-up, .scroll-down) .dwce-nav-nested:not(:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover)) .dwc-nav-nested-items > & .dwc-menu-item-badge {
    /* --badge-color: #fff !important;
    --badge-bg-color: var(--primary-clr) !important; */
  }

  /*## BADGE STYLES AFTER SCROLLING - HOVER*/
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:is(.scroll-up, .scroll-down) .dwce-nav-nested:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover) .dwc-nav-nested-items > & .dwc-menu-item-badge {
    /* 
    --badge-color: #fff !important;
    --badge-bg-color: gray !important;  
    */
  }

  /*# ===== MOBILE ONLY STYLES ===== */
  /* add and modify varibales for mobile breakpoint */

  html:is(.dwc-mobile:not(:has([data-offcanvas='true'])), .dwc-offcanvas-mobile) & {
    --menu-item-font-size: 1.125rem;
    --menu-item-border: 1px solid rgba(0, 0, 0, 0.1);
    --menu-item-clr: var(--black, #000);
    --menu-item-hover-clr: var(--white, #fff);
    --menu-cta-clr: var(--primary);
    --menu-cta-bg: var(--black, #000);
    --menu-cta-hover-clr: var(--black, #000);
  }

  /*# ===== SITE OVERRIDES (no MMPro variable exists for these) ===== */
  & a:not(.dwc-is-cta) {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  }

  & a.dwc-is-cta {
    line-height: var(--btn-line-height);
    letter-spacing: 0.05em;

    &:hover {
      --menu-cta-border: var(--btn-border-width) solid currentColor;
    }
  }

  html:not(.dwc-mobile) & a.dwc-is-cta {
    transition: var(--btn-transition, var(--transition)) !important;
  }
}
.dwc-tabbed-nav-vars {
  /*## TAB LIST */
  --tab-list-width: 15.625rem;
  --tab-list-wrapper-bg: rgb(0 0 0 / 4%);
  --tab-list-inline-padding: 0px;
  --tab-list-block-padding: 1.75rem;

  /*## TABS */
  --tab-list-item-clr: var(--black, #000);
  --tab-list-item-font-size: 0.875rem;
  --tab-list-item-font-weight: 500;
  --tab-list-item-inline-padding: var(--menu-item-inline-padding, 0.75rem);
  --tab-list-item-block-padding: 0.75rem;
  --tab-list-item-radius: 0px;

  /*## OPEN OR HOVERED TAB */
  --tab-list-item-active-clr: var(--black, #000);
  --tab-list-item-active-bg: var(--white, #fff);

  /*## ARROW */
  --tab-arrow-clr: gray;
  --tab-arrow-size: 1rem;

  /*## LABEL ICON (DWC Tab › LABEL ICON) */
  --tab-icon-size: 1.5rem;
  --tab-icon-gap: 0.75rem;
  --tab-icon-clr: currentColor;

  /*## CONTENT */
  --tab-content-bg: var(--tab-list-item-active-bg);
  --tab-content-height: 28.125rem;
  --tab-content-padding: 1.75rem;
  --tab-content-width: 100%;

  /*## DIVIDER (Divider prop) */
  --tab-divider-clr: rgb(0 0 0 / 20%);
  --tab-divider-width: 1px;
  --tab-divider-inset: 0px;

  /*## BLEED (Bleed prop) */
  --bleed-bg: var(--tab-list-item-active-bg);
  --bleed-height: 2.75rem;

  /*## MOBILE: tabs look like the mobile menu's items */
  html:is(.dwc-mobile:not(:has([data-offcanvas='true'])), .dwc-offcanvas-mobile) & {
    --tab-list-wrapper-bg: transparent;
    --tab-list-item-clr: var(--dropdown-item-clr, #000);
    --tab-list-item-active-clr: var(--dropdown-item-hover-clr, var(--dropdown-item-clr, #000));
    --tab-list-item-active-bg: var(--dropdown-item-hover-bg, transparent);
    --tab-arrow-clr: var(--chevron-clr, currentColor);
    --tab-content-bg: var(--mobile-menu-background, var(--white, #fff));
  }

}
.mega-menu-shop__panel {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(9.375rem, 100%), 1fr));
  align-items: start;
}
.mega-menu-shop__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mega-menu-shop__heading {
  margin: 0;
  padding-block-end: 0.5rem;
  border-block-end: solid 1px rgb(0 0 0 / 12%);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mega-menu-shop__links {
  display: grid;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mega-menu-shop__link {
  display: block;
  padding-block: 0.25rem;
  color: inherit;
  text-decoration: none;

  &:hover,
  &:focus-visible {
    color: var(--primary-clr, crimson);
  }
}
.mega-menu-shop__card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.375rem;
  min-block-size: 12.5rem;
  padding: 1.25rem;
  border-radius: 0.5rem;
  color: white;
  background: linear-gradient(135deg, var(--primary-clr, crimson), color-mix(in srgb, var(--primary-clr, crimson), black 45%));

  @container (inline-size < 30rem) {
    grid-column: 1 / -1;
    min-block-size: 8.75rem;
  }
}
.mega-menu-shop__card-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}
.mega-menu-shop__card-txt {
  margin: 0;
  font-size: 0.875rem;
}
.mega-menu-shop__card-link {
  align-self: flex-start;
  margin-block-start: 0.375rem;
  color: inherit;
  font-weight: 600;
  text-underline-offset: 0.2em;

  &:hover,
  &:focus-visible {
    color: inherit;
  }
}
.mega-menu-nova__content-inner {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  background-color:white;

  :has(> &) {
    container-type: inline-size;
  }

  @container (inline-size >= 67.5rem) {
    grid-template-columns: 0.35fr auto;
  }
}
.mega-menu-nova__content-group {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 1rem;

  :has(> &) {
    container-type: inline-size;
  }

  @container (inline-size > 64rem) {
    border-right: solid 1px silver;
  }
}
.mega-menu-nova__dropdown-title {
  inline-size: 100%;
  border-bottom: solid 1px silver;
  padding-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
}
.mega-menu-nova__btn {
  padding-inline: 1.5em;
  padding-block: 0.5em;
  background-color: white;
  border: solid var(--primary-clr, crimson) 1px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  line-height: 1;

  &:hover {
    background-color: var(--primary-clr, crimson);
    color: white;

    & svg path {
      stroke: white;
    }
  }

  & svg {
    /* --multiplier is define in :root, it flips rotate for RTL layout */
    rotate: calc(var(--multiplier, 1) * -90deg);
    inline-size: 1.125rem;
  }
}
.nav-group-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.mega-menu-nova__nav-group {
  padding: 1rem;
  display: flex;
  flex-direction: row;
  gap: 1rem;
	align-items: start;
}
.mega-menu-nova__title-icon {
  width: 30px;
  height: auto;
}
.mega-menu-nova__nav-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  inline-size:100%;
}
.mega-menu-nova__li {
  font-weight: 600;
  color: black;
  display: flex;
  align-items: baseline;
  letter-spacing: 0;
  justify-content: center;
  list-style-type: none;
  /* Removes default bullets */
  position: relative;
  padding-inline-start: 20px;
  flex-direction: column;
  /* Space for custom bullet */

  &::before {
    content: '•';
    /* Custom bullet (can be changed) */
    position: absolute;
    inset-inline-start: 0;
    color: var(--menu-item-hover-clr);
    /* Adjust bullet color */
    font-size: 16px;
  }

  &:hover a {
    color: var(--primary-clr, crimson);
  }
}
.mega-menu-nova__link {
  font-size: 1rem;
  font-weight: 400;
  color: black;
  padding-inline: 0rem;
  padding-block: 0.5rem;
  inline-size: 100%;
  text-decoration: none;
}
.mega-menu-quantum__content-inner {
  display: grid;
  align-items: initial;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  grid-gap: 1rem;
  width: 100%;
  background-color: #ffffff;
  padding-block: 1rem;
  container-type: inline-size;


  @container (inline-size < 768px) {
    & {
      grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)) !important;
    }
  }
}
.mega-menu-quantum__content-group {
  padding-inline: 1rem;
  padding-block-start: 1rem;
  inline-size: 100%;
  row-gap: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: start;

  @container (width > 1041px) {
    & {
      border-right: 1px solid lightgray;
    }
  }

  @container (width <= 1040px) {
    & {
      grid-column: 1/-1;
    }

    & > img {
      max-block-size: 300px;
      object-fit: cover;
      object-position: bottom;
      inline-size: 100%;
    }
  }
}
.mega-menu-quantum__dropdown-title {
  font-size: 1.125rem;
  font-weight: 500
}
.mega-menu-quantum__txt--large {
  font-size: 16px;
}
.mega-menu-quantum__btn {
  inline-size: 100%;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--content-gap, 0.5rem);
  background-color: black;
  color: white;
  text-transform: capitalize;
  padding-block: 0.5rem;
  padding-inline: 1rem;
  margin-top: auto;
  text-decoration: none;

  &:hover {
    background-color: var(--primary-clr, crimson);
    color: white;
  }

  & svg path {
    stroke: white;
  }
}
.mega-menu-quantum-link__icon {
  /* --multiplier is define in :root, it flips rotate for RTL layout */
  rotate: calc(var(--multiplier, 1) * 270deg); 
  inline-size: 1.125rem;
}
.h-ruled-grid {
  --gap: 1rem;
  --line-thickness: 1px;
  --line-color: #d5d5d5;
  --line-offset: calc(var(--gap) / 10);
  gap: var(--gap);
  overflow: hidden;
  display: grid;
  align-items: initial;
  grid-column: span 3;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));

  & > div {
    position: relative;
  }

  & > div::before,
  & > div::after {
    content: '';
    background-color: var(--line-color);
    position: absolute;
  }

  & > div::before {
    width: var(--line-thickness);
    height: 100%;
    inset-block: calc(var(--gap) / 2);
    left: calc(var(--line-offset) * -1);
  }

  & > div::after {
    width: 100vw;
    height: var(--line-thickness);
    top: calc(var(--line-offset) * -1);
    left: 0;
  }

  & > div:last-child::before,
  & > div:last-child::after {
    display: none;
  }

  @container (width <= 1040px) {
    & {
      grid-column: 1/-1;
    }
  }
}
.mega-menu-quantum__nav-group {
  padding: 1rem;
  position: relative;
  gap: 1rem;
}
.mega-menu-quantum__link {
  padding-inline: 0rem;
  padding-block: 0.5rem;
  font-weight: 600;
  color: #000;
  display: flex;
  align-items: center;
  letter-spacing: 0;
  text-decoration: none;
  font-size: 1rem;
  flex-direction: row;

  /* clickable parent */

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    cursor: pointer !important;
    display: flex;
    z-index: 1;
  }

  &:hover {
    color: var(--primary-clr, crimson);
    
    & svg path{
      stroke:var(--primary-clr, crimson)
    }
  }

  & svg {
    transition: transform 0.25s;
  }

  &:hover svg {
    transform: translateY(0.25em);
  }
}
.mega-menu-quantum__txt {
  font-size: 12px;
  font-weight: 500;
}
#mega-menu-quantum__nav-group--a {
  background: rgb(241 241 241);
      grid-column: 1/-1;
    display: grid;
    align-items: initial;
    grid-template-columns: subgrid;
}
.mega-menu-quantum__nav-group--b {
  padding: 0;
}
.mega-menu-quantum__media-group {
  & img {
    border-radius: 0;
    height: 100%;
    width:100%;
    object-fit: cover;
  }

  @container (width > 500px) {
    & {
      grid-column: span 2;
    }
  }

  display: grid;
  align-items: initial;
  grid-gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr));
  grid-auto-rows: 100px;
  align-content: center;
}
#etch-o9wuqtr {
  gap: 1rem;
}
.dwc-nest-toggle--open {
  gap: var(--label-gap);
}
.etch-hzzm98j {
  position: relative;
}
.dwce-toggle__label {
  font-size: var(--label-font-size);
  color: var(--label-color);
  text-transform: uppercase;
  font-weight: 500;
}
.dwc-toggle-vars {
  /*# ===== STICKY/OVERLAY HEADER SPECIAL STYLES ===== */
  /*===== this styles only apply when the header div attribute [data-sticky-overlay-special-style] attribute is set to true, and sticky header is enabled =====*/

  /*## STYLES BEFORE SCROLLING */
  html:has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style], .dwce-nav-nested.dwc-open)) .dwc-headroom:not(.scroll-up, .scroll-down) & {
    /* 
    --toggle-color: white !important;
    --toggle-bg: color-mix(in oklch, white 10%, transparent) !important; 
    --label-color: white !important;
    */
  }

  /*## STYLES BEFORE SCROLLING - OPEN */
  html:has([data-sticky-overlay-special-style='true'][data-sticky-header='true'] .dwce-nav-nested.dwc-open):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:not(.scroll-up, .scroll-down) & {
    /* --toggle-color: black !important; */
  }

  /*## STYLES AFTER SCROLLING */
  html:has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:is(.scroll-up, .scroll-down) .dwce-nav-nested:not(:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover)) & {
    /* add any of the toggle variables and update value*/
  }

  /*## STYLES AFTER SCROLLING - OPEN */
  html:has([data-sticky-overlay-special-style='true'][data-sticky-header='true'] .dwce-nav-nested.dwc-open):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:is(.scroll-up, .scroll-down) & {
    /* --toggle-color: red !important; */
  }
}
.site-title {
  color: var(--white, #fff);
  font-weight: 600;
  font-size: clamp(1.0625rem, 0.63rem + 1.85vw, 1.8125rem);
  line-height: var(--heading-line-height);

  &:hover {
    color: var(--white, #fff);
  }
}
.hero {
  background-image:
    linear-gradient(80deg, color-mix(in oklch, var(--accent) 91%, transparent), color-mix(in oklch, var(--accent-ultra-dark) 22%, transparent)),
    url("../assets/handlair-pano.jpg");
  background-size: cover;
  background-position: center top;
  color: var(--white);
  padding-block-start: calc(var(--section-space-xl) + var(--header-height));
  padding-block-end: var(--section-space-xl);
}
.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-inline-size: 60%;

  @media (width < 768px) {
    max-inline-size: 100%;
  }
}
.hero__heading {
  color: var(--white);
  font-size: var(--h3);
  font-weight: 400;
}
.hero__headline {
  color: var(--white);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--h1);
  font-weight: 800;
  line-height: var(--h1-line-height, 1.1);
}
.about {
  border-block-start: 0.5rem solid var(--primary);
}
.about__layout {
  display: grid;
  grid-template-columns: 28fr 72fr;
  gap: var(--space-l);
  align-items: center;

  @media (width < 768px) {
    grid-template-columns: 1fr;
  }
}
.about__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;

  & img {
    inline-size: auto;
    max-inline-size: 100%;
    block-size: auto;
  }

  @media (width < 768px) {
    order: 2;
  }
}
.about__caption {
  font-size: var(--text-s);
  text-align: center;
}
.about__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.about__heading {
  color: var(--black);
}
.gallery {
  padding-inline: 0;

  & > .dwc-slider-wrapper {
    inline-size: 100%;
  }
}
.gallery__heading {
  font-size: var(--text-l);
  font-weight: 400;
  letter-spacing: 0.33em;
  text-align: center;
  padding-inline: var(--gutter);
  text-transform: uppercase;

  @media (width < 768px) {
    letter-spacing: 0.15em;
  }
}
.contact {
  background-color: var(--neutral-ultra-light);
}
.contact__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;

  @media (width < 768px) {
    grid-template-columns: 1fr;
  }
}
.contact__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.contact__heading {
  color: var(--secondary);
}
.contact__divider {
  inline-size: 30%;
  margin: 0;
  border: 0;
  border-block-start: 2px solid var(--neutral-semi-light);
}
.contact__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact__item {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  font-size: var(--text-m);
  font-weight: 600;
}
.contact__icon {
  flex-shrink: 0;
  inline-size: 1.25em;
  block-size: 1.25em;
  color: var(--primary);
}
.contact__hours {
  margin: 0;
  padding: 0;
  font-size: var(--text-s);
  list-style: none;
}
.contact__hours-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: var(--space-xs);
  border-block-start: 1px solid var(--neutral-light);
}
.contact__card {
  padding: var(--space-xs);
  background-color: var(--white);
  border: 2px solid var(--neutral-light);
  border-radius: var(--radius);
}
.contact__map {
  display: block;
  inline-size: 100%;
  min-block-size: 29rem;
  border: 0;
}
.site-footer {
  padding-block: var(--space-m);
  padding-inline: var(--gutter);
  background-color: var(--black);
  color: var(--white);
  text-align: center;
}
.site-footer__text {
  margin: 0;
  font-size: var(--text-s);
}
.dwc-slider-wrapper {
  min-block-size: var(--slider-wrapper-height);
  background-color: var(--slider-wrapper-bg);
  overflow-x: clip;
}
.slider-wrapper-instructions {
  display: flex;
  flex-direction: column;
  min-block-size: 20vh;
  max-block-size: none;
  align-items: center;
	justify-content: center;
}
.splide {
  --gutter: initial;
  --section-padding-block: initial;
  gap: 0;
  /* overflow: clip; */
  /* block-size: calc(var(--slide-height-active) + (var(--slider-padding-block) * 2)); */
  & .splide__track {
    padding-block: var(--slider-padding-block);
  }

  &[data-static-layout] {
    padding-inline: var(--slider-padding-inline);
  }

  & .splide__slide {
    display: flex;
    perspective: var(--slide-perspective);
  }

  &[data-overflow='true'] .splide__track {
    overflow: visible !important;
  }

  [data-slider-wrapper] & {
    inline-size: 100%;
  }

  & .slide-content {
    block-size: 100%;
    inline-size: min(100%, 100vw);
  }

  /*# INSIDE ETCH  */

  /*### SCROLL BAR  */

  @supports (scrollbar-width: auto) {
    html:has(&) {
      scrollbar-color: inherit;
    }
  }

  .etch-builder-block .splide {
    scrollbar-width: thin !important;
    scrollbar-color: #4a4a4a #1a1a1a;
  }

  .etch-builder-block.splide__track::-webkit-scrollbar {
    width: 8px;
    height: 12px;
  }

  .etch-builder-block.splide__track::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 10px;
  }

  .etch-builder-block.splide__track::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 10px;
    transition: background 0.3s ease;
  }

  .etch-builder-block.splide__track:hover::-webkit-scrollbar-thumb {
    background: linear-gradient(to left, #ff4d6a, blue) !important;
  }

  .etch-builder-block.splide__track::-webkit-scrollbar-thumb:hover {
    background: #5a5a5a;
  }
  /*### SCROLLBAR ENDS  */

  /*# INSIDE ETCH ENDS  */
}
.dwc-slider-controls-wrapper {
  display: flex;
}
.splide__slide {
  & > div:has(.slide-placeholder-info) {
    min-block-size: 200px;
    background-color: color-mix(in oklch, black 30%, transparent);
    background-image: radial-gradient(circle, white 1px, transparent 1px);
    background-size: 24px 24px;
    height: 100%;
  }
}
.slider-navigation-vars {
  /* Controls styles for built in slider navigation elements only: 
  - Arrows (nav buttons) 
  - Pagination
  - Play/Pause button
  - Progress
*/

  /*# ALL ARROWS  */

  /*## Normal */
  --arrow-bg: rgba(255, 255, 255, 0.06);
  --arrow-clr: color-mix(in oklch, white 50%, transparent);
  --arrow-radius: 50%;
  --arrow-width: 2.75rem;
  --arrow-height: var(--arrow-width);
  --arrow-padding: 0;
  --arrow-aspect-ratio: 1;
  --arrow-icon-size: 1.125rem;
  --arrow-bg-blur: 10px;
  --arrow-border: 1px solid rgba(255, 255, 255, 0.1);
  --arrow-opacity: 0;
  --arrow-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /*## Hover */
  --arrow-hover-bg: color-mix(in oklch, var(--primary) 20%, transparent);
  --arrow-hover-clr: var(--white, white);
  --arrow-hover-opacity: 1;
  --arrow-hover-border-clr: var(--primary, #ff4d6a);

  /*## POSITIONING  */

  /*### PREV ARROW  */
  --prev-arrow-top: 50%;
  --prev-arrow-bottom: auto;
  --prev-arrow-right: auto;
  --prev-arrow-left: 0.875rem;
  --prev-arrow-transform: translateY(-50%);

  /*### NEXT ARROW  */
  --next-arrow-top: 50%;
  --next-arrow-bottom: auto;
  --next-arrow-right: 0.875rem;
  --next-arrow-left: auto;
  --next-arrow-transform: translateY(-50%);

  /*# PAGINATION  */

  /*## WRAPPER  */
  --pagination-position: absolute;
  --pagination-padding: 12px 14px;
  --pagination-bg: rgba(0, 0, 0, 0.35);
  --pagination-bg-blur: 8px;
  --pagination-radius: 1.25rem;
  --pagination-gap: 0.5rem;

  /*### POSITIONING  */
  --pagination-top: auto;
  --pagination-bottom: 1rem;
  --pagination-left: 50%;
  --pagination-right: auto;
  --pagination-transform: translateX(-50%);

  /*## DOTS  */

  /*### Normal  */
  --dot-size: 8px;
  --dot-radius: 50%;
  --dot-clr: rgba(255, 255, 255, 0.2);
  --dot-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /*### Hover  */
  --dot-hover-clr: rgba(255, 255, 255, 0.5);

  /*### Active */
  --dot-clr-active: var(--primary, #ff4d6a);
  --dot-transform-active: scale(1.3);

  /*# PLAY/PAUSE BUTTON  */

  /*## Normal */
  --play-pause-size: 32px;
  --play-pause-radius: 50vw;
  --play-pause-border: 1px solid rgba(255, 255, 255, 0.1);
  --play-pause-clr: var(--white, white);
  --play-pause-bg: rgba(0, 0, 0, 0.4);
  --play-pause-bg-blur: 8px;

  /*## Hover */
  --play-pause-hover-bg: color-mix(in oklch, var(--primary) 20%, transparent);
  --play-pause-hover-border-clr: var(--primary, #ff4d6a);

  /*## POSITIONING  */
  --play-pause-top: auto;
  --play-pause-bottom: 14px;
  --play-pause-left: auto;
  --play-pause-right: 14px;
  --play-pause-z-index: 10;

  /*# PROGRESS  */

  /*## Normal */
  --progress-fill-clr: var(--primary, #ff4d6a);
  --progress-fill-clr-2: var(--primary-ultra-light, #ff8fa3); /* bar progress*/
  --progress-bg: rgba(0, 0, 0, 0.4); /* non cirular counter*/
  --progress-bg-blur: 8px; /* non cirular counter*/
  --progress-border-radius: 20px; /* non cirular counter*/
  --progress-border: 1px solid rgba(255, 255, 255, 0.08); /* non cirular counter*/
  --progress-padding: 4px 12px; /* non cirular counter*/
  --progress-track-clr: rgba(255, 255, 255, 0.1);
  --progress-separator-clr: var(--progress-clr-total);
  --progress-separator-gap: 0.1em;
  --progress-separator-size: var(--progress-font-size-total);

  /*## Current text */
  --progress-clr-current: var(--primary, #ff4d6a);
  --progress-font-size-current: 0.8rem;

  /*## Total text */
  --progress-clr-total: #8888a0;
  --progress-font-size-total: 0.6rem;

  /*## POSITIONING  */
  --progress-top: auto;
  --progress-bottom: 0;
  --progress-left: 14px;
  --progress-right: auto;
  --progress-z-index: 10;

  /*### Counter  */
  & [data-auto-generated][data-progress-type='counter'] {
    --progress-top: auto;
    --progress-bottom: 12px;
    --progress-left: auto;
    --progress-right: 12px;
  }

  /*### Circular  */
  & [data-auto-generated][data-progress-type='circular'] {
    --progress-top: 14px;
    --progress-bottom: auto;
    --progress-left: 14px;
    --progress-right: auto;
  }

  /*# LIGHTBOX  */

  --lightbox-bg: color-mix(in oklch, black 90%, transparent);
  --lightbox-z: 99999;
  --lightbox-close-size: 2.75rem;
  --lightbox-padding: clamp(16px, 4vw, 48px);
  --lightbox-img-height: 90vh;
  --lightbox-arrow-bg: color-mix(in oklch, white 12%, transparent);
  --lightbox-arrow-hover-bg: color-mix(in oklch, white 25%, transparent);
  --lightbox-clr: #fff;
  --lightbox-slide-height: 70vh;
}
.dwc-slider-vars-o73c4f {
  /* Controls styles for built in slider navigation elements only: 
  - Arrows (nav buttons) 
  - Pagination
  - Play/Pause button
  - Progress
*/

  /*# ALL ARROWS  */

  /*## Normal */
  --arrow-bg: rgba(255, 255, 255, 0.06);
  --arrow-clr: color-mix(in oklch, white 50%, transparent);
  --arrow-radius: 50%;
  --arrow-width: 2.75rem;
  --arrow-height: var(--arrow-width);
  --arrow-padding: 0;
  --arrow-aspect-ratio: 1;
  --arrow-icon-size: 1.125rem;
  --arrow-bg-blur: 10px;
  --arrow-border: 1px solid rgba(255, 255, 255, 0.1);
  --arrow-opacity: 0;
  --arrow-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /*## Hover */
  --arrow-hover-bg: color-mix(in oklch, var(--primary) 20%, transparent);
  --arrow-hover-clr: var(--white, white);
  --arrow-hover-opacity: 1;
  --arrow-hover-border-clr: var(--primary, #ff4d6a);

  /*## POSITIONING  */

  /*### PREV ARROW  */
  --prev-arrow-top: 50%;
  --prev-arrow-bottom: auto;
  --prev-arrow-right: auto;
  --prev-arrow-left: 0.875rem;
  --prev-arrow-transform: translateY(-50%);

  /*### NEXT ARROW  */
  --next-arrow-top: 50%;
  --next-arrow-bottom: auto;
  --next-arrow-right: 0.875rem;
  --next-arrow-left: auto;
  --next-arrow-transform: translateY(-50%);

  /*# PAGINATION  */

  /*## WRAPPER  */
  --pagination-position: absolute;
  --pagination-padding: 12px 14px;
  --pagination-bg: rgba(0, 0, 0, 0.35);
  --pagination-bg-blur: 8px;
  --pagination-radius: 1.25rem;
  --pagination-gap: 0.5rem;

  /*### POSITIONING  */
  --pagination-top: auto;
  --pagination-bottom: 1rem;
  --pagination-left: 50%;
  --pagination-right: auto;
  --pagination-transform: translateX(-50%);

  /*## DOTS  */

  /*### Normal  */
  --dot-size: 8px;
  --dot-radius: 50%;
  --dot-clr: rgba(255, 255, 255, 0.2);
  --dot-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /*### Hover  */
  --dot-hover-clr: rgba(255, 255, 255, 0.5);

  /*### Active */
  --dot-clr-active: var(--primary, #ff4d6a);
  --dot-transform-active: scale(1.3);

  /*# PLAY/PAUSE BUTTON  */

  /*## Normal */
  --play-pause-size: 32px;
  --play-pause-radius: 50vw;
  --play-pause-border: 1px solid rgba(255, 255, 255, 0.1);
  --play-pause-clr: var(--white, white);
  --play-pause-bg: rgba(0, 0, 0, 0.4);
  --play-pause-bg-blur: 8px;

  /*## Hover */
  --play-pause-hover-bg: color-mix(in oklch, var(--primary) 20%, transparent);
  --play-pause-hover-border-clr: var(--primary, #ff4d6a);

  /*## POSITIONING  */
  --play-pause-top: auto;
  --play-pause-bottom: 14px;
  --play-pause-left: auto;
  --play-pause-right: 14px;
  --play-pause-z-index: 10;

  /*# PROGRESS  */

  /*## Normal */
  --progress-fill-clr: var(--primary, #ff4d6a);
  --progress-fill-clr-2: var(--primary-ultra-light, #ff8fa3); /* bar progress*/
  --progress-bg: rgba(0, 0, 0, 0.4); /* non cirular counter*/
  --progress-bg-blur: 8px; /* non cirular counter*/
  --progress-border-radius: 20px; /* non cirular counter*/
  --progress-border: 1px solid rgba(255, 255, 255, 0.08); /* non cirular counter*/
  --progress-padding: 4px 12px; /* non cirular counter*/
  --progress-track-clr: rgba(255, 255, 255, 0.1);
  --progress-separator-clr: var(--progress-clr-total);
  --progress-separator-gap: 0.1em;
  --progress-separator-size: var(--progress-font-size-total);

  /*## Current text */
  --progress-clr-current: var(--primary, #ff4d6a);
  --progress-font-size-current: 0.8rem;

  /*## Total text */
  --progress-clr-total: #8888a0;
  --progress-font-size-total: 0.6rem;

  /*## POSITIONING  */
  --progress-top: auto;
  --progress-bottom: 0;
  --progress-left: 14px;
  --progress-right: auto;
  --progress-z-index: 10;

  /*### Counter  */
  & [data-auto-generated][data-progress-type='counter'] {
    --progress-top: auto;
    --progress-bottom: 12px;
    --progress-left: auto;
    --progress-right: 12px;
  }

  /*### Circular  */
  & [data-auto-generated][data-progress-type='circular'] {
    --progress-top: 14px;
    --progress-bottom: auto;
    --progress-left: 14px;
    --progress-right: auto;
  }

  /*# LIGHTBOX  */

  --lightbox-bg: color-mix(in oklch, black 90%, transparent);
  --lightbox-z: 99999;
  --lightbox-close-size: 2.75rem;
  --lightbox-padding: clamp(16px, 4vw, 48px);
  --lightbox-img-height: 90vh;
  --lightbox-arrow-bg: color-mix(in oklch, white 12%, transparent);
  --lightbox-arrow-hover-bg: color-mix(in oklch, white 25%, transparent);
  --lightbox-clr: #fff;
  --lightbox-slide-height: 70vh;
}
.slide-placeholder-info {
  margin: auto;
  color: white;
  font-size: 14px;
  letter-spacing: 1px;
}
.dwc-slider-nav-button-wrapper {
  width: fit-content;
height: fit-content;
}
.dwc-slider-nav-btn {
  /* max-inline-size: fit-content; */
  display: grid;
  place-items: center;
  white-space: nowrap;

  &:has(.dwc-default-slider-nav-icon, .dwc-slider-nav-custom-svg, [data-slide-title]) {
    color: var(--arrow-clr);
    font-size: var(--arrow-icon-size);
    min-width: calc(var(--arrow-width) + var(--title-width, 0px));
    min-height: var(--arrow-height);
    border: var(--arrow-border);
    border-radius: var(--arrow-radius);
    background: var(--arrow-bg);
    backdrop-filter: blur(var(--arrow-bg-blur));
    -webkit-backdrop-filter: blur(var(--arrow-bg-blur));
    cursor: pointer;
    transition: var(--arrow-transition);
    padding: var(--arrow-padding);
    aspect-ratio: var(--arrow-aspect-ratio);

    &:hover {
      background: var(--arrow-hover-bg);
      border-color: var(--arrow-hover-border-clr);
      color: var(--arrow-hover-clr);

      & svg {
        fill: var(--arrow-hover-clr);
      }
    }
  }
}
.dwc-default-slider-nav-icon {
  width: var(--arrow-icon-size);
  height: var(--arrow-icon-size);
  fill: var(--arrow-clr);
}
.dwc-slider-nav-custom-svg {
  & svg{
      width: var(--arrow-icon-size);
  height: var(--arrow-icon-size);
  fill: var(--arrow-clr);
  }
}
.dwc-nav-btn-instruction {
  color: white;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 1px;
  background-color: var(--etch-info, deepskyblue);
  border-radius: 0.4em;
  padding: 0.45 0.75em;
  max-inline-size: 250px;
  white-space: wrap;
}
.dwc-progress-container {
  & > .sc-bar-progress{
    block-size: var(--progress-height);
  }
}
.autoplay-toggle-container {
  inline-size: var(--play-pause-size);
  block-size: var(--play-pause-size);
  flex-shrink: 0;
  & > button {
    inline-size: 100%;
    block-size: 100%;
  }
}
.dwc-slider-pagination-wrapper {
  /*  General pagination styles */
  display: flex;
  gap: var(--gap);
  flex-direction: var(--direction);
  position: var(--position);
  z-index: var(--z-index);
  block-size: fit-content;

  /*  Default pagination styles */
  [data-custom-pagination='default']& {
    padding: var(--padding);
    background-color: var(--bg);
    backdrop-filter: blur(var(--blur));
    border-radius: var(--radius);
    font-size: var(--font-size);

    & .splide__pagination__page {
      width: var(--dot-size);
      height: var(--dot-size);
      border-radius: var(--dot-radius);
      border: none;
      color: var(--dot-color);
      background: var(--dot-bg);
      cursor: pointer;
      padding: 0;
      transition: all var(--sc-transition);
      line-height: 1;

      &.is-active {
        background: var(--dot-bg-active);
        transform: scale(1.3);
        color: var(--active-dot-color);
      }
    }
  }
  /*  END Default pagination styles */
}
.gallery__image {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  cursor: zoom-in;
}
.gallery__carousel {
  position: relative;
  inline-size: 100%;

  & .splide__slide {
    position: relative;
  }
}
.gallery__arrow {
  position: absolute;
  inset-block-start: 50%;
  z-index: 2;
  translate: 0 -50%;
}
.gallery__arrow--prev {
  inset-inline-start: var(--space-s);
}
.gallery__arrow--next {
  inset-inline-end: var(--space-s);
}
.error-carey {
  padding-block-end: var(--section-space-xl);
}
.error-carey__inner {
  max-inline-size: var(--width-60);
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
  @media (width >= 43.75rem) {
      align-items: center;
  }
}
.error-carey__heading {
  font-size: calc(var(--h1) * 1.5);
}
.error-carey__image {
  max-block-size: clamp(150px, 10vw, 200px);
  align-self: start;
  @media (width >= 43.75rem) {
    align-self: center;
  }
}
.error-carey__headline {
  font-size: var(--h2);
}