.elementor-kit-7{--e-global-color-primary:#7598D3;--e-global-color-secondary:#7598D3;--e-global-color-text:#FFFFFF;--e-global-color-accent:#FDF9F5;--e-global-color-congin_primary:#251F23;--e-global-color-congin_text:#73787D;--e-global-color-congin_accent:#7598D3;--e-global-color-congin_border:#F1F1F1;--e-global-color-congin_light:#F4F5F8;--e-global-color-congin_dark:#171717;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Roboto";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:400;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */.diagram-wrap{
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Main SVG */
.diagram-wrap svg{
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

/* PNG linework overlay */
.diagram-linework{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}

/* ---- PART STYLING (Brand-adjacent) ---- */

/* Base: slightly lighter orange, subtle depth */
.diagram-wrap svg g > path,
.diagram-wrap svg g > polygon{
  fill: rgba(240, 122, 47, 0.70) !important; /* base orange */
  cursor: pointer;

  /* subtle depth without looking “glowy” */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.14));

  /* smoother transitions */
  transition:
    fill 180ms ease,
    filter 180ms ease,
    opacity 180ms ease;
}

/* Hover: darker orange + stronger depth */
.diagram-wrap svg g:hover > path,
.diagram-wrap svg g:hover > polygon{
  fill: rgba(198, 83, 26, 1) !important; /* hover orange */
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.28));
}

/* Optional: future "selected" state (add class to the <g>) */
.diagram-wrap svg g.is-selected > path,
.diagram-wrap svg g.is-selected > polygon{
  fill: rgba(140, 46, 20, 0.95) !important; /* deep rust (logo-adjacent) */
  filter: drop-shadow(0 7px 14px rgba(0,0,0,0.35));
}

/* Optional: focus style if you ever make parts keyboard-focusable */
.diagram-wrap svg g:focus > path,
.diagram-wrap svg g:focus > polygon{
  outline: none;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 0 rgba(0,0,0,0));
}/* End custom CSS */