/*
Theme Name: Textures Craftworks Child
Template: Divi
Version: 1.0
*/

DIVI . THEME OPTIONS
/* Custom adjustment for Divi superscript height and size */
.et_pb_module sup {
  font-size: 55% !important;
  vertical-align: 0.1em !important; /* Adjusts the exact height */
  line-height: 0 !important;
}

/* BEGIN RESPONSIVE FOR MULTICOLUMN TEXT MODULE BIO PAGES */
/* Desktop: 3 Columns */
@media (min-width: 981px) {
  .mobile-single-column {
    column-count: 3;
    column-gap: 40px;
  }
}

/* Tablet: Exact 2 Columns */
@media (min-width: 768px) and (max-width: 980px) {
  .mobile-single-column {
    column-count: 2 !important;
    column-gap: 30px;
  }
}

/* Mobile: 1 Column */
@media (max-width: 767px) {
  .mobile-single-column {
    column-count: 1 !important;
  }
}
/* END RESPONSIVE FOR MULTICOLUMN TEXT MODULE BIO PAGES */


/* BEGIN CLAUDE CODE */
@media (max-width: 767px) {
  /* Shrink the whole header, but let content define its own height */
  .et_pb_section--with-menu.et_pb_section--with-menu {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  /* Logo/menu row */
  .et_pb_row_0_tb_header.et_pb_row_0_tb_header {
    padding: 8px 15px !important;
    min-height: 0 !important;
  }

  /* Banner row: padding-top gives breathing room above title */
  .et_pb_row_1_tb_header.et_pb_row_1_tb_header {
    margin-top: 0 !important;
    padding: 24px 15px 12px !important;
    min-height: 0 !important;
  }

  /* Title */
  .et_pb_text_0_tb_header.et_pb_text_0_tb_header,
  .et_pb_text_0_tb_header.et_pb_text_0_tb_header .et_pb_text_inner {
    font-size: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  /* Subtitle - negative margin pulls it up tight under the title,
     regardless of whatever is controlling the row's height */
  .et_pb_text_1_tb_header.et_pb_text_1_tb_header,
  .et_pb_text_1_tb_header.et_pb_text_1_tb_header .et_pb_text_inner {
    font-size: 13px !important;
    padding: 0 !important;
    margin-top: 0 !important;
    line-height: 1.3 !important;
  }

  /* Hamburger/search icons - white (bio-page headers only; History header
     overrides this back to black further down, see HAMBURGER COLOR OVERRIDE) */
  .et_pb_column_1_tb_header.et_pb_column_1_tb_header .et_pb_menu__icon,
  .et_pb_column_1_tb_header.et_pb_column_1_tb_header .et_pb_menu__icon svg,
  .et_pb_column_1_tb_header.et_pb_column_1_tb_header .mobile_menu_bar,
  .et_pb_column_1_tb_header.et_pb_column_1_tb_header .mobile_menu_bar::before,
  .et_pb_column_1_tb_header.et_pb_column_1_tb_header .mobile_menu_bar::after {
    color: #fff !important;
    fill: #fff !important;
    border-color: #fff !important;
  }
}
/* END CLAUDE CODE */


/* CLAUDE BEGIN MENU TIGHTENING (NARROW DESKTOP GAP) */
/* Between hamburger takeover (~1170px) and where the full menu comfortably
   fits (1489px+), tighten menu text/spacing to avoid wrapping, and center
   the menu block (both axes) since it wraps to two lines in this range:
   menu words on one line, search icon on a second line below. Centering
   needs to happen on the ROW itself (.et_pb_row_0_tb_header), not just the
   inner container, because the row is the flex parent with the fixed
   120px height (see LOGO SCALE-DOWN below) - without this, the column
   stays pinned toward the top of that 120px box regardless of what the
   inner container's own align-items says. */

@media (min-width: 1171px) and (max-width: 1488px) {
  .header-top #menu-navigation.et-menu.nav > li {
    padding-right: 6px !important;
  }
  .header-top #menu-navigation.et-menu.nav > li > a {
    font-size: 12px !important;
  }
  .header-top .et_pb_column_1_tb_header {
    display: flex !important;
    align-items: center !important;
  }
  .header-top .et_pb_menu_inner_container {
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-top: 15px !important;
  }
}

.header-top #menu-navigation.et-menu.nav > li:last-child {
  padding-right: 0 !important;
  margin-right: 6px !important;
}

@media (min-width: 1171px) and (max-width: 1488px) {
  .header-top #menu-navigation.et-menu.nav > li {
    padding-right: 6px !important;
  }
  .header-top #menu-navigation.et-menu.nav > li > a {
    font-size: 12px !important;
  }
  .header-top .et_pb_column_1_tb_header {
    display: flex !important;
    align-items: center !important;
  }
  .header-top .et_pb_menu_inner_container {
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-top: 18px !important;
    margin-left: -20px !important;
  }
}

/* CLAUDE END MENU TIGHTENING (NARROW DESKTOP GAP) */

/* CLAUDE BEGIN CUSTOM HAMBURGER (NARROW-DESKTOP GAP, 981-1199px) */

/* CLAUDE BEGIN CUSTOM HAMBURGER (NARROW-DESKTOP GAP, 981-1199px) */
@media (min-width: 981px) and (max-width: 1199px) {
  /* Hide Divi's own text menu and its native (non-functional here) icon */
  .header-top .et_pb_menu__wrap {
    display: none !important;
  }
  .header-top .et_mobile_nav_menu {
    display: none !important;
  }

  /* Our own icon, drawn with three plain divs */
  .custom-hamburger-icon {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    margin-left: auto;
    margin-right: 15px;
  }
  .custom-hamburger-icon span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #737373;
  }

  .custom-hamburger-menu.is-open {
    display: block;
  }
}

/* Hide our custom icon/menu everywhere outside their target range */
.custom-hamburger-icon,
.custom-hamburger-menu {
  display: none;
}

.custom-hamburger-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  border-top: 3px solid #d80000;
  z-index: 9999;
}

/* Text styling matched to Divi's own native menu link rule
   (.et_pb_menu_0_tb_header.et_pb_menu ul li a / .et_mobile_menu a) */
.custom-hamburger-menu a,
.custom-hamburger-menu .has-submenu > .submenu-toggle {
  display: block;
  padding: 18px 24px;
  color: #666666;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 1.6em;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.custom-hamburger-menu a:hover,
.custom-hamburger-menu .has-submenu > .submenu-toggle:hover {
  background: #f5f5f5;
}

.custom-hamburger-menu a.is-current-page,
.custom-hamburger-menu .submenu-toggle.is-current-page {
  color: #d80000 !important;
}

.custom-hamburger-menu .has-submenu > .submenu-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f5f5;
}
.custom-hamburger-menu .has-submenu > .submenu-toggle::after {
  content: '▾';
  font-size: 18px;
  margin-left: 8px;
}

.custom-hamburger-menu .submenu-list {
  display: none;
  background: #f9f9f9;
}
.custom-hamburger-menu .has-submenu.is-expanded .submenu-list {
  display: block;
}
.custom-hamburger-menu .submenu-list a {
  padding-left: 48px;
}

/* CLAUDE END CUSTOM HAMBURGER (NARROW-DESKTOP GAP, 981-1199px) */

/* CLAUDE BEGIN LOGO COLUMN FULL-WIDTH FIX (PHONE) */
/* Divi's et_pb_gutters1 class reserves side spacing for this column even
   though it's stacked full-width on phone, leaving the logo short of
   true edge-to-edge and misaligning the hamburger below it. */
@media (max-width: 767px) {
  .header-top .et_pb_column_0_tb_header {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
}
/* CLAUDE END LOGO COLUMN FULL-WIDTH FIX (PHONE) */


/* BEGIN SOCIAL ICONS INLINE - LET'S CONNECT PAGE */
.social-icon-inline {
  display: inline-block;
  margin: 20px 10px 0 0; /* top value = gap above the row, clearing the circle - adjust to taste */
  vertical-align: middle;
}

.social-icon-inline:first-child {
  margin-left: 0; /* was 20px from the earlier fixed-offset approach - now that text-align: center handles positioning, this was skewing the group right of true center */
}
/* END SOCIAL ICONS INLINE */

/* NOTE: The X (Twitter-rebrand) icon glyph sits ~16px lower than the other three
   icons inside Divi's own icon font - confirmed by inspecting the glyph itself,
   not a CSS issue on our end. Fix applied directly on that one module instead of
   here: X icon's own Design tab > Spacing > Margin Top = -12px (overrides the
   20px from .social-icon-inline above, for that module only). */

/* BEGIN CONNECT ICONS COLUMN CENTERING */
/* Requires a CSS Class of "connect-icons-column" added to that column's Advanced tab */
/* Using right-align, not center: the image in this column sits flush against the
   column's right edge rather than centered in it, so right-aligning the icons
   matches the image's actual edge instead of fighting its off-center position */
.connect-icons-column {
  text-align: right;
}

/* 1. Target the blurred background and stretch it slightly past the edges */
.pa-background-filter .et_pb_parallax_css {
    filter: blur(10px);
    -webkit-filter: blur(10px);
    transform: scale(1.08); /* Scales up the image to hide the white border halo */
    transform-origin: center;
}

/* 2. Chop off the extra scaled image so it doesn't bleed into other sections */
.pa-background-filter {
    overflow: hidden !important;
}
/* END CONNECT ICONS COLUMN CENTERING */


/* CLAUDE BEGIN SHRINK CODE */
/* Shrinks the History page sticky header (logo/menu row + banner row) on scroll.
   Toggled by JS adding/removing "is-scrolled" on .site-header past 60px scroll. */
.header-banner {
  transition: padding 0.25s ease, margin 0.25s ease, font-size 0.25s ease, height 0.25s ease;
  overflow: hidden;
}
.header-top {
  transition: padding 0.25s ease;
}
.site-header {
  transition: all 0.25s ease;
}

/* CLAUDE BEGIN LOGO ASPECT RATIO FIX (PHONE) */
@media (max-width: 767px) {
  .header-top img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}
/* CLAUDE END LOGO ASPECT RATIO FIX (PHONE) */

/* CLAUDE BEGIN LOGO EDGE-TO-EDGE FIX (PHONE) */
/* The row has 15px left/right padding (shared with the banner row), but the
   banner only looks flush because its background paints behind padding.
   The logo is a real , so it's genuinely inset by that padding - pull
   it out to match. */
@media (max-width: 767px) {
  .header-top .et_pb_image_wrap {
    margin-left: -15px !important;
    margin-right: -15px !important;
    width: auto !important;
    max-width: none !important;
  }

  .header-top .et_pb_image_wrap img {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
  }
}
/* CLAUDE END LOGO EDGE-TO-EDGE FIX (PHONE) */

/* Shrunk state - desktop */
.site-header.is-scrolled .header-banner {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  margin-top: 16px !important;
  height: 90px !important;
  min-height: 90px !important;
  max-height: 90px !important;
}
.site-header.is-scrolled .header-banner h1 {
  font-size: 42px;
}
.site-header.is-scrolled .header-banner h2 {
  font-size: 17px;
}
.site-header.is-scrolled .header-banner .et_pb_heading_0_tb_header {
  padding-top: 3px !important;
  padding-bottom: 0 !important;
  margin-bottom: -4px !important;
}
.site-header.is-scrolled .header-top {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.site-header.is-scrolled .header-top img {
  max-height: 40px;
  height: auto !important;
}

/* Shrunk state - tablet (≤980px) */
@media (max-width: 980px) {
  .site-header.is-scrolled .header-banner {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    margin-top: 16px !important;
    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
  }
  .site-header.is-scrolled .header-banner h1 {
    font-size: 36px;
  }
  .site-header.is-scrolled .header-banner h2 {
    font-size: 17px;
  }
  .site-header.is-scrolled .header-banner .et_pb_heading_0_tb_header {
    padding-top: 4px !important;
    padding-bottom: 0 !important;
    margin-bottom: -4px !important;
  }
  .site-header.is-scrolled .header-top {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .site-header.is-scrolled .header-top img {
    max-height: 40px;
    height: auto !important;
  }
}

/* Shrunk state - phone (≤767px) */
@media (max-width: 767px) {
  .site-header.is-scrolled .header-banner {
    padding-top: 2px !important;
    padding-bottom: 8px !important;
    margin-top: 16px !important;
    height: 75px !important;
    min-height: 75px !important;
    max-height: 75px !important;
  }
  .site-header.is-scrolled .header-banner h1 {
    font-size: 22px;
    margin: 0 0 2px 0;
  }
  .site-header.is-scrolled .header-banner .et_pb_heading_0_tb_header {
    padding-top: 8px !important;
    padding-bottom: 0 !important;
    margin-bottom: -6px !important;
  }
  .site-header.is-scrolled .header-banner .et_pb_heading_1_tb_header {
    padding-top: 0 !important;
  }
  .site-header.is-scrolled .header-banner h2 {
    font-size: 15px;
    margin: 0;
  }
  .site-header.is-scrolled .header-top {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .site-header.is-scrolled .header-top img {
    max-height: 40px;
    height: auto !important;
  }
}
/* CLAUDE END SHRINK CODE */


/* CLAUDE BEGIN LOGO SCALE-DOWN (WIDE-TABLET GAP) */
/* Between Divi's tablet breakpoint (980px) and where the menu/search
   start wrapping on wide screens (1861px), shrink the logo a bit to
   free up room for the menu row so it doesn't wrap prematurely. */
@media (min-width: 981px) and (max-width: 1861px) {
  .header-top img {
    max-height: 120px !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
  }
  .header-top {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
  }
}
/* CLAUDE END LOGO SCALE-DOWN (WIDE-TABLET GAP) */



/* CLAUDE BEGIN HAMBURGER COLOR OVERRIDE (HISTORY HEADER) */
.site-header .header-top .et_pb_menu__icon,
.site-header .header-top .et_pb_menu__icon svg,
.site-header .header-top .mobile_menu_bar,
.site-header .header-top .mobile_menu_bar::before,
.site-header .header-top .mobile_menu_bar::after {
  color: #000 !important;
  fill: #000 !important;
  border-color: #000 !important;
}
/* CLAUDE END HAMBURGER COLOR OVERRIDE (HISTORY HEADER) */

/* CLAUDE BEGIN HOME PAGE BANNER BLEND */

.home .banner-fade {
  position: relative;
}

.home .banner-fade::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: clamp(80px, 42%, 200px);
  visibility: visible;
  background: linear-gradient(
    to bottom,
    rgba(26, 70, 84, 0) 0%,
    rgba(26, 70, 84, 1) 100%
  );
  pointer-events: none;
  z-index: 3;
}

/* CLAUDE END HOME PAGE BANNER BLEND */

/* Submenu items: sentence case on desktop, tablet and phone */
#top-menu li li a,
.et_pb_menu .et-menu li li a,
.et_mobile_menu li li a,
#et_mobile_menu li li a,
.et_pb_menu .et_mobile_menu li li a {
  text-transform: none !important;
}

/* Submenu items: tighter letter spacing */
#top-menu li li a,
.et_pb_menu .et-menu li li a,
.et_mobile_menu li li a,
#et_mobile_menu li li a,
.et_pb_menu .et_mobile_menu li li a {
  letter-spacing: 0 !important;
}

/* Submenu items: light weight */
#top-menu li li a,
.et_pb_menu .et-menu li li a,
.et_mobile_menu li li a,
#et_mobile_menu li li a,
.et_pb_menu .et_mobile_menu li li a {
  font-weight: 300 !important;
}

/* Submenu items: size up one notch */
#top-menu li li a,
.et_pb_menu .et-menu li li a,
.et_mobile_menu li li a,
#et_mobile_menu li li a,
.et_pb_menu .et_mobile_menu li li a {
  font-size: 16px !important;
}

/* Mobile and tablet menu: scroll inside the menu when the list is long */
@media (max-width: 980px) {
  .et_mobile_menu {
    max-height: calc(100vh - 120px) !important;
    max-height: calc(100dvh - 120px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* Mobile and tablet menu: collapsible sub-menus */
@media (max-width: 980px) {
  .et_mobile_menu li.menu-item-has-children > ul.sub-menu {
    display: none !important;
  }
  .et_mobile_menu li.menu-item-has-children.sub-open > ul.sub-menu {
    display: block !important;
  }
  .et_mobile_menu li.menu-item-has-children > a {
    position: relative;
    padding-right: 56px !important;
  }
  .et_mobile_menu li.menu-item-has-children > a::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.2s;
  }
  .et_mobile_menu li.menu-item-has-children.sub-open > a::after {
    transform: translateY(-25%) rotate(-135deg);
  }
}

/* Mobile and tablet menu: square arrow buttons */
@media (max-width: 980px) {
  .et_mobile_menu li.menu-item-has-children > a {
    padding-right: 72px !important;
  }
  .et_mobile_menu li.menu-item-has-children > a::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 56px !important;
    height: auto !important;
    border: 0 !important;
    transform: none !important;
    background: #184755 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important;
  }
  .et_mobile_menu li.menu-item-has-children.sub-open > a::after {
    background: #184755 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 10l5-5 5 5' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important;
  }
}

/* Mobile and tablet menu: quieter arrow squares */
@media (max-width: 980px) {
  .et_mobile_menu li.menu-item-has-children > a::after,
  .et_mobile_menu li.menu-item-has-children.sub-open > a::after {
    background-color: #737373 !important;
  }
}

/* Mobile and tablet menu: light arrow squares (change the colour on the next line) */
:root { --arrow-bg: #d4d4d4; }
@media (max-width: 980px) {
  .et_mobile_menu li.menu-item-has-children > a::after {
    background-color: var(--arrow-bg) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23444' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    background-repeat: no-repeat !important;
  }
  .et_mobile_menu li.menu-item-has-children.sub-open > a::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 10l5-5 5 5' fill='none' stroke='%23444' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }
}

/* Custom hamburger (981-1199px): same sub-menu behaviour as the phone menu */
.custom-hamburger-menu .submenu-row {
  display: flex;
  align-items: stretch;
  background: #f5f5f5;
  border-bottom: 1px solid #eee;
}
.custom-hamburger-menu .submenu-row > a {
  flex: 1 1 auto;
  border-bottom: 0;
}
.custom-hamburger-menu .submenu-arrow {
  flex: 0 0 56px;
  width: 56px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--arrow-bg, #d4d4d4);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23444' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 18px 18px;
  background-repeat: no-repeat;
}
.custom-hamburger-menu .has-submenu.is-expanded > .submenu-row > .submenu-arrow {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 10l5-5 5 5' fill='none' stroke='%23444' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.custom-hamburger-menu .submenu-list .submenu-row {
  background: #f9f9f9;
}
.custom-hamburger-menu .submenu-list a {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 300;
  font-size: 16px;
}
.custom-hamburger-menu .submenu-list .submenu-list a {
  padding-left: 72px;
}

/* Arrow squares (phone menu and custom hamburger): subtle raised bevel */
:root {
  --arrow-top: #efefef;
  --arrow-bottom: #dcdcdc;
}
@media (max-width: 980px) {
  .et_mobile_menu li.menu-item-has-children > a::after {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
      linear-gradient(to bottom, var(--arrow-top), var(--arrow-bottom)) !important;
    background-position: center, 0 0 !important;
    background-size: 18px 18px, 100% 100% !important;
    background-repeat: no-repeat, no-repeat !important;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.9), inset -1px -1px 0 rgba(0,0,0,0.16) !important;
  }
  .et_mobile_menu li.menu-item-has-children.sub-open > a::after {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 10l5-5 5 5' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
      linear-gradient(to bottom, var(--arrow-bottom), var(--arrow-top)) !important;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.22), inset -1px -1px 0 rgba(255,255,255,0.8) !important;
  }
}
.custom-hamburger-menu .submenu-arrow {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(to bottom, var(--arrow-top), var(--arrow-bottom));
  background-position: center, 0 0;
  background-size: 18px 18px, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.9), inset -1px -1px 0 rgba(0,0,0,0.16);
}
.custom-hamburger-menu .has-submenu.is-expanded > .submenu-row > .submenu-arrow {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 10l5-5 5 5' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(to bottom, var(--arrow-bottom), var(--arrow-top));
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.22), inset -1px -1px 0 rgba(255,255,255,0.8);
}

/* Arrow squares: lighter, more subtle bevel (overrides the values above) */
:root {
  --arrow-top: #f6f6f6;
  --arrow-bottom: #ececec;
}
@media (max-width: 980px) {
  .et_mobile_menu li.menu-item-has-children > a::after {
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.95), inset -1px -1px 0 rgba(0,0,0,0.07) !important;
  }
  .et_mobile_menu li.menu-item-has-children.sub-open > a::after {
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.10), inset -1px -1px 0 rgba(255,255,255,0.9) !important;
  }
}
.custom-hamburger-menu .submenu-arrow {
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.95), inset -1px -1px 0 rgba(0,0,0,0.07);
}
.custom-hamburger-menu .has-submenu.is-expanded > .submenu-row > .submenu-arrow {
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.10), inset -1px -1px 0 rgba(255,255,255,0.9);
}

/* Header shrink: smoother transitions on every part that changes */
.site-header { transition: all 0.4s ease !important; }
.header-banner {
  transition: padding 0.4s ease, margin 0.4s ease, height 0.4s ease, min-height 0.4s ease, max-height 0.4s ease !important;
}
.header-banner h1,
.header-banner h2 {
  transition: font-size 0.4s ease, margin 0.4s ease, line-height 0.4s ease;
}
.header-banner .et_pb_heading_0_tb_header,
.header-banner .et_pb_heading_1_tb_header {
  transition: padding 0.4s ease, margin 0.4s ease;
}
.header-top { transition: padding 0.4s ease !important; }
.header-top img { transition: max-height 0.4s ease; }