/*
1. Libraries
2. Base
*/
/* Enable CSS debug mode */
/* * {border: 1px solid red;} */
/* Libraries */
*,
*:before,
*:after {
  box-sizing: border-box;
} /* box-sizing: border-box */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * Add the correct box sizing in Firefox.
 */
hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * remove the inheritance of text transform in Edge and Firefox.
 * 1. remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */
legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
} /* https://github.com/necolas/normalize.css */

/* CSS variables */
:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}
/* Mobile layout */
.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12{
  min-height: 1px;
  width: 100%;
}
/* Desktop layout */
@media (min-width: 768px) {
  .row-fluid {
flex-wrap: nowrap;
justify-content: space-between;
  }
  
.row-fluid .span1 {
  width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
}
  
.row-fluid .span2 {
  width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
}
  
.row-fluid .span3 {
  width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
}
  
.row-fluid .span4 {
  width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
}
  
.row-fluid .span5 {
  width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
}
  
.row-fluid .span6 {
  width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
}
  
.row-fluid .span7 {
  width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
}
  
.row-fluid .span8 {
  width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
}
  
.row-fluid .span9 {
  width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
}
  
.row-fluid .span10 {
  width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
}
  
.row-fluid .span11 {
  width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
}
  
} /* layout classes https://github.com/HubSpot/cms-theme-boilerplate */
.content-wrapper {
  margin: 0 auto;
  padding: 0;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section>.row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
} /* dnd classes https://github.com/HubSpot/cms-theme-boilerplate */
[data-sal] {
    transition-delay: 0s;
    transition-delay: var(--sal-delay, 0s);
    transition-duration: .2s;
    transition-duration: var(--sal-duration, .2s);
    transition-timing-function: ease;
    transition-timing-function: var(--sal-easing, ease)
}

[data-sal][data-sal-duration="200"] {
    transition-duration: .2s
}

[data-sal][data-sal-duration="250"] {
    transition-duration: .25s
}

[data-sal][data-sal-duration="300"] {
    transition-duration: .3s
}

[data-sal][data-sal-duration="350"] {
    transition-duration: .35s
}

[data-sal][data-sal-duration="400"] {
    transition-duration: .4s
}

[data-sal][data-sal-duration="450"] {
    transition-duration: .45s
}

[data-sal][data-sal-duration="500"] {
    transition-duration: .5s
}

[data-sal][data-sal-duration="550"] {
    transition-duration: .55s
}

[data-sal][data-sal-duration="600"] {
    transition-duration: .6s
}

[data-sal][data-sal-duration="650"] {
    transition-duration: .65s
}

[data-sal][data-sal-duration="700"] {
    transition-duration: .7s
}

[data-sal][data-sal-duration="750"] {
    transition-duration: .75s
}

[data-sal][data-sal-duration="800"] {
    transition-duration: .8s
}

[data-sal][data-sal-duration="850"] {
    transition-duration: .85s
}

[data-sal][data-sal-duration="900"] {
    transition-duration: .9s
}

[data-sal][data-sal-duration="950"] {
    transition-duration: .95s
}

[data-sal][data-sal-duration="1000"] {
    transition-duration: 1s
}

[data-sal][data-sal-duration="1050"] {
    transition-duration: 1.05s
}

[data-sal][data-sal-duration="1100"] {
    transition-duration: 1.1s
}

[data-sal][data-sal-duration="1150"] {
    transition-duration: 1.15s
}

[data-sal][data-sal-duration="1200"] {
    transition-duration: 1.2s
}

[data-sal][data-sal-duration="1250"] {
    transition-duration: 1.25s
}

[data-sal][data-sal-duration="1300"] {
    transition-duration: 1.3s
}

[data-sal][data-sal-duration="1350"] {
    transition-duration: 1.35s
}

[data-sal][data-sal-duration="1400"] {
    transition-duration: 1.4s
}

[data-sal][data-sal-duration="1450"] {
    transition-duration: 1.45s
}

[data-sal][data-sal-duration="1500"] {
    transition-duration: 1.5s
}

[data-sal][data-sal-duration="1550"] {
    transition-duration: 1.55s
}

[data-sal][data-sal-duration="1600"] {
    transition-duration: 1.6s
}

[data-sal][data-sal-duration="1650"] {
    transition-duration: 1.65s
}

[data-sal][data-sal-duration="1700"] {
    transition-duration: 1.7s
}

[data-sal][data-sal-duration="1750"] {
    transition-duration: 1.75s
}

[data-sal][data-sal-duration="1800"] {
    transition-duration: 1.8s
}

[data-sal][data-sal-duration="1850"] {
    transition-duration: 1.85s
}

[data-sal][data-sal-duration="1900"] {
    transition-duration: 1.9s
}

[data-sal][data-sal-duration="1950"] {
    transition-duration: 1.95s
}

[data-sal][data-sal-duration="2000"] {
    transition-duration: 2s
}

[data-sal][data-sal-delay="50"] {
    transition-delay: .05s
}

[data-sal][data-sal-delay="100"] {
    transition-delay: .1s
}

[data-sal][data-sal-delay="150"] {
    transition-delay: .15s
}

[data-sal][data-sal-delay="200"] {
    transition-delay: .2s
}

[data-sal][data-sal-delay="250"] {
    transition-delay: .25s
}

[data-sal][data-sal-delay="300"] {
    transition-delay: .3s
}

[data-sal][data-sal-delay="350"] {
    transition-delay: .35s
}

[data-sal][data-sal-delay="400"] {
    transition-delay: .4s
}

[data-sal][data-sal-delay="450"] {
    transition-delay: .45s
}

[data-sal][data-sal-delay="500"] {
    transition-delay: .5s
}

[data-sal][data-sal-delay="550"] {
    transition-delay: .55s
}

[data-sal][data-sal-delay="600"] {
    transition-delay: .6s
}

[data-sal][data-sal-delay="650"] {
    transition-delay: .65s
}

[data-sal][data-sal-delay="700"] {
    transition-delay: .7s
}

[data-sal][data-sal-delay="750"] {
    transition-delay: .75s
}

[data-sal][data-sal-delay="800"] {
    transition-delay: .8s
}

[data-sal][data-sal-delay="850"] {
    transition-delay: .85s
}

[data-sal][data-sal-delay="900"] {
    transition-delay: .9s
}

[data-sal][data-sal-delay="950"] {
    transition-delay: .95s
}

[data-sal][data-sal-delay="1000"] {
    transition-delay: 1s
}

[data-sal][data-sal-easing=linear] {
    transition-timing-function: linear
}

[data-sal][data-sal-easing=ease] {
    transition-timing-function: ease
}

[data-sal][data-sal-easing=ease-in] {
    transition-timing-function: ease-in
}

[data-sal][data-sal-easing=ease-out] {
    transition-timing-function: ease-out
}

[data-sal][data-sal-easing=ease-in-out] {
    transition-timing-function: ease-in-out
}

[data-sal][data-sal-easing=ease-in-cubic] {
    transition-timing-function: cubic-bezier(.55, .055, .675, .19)
}

[data-sal][data-sal-easing=ease-out-cubic] {
    transition-timing-function: cubic-bezier(.215, .61, .355, 1)
}

[data-sal][data-sal-easing=ease-in-out-cubic] {
    transition-timing-function: cubic-bezier(.645, .045, .355, 1)
}

[data-sal][data-sal-easing=ease-in-circ] {
    transition-timing-function: cubic-bezier(.6, .04, .98, .335)
}

[data-sal][data-sal-easing=ease-out-circ] {
    transition-timing-function: cubic-bezier(.075, .82, .165, 1)
}

[data-sal][data-sal-easing=ease-in-out-circ] {
    transition-timing-function: cubic-bezier(.785, .135, .15, .86)
}

[data-sal][data-sal-easing=ease-in-expo] {
    transition-timing-function: cubic-bezier(.95, .05, .795, .035)
}

[data-sal][data-sal-easing=ease-out-expo] {
    transition-timing-function: cubic-bezier(.19, 1, .22, 1)
}

[data-sal][data-sal-easing=ease-in-out-expo] {
    transition-timing-function: cubic-bezier(1, 0, 0, 1)
}

[data-sal][data-sal-easing=ease-in-quad] {
    transition-timing-function: cubic-bezier(.55, .085, .68, .53)
}

[data-sal][data-sal-easing=ease-out-quad] {
    transition-timing-function: cubic-bezier(.25, .46, .45, .94)
}

[data-sal][data-sal-easing=ease-in-out-quad] {
    transition-timing-function: cubic-bezier(.455, .03, .515, .955)
}

[data-sal][data-sal-easing=ease-in-quart] {
    transition-timing-function: cubic-bezier(.895, .03, .685, .22)
}

[data-sal][data-sal-easing=ease-out-quart] {
    transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}

[data-sal][data-sal-easing=ease-in-out-quart] {
    transition-timing-function: cubic-bezier(.77, 0, .175, 1)
}

[data-sal][data-sal-easing=ease-in-quint] {
    transition-timing-function: cubic-bezier(.755, .05, .855, .06)
}

[data-sal][data-sal-easing=ease-out-quint] {
    transition-timing-function: cubic-bezier(.23, 1, .32, 1)
}

[data-sal][data-sal-easing=ease-in-out-quint] {
    transition-timing-function: cubic-bezier(.86, 0, .07, 1)
}

[data-sal][data-sal-easing=ease-in-sine] {
    transition-timing-function: cubic-bezier(.47, 0, .745, .715)
}

[data-sal][data-sal-easing=ease-out-sine] {
    transition-timing-function: cubic-bezier(.39, .575, .565, 1)
}

[data-sal][data-sal-easing=ease-in-out-sine] {
    transition-timing-function: cubic-bezier(.445, .05, .55, .95)
}

[data-sal][data-sal-easing=ease-in-back] {
    transition-timing-function: cubic-bezier(.6, -.28, .735, .045)
}

[data-sal][data-sal-easing=ease-out-back] {
    transition-timing-function: cubic-bezier(.175, .885, .32, 1.275)
}

[data-sal][data-sal-easing=ease-in-out-back] {
    transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55)
}

[data-sal|=fade] {
    opacity: 0;
    transition-property: opacity
}

[data-sal|=fade].sal-animate,
body.sal-disabled [data-sal|=fade] {
    opacity: 1
}

[data-sal|=slide] {
    opacity: 0;
    transition-property: opacity, transform
}

[data-sal=slide-up] {
    transform: translateY(20%)
}

[data-sal=slide-down] {
    transform: translateY(-20%)
}

[data-sal=slide-left] {
    transform: translateX(20%)
}

[data-sal=slide-right] {
    transform: translateX(-20%)
}

[data-sal|=slide].sal-animate,
body.sal-disabled [data-sal|=slide] {
    opacity: 1;
    transform: none
}

[data-sal|=zoom] {
    opacity: 0;
    transition-property: opacity, transform
}

[data-sal=zoom-in] {
    transform: scale(.5)
}

[data-sal=zoom-out] {
    transform: scale(1.1)
}

[data-sal|=zoom].sal-animate,
body.sal-disabled [data-sal|=zoom] {
    opacity: 1;
    transform: none
}

[data-sal|=flip] {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition-property: transform
}

[data-sal=flip-left] {
    transform: perspective(2000px) rotateY(-91deg)
}

[data-sal=flip-right] {
    transform: perspective(2000px) rotateY(91deg)
}

[data-sal=flip-up] {
    transform: perspective(2000px) rotateX(-91deg)
}

[data-sal=flip-down] {
    transform: perspective(2000px) rotateX(91deg)
}

[data-sal|=flip].sal-animate,
body.sal-disabled [data-sal|=flip] {
    transform: none
}

/*# sourceMappingURL=sal.css.map*/ /* https://github.com/mciastek/sal */

/* Base */
:root {

    /* ===== ISG Brand Palette (sourced from live isg-one.com / ISG2021) ===== */
    --isg-blue: #284a7b;
    --isg-primary: #29497b;      /* links + primary button */
    --isg-darkblue: #001638;
    --isg-navy: #21325b;         /* headings / dark text */
    --isg-lightblue: #cae5ff;
    --isg-teal: #03abba;
    --isg-darkteal: #00676f;
    --isg-green: #9acb3b;
    --isg-purple: #8b68c8;
    --isg-darkpurple: #4d3883;
    --isg-orange: #f54927;       /* primary accent */
    --isg-yellow: #ffc72c;
    --isg-gray: #57585c;
    --isg-lightgray: #f4f5f7;
    --isg-border: #e7eaf3;
    --isg-text: #111111;         /* default body copy (matches live isg-one.com body color) */

    /* Semantic colors (mapped to ISG brand so all modules inherit it) */
    --action1: var(--isg-blue);
    --action2: var(--isg-teal);
    --black: #000000;
    --white: #ffffff;
    --gray1: #cccccc;
    --gray2: #979797;
    --gray3: #565656ff;
    --light-gray:#f5f5f5;
    --dark-gray:#2b2b2b;
     /*black */
    --black-80: rgba(0, 0, 0, .8);
    --black-50: rgba(0, 0, 0, .5);
    --black-30: rgba(0, 0, 0, .3);
    --black-20: rgba(0, 0, 0, .2);
    --black-10: rgba(0, 0, 0, .1);
    /* white */
    --white-80: rgba(255, 255, 255, .8);
    --white-50: rgba(255, 255, 255, .5);
    --white-30: rgba(255, 255, 255, .3);
    --white-20: rgba(255, 255, 255, .2);
    --white-10: rgba(255, 255, 255, .1);
    /* Gradients */
    --gradient1: linear-gradient(-45deg, var(--action1) 0%, var(--action2)50%);
    /* Fonts */
    --font1: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* body */
    --font2: 'Roboto Slab', Georgia, 'Times New Roman', serif; /* headings */
    /* Border Radius (ISG uses square corners on buttons) */
    --border1: 4px;
    --border2: 5px;
    --border3: 10px;
    --button-radius: 0;
    /*  Shadow */
    
    --shadow1: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
    --shadow2: rgba(0, 0, 0, 0.1) 0px 12px 24px 0px;
    --shadow3: rgba(0, 0, 0, 0.1) 0px 16px 32px 0px;
    --textShadow1: 0px 0px 2px rgba(0,0,0,0.5);
    /*  Animation */
    --animation1: .1s ease-in;
    --animation2: .25s ease-in;
    --animation3: 1s ease-in;
    /*  Header (research-style two-tier chrome) */
    --topbar-height: 38px;
    --header-bar-height: 79px;
    --header-height: 117px; /* topbar + main bar; used for fixed-header offsets */
    /*  Widths */
    --center: 1240px;
    --center-small: 900px;
    /* Spacing */
    --section-padding-none:0;    
    --section-padding-small:50px 0;
    --section-padding-medium:80px 0;    
    --section-padding-large:100px 0;

    --section-margin-none:0 auto;
    --section-margin-small:0 auto 50px auto;    
    --section-margin-medium:0 auto 80px auto;    
    --section-margin-large:0 auto 100px auto;    
}
/* Centering */
.center {
  float: none;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--center);
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

.center-small {
  float: none;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--center-small);
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

/* Default anchor link offset */
.anchor {
  display: block;
  position: relative;
  top: -160px;
  visibility: hidden;
}


.shadow-boxes {
  background-color: var(--black-10);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  padding: 50px;

  .box {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--white);
    padding: 16px;
    aspect-ratio: 1/1;
    max-width: 250px;
    width: 100%;

    &.shadow1 {
      box-shadow: var(--shadow1);
    }

    &.shadow2 {
      box-shadow: var(--shadow2);
    }

    &.shadow3 {
      box-shadow: var(--shadow3);
    }
  }

}

/* Popover styling */

/* When any card popover is open, lock body scroll. Using class so it works with top-layer. */
body:has(.popover-container:popover-open) {
  overflow: hidden;
}
.popover-container {
  border:none;
  background: transparent;
  &:has(form) {
    .popover-inner-container {
      background: transparent;
      padding:0;
    }
  }

  /* Keep dialog within the viewport when short (Popover UA centers tall boxes → top/bottom clip). */
  &:popover-open {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 0;
    overflow: hidden;
    max-height: calc(
      100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px
    );
    max-height: calc(
      100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px
    );
  }

  /* Scroll the white panel when the stack exceeds the viewport; avoid nested flex on content (collapses height when popover is intrinsic-sized). */
  &:popover-open .popover-inner-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  &::backdrop {
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: none;
    transition: background-color 0.3s;
    transition-behavior: allow-discrete;
    position: fixed;
    pointer-events: auto;
    inset: 0px;
  }

  .popover-inner-container {
    padding: 30px;
    overflow: visible;
    border-radius: var(--border3);
    box-shadow: var(--shadow3);
    background-color: var(--white);
    @media (max-width: 580px) {
      padding: 20px;
    }
  }


  /**/
  button.close-btn {
    display: block;
    margin:0 0 20px auto;
    border:none;
    background:rgba(255,255,255,.25);
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    border: 2px solid var(--white);
    transition: var(--animation1);
    span {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    svg {
      width: 16px;
      height: 16px;
      path {
        fill: var(--white);
        transition: var(--animation1);
      }
    }
    &:hover,&:focus {
      background: rgba(255,255,255,.9);
      svg {
        path {
          fill: var(--black);
        }
      }
    }
  }
  .popover-content-container {
    &:has(form) {
      max-width: 860px;
      width: 100%;
    }
    max-height: 650px;
    overflow-y:scroll;
    text-align:initial;
    h1,h2,h3,h4,h5,h6 {
      color: initial;
    }
  }
}
/* Team Member Popover CSS */
.popover-container.team-member {
  .popover-content-upper {
    display:block;
    margin-bottom: 30px;
    .popover-member-name {
      margin-bottom:0;
      font-weight: bold;
     }
     .popover-member-position {
      margin-top: 10px;
      margin-bottom:0;
     }
     .social-links {
       display:flex;
       margin-top: 20px;
       gap: 5px;
       a {
         margin:0;
         display:flex;
       }
       a:after {
         display:none;
       }
       a:hover {
         svg path {
           fill: var(--action1);
         }
       }
     }
  }

  .popover-member-bio {
    display: block;
  }
  
}


/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/

/* splide pagination and arrows */
ul.splide__pagination {
  position: relative;
  margin-top: 30px;
  bottom: unset;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  padding:0;
  li {
    margin:0;
    padding:0;

    button.splide__pagination__page {
      width: 24px;
      height: 24px;
      margin:0;
      opacity:1;
      border: 2px solid var(--black);
      border-radius: 50%;
      background: transparent;
      transform: none;
      transition: var(--animation1);
      &:not(.is-active) {
        &:hover,&:focus {
          background: var(--black-10);
          
        }
      }
      &.is-active {
        background: var(--black);
        transform: none;
      }
    }
  }
  .dark-mode & {
    li {
      button.splide__pagination__page {
        border: 2px solid var(--white);
        &.is-active {
          background: var(--white);
          transform: none;
        }
        &:not(.is-active) {
          &:hover,&:focus {
            background: var(--white-20);
          }
        }
      }
     
    }
  }
}

.splide__arrows {
  .splide__arrow {
    background:var(--white);
    border: 1px solid var(--gray1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--animation1);
    box-shadow: var(--shadow1);
    opacity:1!important;
      svg {
        transition: var(--animation1);
        path {
          fill: var(--black);
          transition: var(--animation1);
        }
      }    
    &.splide__arrow--prev {
      left: -18px;
      transform:scale(0.8);
    }
    &.splide__arrow--next {
      right: -18px;
      transform:scale(0.8);
    }

    &:hover:not(:disabled) {
      border: 1px solid var(--black);
      background-color: var(--black);
      opacity:1!important;
      svg {
        path {
          fill: var(--white);
        }
      }
    }
  }
  .dark-mode & {
    .splide__arrow {
      background:var(--white);
      border: 1px solid var(--gray1);
      svg path {
        fill: var(--black);
      }
      &:hover:not(:disabled) {
        border: 1px solid var(--gray2);
        background-color: var(--light-gray);
        svg path {
          fill: var(--black);
        }
      }
    }
  }
}
/* body */
body {
  font-size: 16px;
  line-height: 1.61803398875;
  /* Golden ratio */
  font-family: var(--font1);
  color: var(--isg-text);
  font-weight: normal;
}


/* Set default text size */

section:not(.dark-mode) {
  h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  span {
    color: var(--action1);
  }
}
}

section.dark-mode {
  h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  span {
    color: var(--white);
  }
}
}

/* Display headings — match live ISG2021 (Roboto Slab, extra-light) */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
  font-family: var(--font2);
  color: var(--isg-navy);
  font-weight: 200;
}

/* Utility headings — match live ISG2021 (Open Sans, semibold) */
h5, .h5,
h6, .h6 {
  font-family: var(--font1);
  color: var(--isg-navy);
  font-weight: 600;
}

/* 0 top margin on 1st header */
p:first-child,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-top: 0;
}

/* heading styles — sizes/breakpoints from live isg-one.com ISG2021 main.css */
h1,
.h1 {
  font-family: var(--font2);
  font-size: 4.25rem; /* 68px */
  font-weight: 200;
  letter-spacing: normal;
  margin: 0 0 20px;
  line-height: 1.05;

  @media (max-width: 1180px) {
    font-size: 70px;
  }

  @media (max-width: 988px) {
    font-size: 60px;
  }

  @media (max-width: 620px) {
    font-size: 50px;
  }
}

h2,
.h2 {
  font-family: var(--font2);
  font-size: 3.45rem; /* 55.2px */
  font-weight: 200;
  letter-spacing: normal;
  margin: 0 0 20px;
  line-height: 1.1;

  @media (max-width: 768px) {
    font-size: 45px;
  }

  @media (max-width: 600px) {
    font-size: 38px;
  }
}

h3,
.h3 {
  font-family: var(--font2);
  font-size: 2.5rem; /* 40px */
  font-weight: 200;
  letter-spacing: normal;
  margin: 0 0 15px;
  line-height: 1.32;

  @media (max-width: 768px) {
    font-size: 30px;
  }
}

h4,
.h4 {
  font-family: var(--font2);
  font-size: 1.75rem; /* 28px */
  font-weight: 300;
  letter-spacing: normal;
  margin: 0 0 15px;
  line-height: 1.2;

  @media (max-width: 600px) {
    font-size: 22px;
  }
}

h5,
.h5 {
  font-family: var(--font1);
  font-size: 1.75rem; /* 28px */
  font-weight: 600;
  letter-spacing: normal;
  margin: 0 0 15px;
  line-height: 1.42;
}

h6,
.h6 {
  font-family: var(--font1);
  font-size: 1.125rem; /* 18px */
  font-weight: 600;
  letter-spacing: normal;
  margin: 0 0 15px;
  line-height: 1.25;
}

/* body styles */
.b1 {
  font-family: var(--font1);
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: .25px;
  margin-bottom: 20px;

  @media (max-width: 580px) {
    font-size: 17px;
  }
}

.b2 {
  font-family: var(--font1);
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: .25px;
  margin-bottom: 20px;

  @media (max-width: 580px) {
    font-size: 16px;
  }
}

.b3 {
  font-family: var(--font1);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: .25px;
  margin-bottom: 20px;

  @media (max-width: 580px) {
    font-size: 15px;
  }
}

.b4 {
  font-family: var(--font1);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .35px;
  margin-bottom: 20px;

  @media (max-width: 580px) {
    font-size: 14px;
  }
}

.b5 {
  font-family: var(--font1);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .35px;
  margin-bottom: 20px;

  @media (max-width: 580px) {
    font-size: 13px;
  }
}

.b6 {
  font-family: var(--font1);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .35px;
  margin-bottom: 10px;

  @media (max-width: 580px) {
    font-size: 12px;
  }
}

.blockquote,blockquote {
  font-family: var(--font1);
  font-size: 20px;
  font-weight: 500;
  font-style: italic;
  margin: 50px auto;
  display: block;
  padding: 50px;
  max-width: 100%;
  border-radius: var(--border3);
  border: 1px solid var(--gray1);
  background: var(--white);
  @media (max-width: 1024px) {
    padding: 30px;
    
  }
  @media (max-width: 580px) {
    padding: 20px;
    font-size: 18px;
  }
  p:last-of-type {
    margin-bottom: 0;
  }
  p:first-of-type {
    margin-top: 0;
  }


}

.eyebrow {
  font-family: var(--font1);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
  @media (max-width: 580px) {
    font-size: 12px;
  }
}
/****************/
/* BUTTON .btn */
/**************/
a.btn,
span.btn a,
input.hs-button,span.btn button:not(.close-btn),button.btn,.systems-page form button {
  display: inline-block;
  font-family: var(--font1);
  color: var(--white);
  background-color: var(--isg-primary);
  border: 2px solid var(--isg-primary);
  border-radius: var(--button-radius);
  padding: 14px 32px;
  margin:0;
  transition: var(--animation2);
  text-transform: none;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: normal;
  cursor: pointer;
  text-align: center;
}

a.btn:hover,
a.btn:focus,
span.btn a:hover,
span.btn a:focus,
input.hs-button:hover,
input.hs-button:focus,
span.btn button:not(.close-btn):hover,
span.btn button:not(.close-btn):focus,
button.btn:hover,
button.btn:focus,.systems-page form button:hover,.systems-page form button:focus {
  background-color: var(--isg-darkblue);
  color: var(--white);
  border-color: var(--isg-darkblue);
}

/******************************************/
/* ISG BRAND BUTTON VARIANTS              */
/* (match live isg-one.com color classes) */
/******************************************/
a.btn-primary, span.btn-primary a, button.btn-primary,
a.btn-teal, span.btn-teal a, button.btn-teal,
a.btn-orange, span.btn-orange a, button.btn-orange,
a.btn-lightblue, span.btn-lightblue a, button.btn-lightblue {
  display: inline-block;
  font-family: var(--font1);
  padding: 15px 40px;
  margin: 0;
  border: 2px solid transparent;
  border-radius: var(--border1);
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: .25px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: var(--animation1);
  color: var(--white);
}

a.btn-primary, span.btn-primary a, button.btn-primary {
  background-color: var(--isg-primary);
  border-color: var(--isg-primary);
  color: var(--white);

  &:hover, &:focus {
    background-color: var(--isg-darkblue);
    border-color: var(--isg-darkblue);
  }
}

a.btn-teal, span.btn-teal a, button.btn-teal {
  background-color: var(--isg-teal);
  border-color: var(--isg-teal);
  color: var(--white);

  &:hover, &:focus {
    background-color: var(--isg-darkteal);
    border-color: var(--isg-darkteal);
  }
}

a.btn-orange, span.btn-orange a, button.btn-orange {
  background-color: var(--isg-orange);
  border-color: var(--isg-orange);
  color: var(--white);

  &:hover, &:focus {
    background-color: var(--isg-darkblue);
    border-color: var(--isg-darkblue);
  }
}

a.btn-lightblue, span.btn-lightblue a, button.btn-lightblue {
  background-color: var(--isg-lightblue);
  border-color: var(--isg-lightblue);
  color: var(--isg-navy);

  &:hover, &:focus {
    background-color: var(--isg-blue);
    border-color: var(--isg-blue);
    color: var(--white);
  }
}

/***************************/
/* BUTTON WHITE .btn-white */
/***************************/
span.btn-white a,
a.btn-white,
span.btn-white button:not(.close-btn),
button.btn-white {
  display: inline-block;
  font-family: var(--font1);
  color: var(--black);
  background-color: var(--white);
  border: 2px solid var(--white);
  border-radius: var(--border1);
  padding: 15px 40px 15px 40px;
  /* margin: 20px 0; */
  margin:0;
  transition: var(--animation1);
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: .25px;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}

a.btn-white:hover,
a.btn-white:focus,
span.btn-white a:hover,
span.btn-white a:focus,
span.btn-white button:not(.close-btn):hover,
span.btn-white button:not(.close-btn):focus,
button.btn-white:hover,
button.btn-white:focus {
  background-color: rgba(255, 255, 255, .25);
  border-color: var(--white);
  color: var(--white);
}

/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/

/********************************/
/* BUTTON STROKED .btn-stroked */
/******************************/
a.btn-stroked,
span.btn-stroked a,
span.btn-stroked button:not(.close-btn),
button.btn-stroked {
  display: inline-block;
  font-family: var(--font1);
  color: var(--black);
  background-color: transparent;
  border: 2px solid var(--black);
  padding: 15px 40px;
  /* margin: 20px 0; */
  margin:0;
  transition: var(--animation1);
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: .25px;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  border-radius: var(--border1);
}

a.btn-stroked:hover,
a.btn-stroked:focus,
span.btn-stroked a:hover,
span.btn-stroked a:focus,
span.btn-stroked button:not(.close-btn):hover,
span.btn-stroked button:not(.close-btn):focus,
button.btn-stroked:hover,
button.btn-stroked:focus {
  background-color: var(--black);
  color: var(--white);
}

/********************************************/
/* BUTTON STROKED WHITE .btn-stroked-white */
/******************************************/
a.btn-stroked-white,
span.btn-stroked-white a,
span.btn-stroked-white button:not(.close-btn),
button.btn-stroked-white {
  display: inline-block;
  font-family: var(--font1);
  color: var(--white);
  background-color: transparent;
  border: 2px solid var(--white);
  padding: 15px 40px;
  /* margin: 20px 0; */
  margin:0;
  transition: var(--animation1);
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: .25px;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  border-radius: var(--border1);
}

a.btn-stroked-white:hover,
a.btn-stroked-white:focus,
span.btn-stroked-white a:hover,
span.btn-stroked-white a:focus,
span.btn-stroked-white button:not(.close-btn):hover,
span.btn-stroked-white button:not(.close-btn):focus,
button.btn-stroked-white:hover,
button.btn-stroked-white:focus {
  background-color: rgba(255, 255, 255, .25);
  border-color: var(--white);
  color: var(--white);
}


/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/


/**************************/
/* BUTTON TEXT .btn-text */
/*************************/
a.btn-text,
span.btn-text a,
.read-more,
span.btn-text button:not(.close-btn),
button.btn-text {
  font-weight: bold;
  /* margin: 20px 0; */
  margin:0;
  cursor: pointer;
  text-decoration: none;
  color: var(--black);
  border: none;
  background-color: transparent;
  padding:0;

  &:after {
    content: "→";
    display: inline-block;
    font-family: var(--font1);
    margin-left: 2px;
    top: 1px;
    font-size: 120%;
    line-height: 0;
    position: relative;
    font-weight: bold;
    transition: var(--animation1);
    color: var(--action1);
  }
}

a.btn-text:hover,
a.btn-text:focus,
span.btn-text a:hover,
span.btn-text a:focus,
.read-more:hover,
.read-more:focus,
span.btn-text button:not(.close-btn):hover,
span.btn-text button:not(.close-btn):focus,
button.btn-text:hover,
button.btn-text:focus {
  color: var(--action1);

  &:after {
    transform: translateX(2px);
  }
}

/**************************************/
/* BUTTON TEXT WHITE .btn-text-white */
/************************************/
a.btn-text-white,
span.btn-text-white a,
span.btn-text-white button:not(.close-btn),
button.btn-text-white {
  font-weight: bold;
  /* margin: 20px 0; */
  margin:0;
  cursor: pointer;
  text-decoration: none;
  color: var(--white);
  border: none;
  background-color: transparent;
  padding:0;
  &:after {
    content: "→";
    display: inline-block;
    margin-left: 2px;
    top: 1px;
    font-size: 120%;
    line-height: 0;
    position: relative;
    transition: var(--animation1);
    font-weight: bold;
    font-family: var(--font1);
    color: var(--white);
  }
}

a.btn-text-white:hover,
a.btn-text-white:focus,
span.btn-text-white a:hover,
span.btn-text-white a:focus,
span.btn-text-white button:not(.close-btn):hover,
span.btn-text-white button:not(.close-btn):focus,
button.btn-text-white:hover,
button.btn-text-white:focus {
  color: var(--white);
  opacity: .8;

  &:after {
    transform: translateX(2px);
  }
}





/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/


/* BUTTON SMALL .btn__sm */
a.btn.btn__sm,
.btn.btn__sm a,
span.btn-small button:not(.close-btn),
button.btn-small {
  padding: 8px 20px 7px 20px;
  font-size: 12px;
  line-height: 1.2;
}


/*****************************/
/* BUTTON NAV LINK .btn-nav */
/***************************/
span.btn-nav {
  display: block;
  width: 100%;
}

/* Matches live isg-one.com .btn.btn-transparent hero anchor links:
   solid dark slate body with a steel-blue triangle arrow rendered as a
   left-aligned background SVG. */
span.btn-nav a,
a.btn-nav {
  display: block;
  width: 100%;
  padding: 12px 16px 12px 50px;
  background-color: #1b2d37;
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='63' viewBox='0 0 30 63' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 29.7205L-2.5 -14.5V80.5L30 29.7205Z' fill='%23578C9C'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: -5px 50%;
  color: var(--white);
  font-family: var(--font1);
  font-size: 12px;
  font-weight: 200;
  line-height: 1.6;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 5px;
  transition: var(--animation1);

  &:hover,
  &:focus {
    background-color: #24404f;
    color: var(--white);
  }
}
/***************************************/
.card {
  border-radius: var(--border3);
  
    position: relative;
    display: flex;
    flex-direction: column;
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    border: 1px solid var(--gray1);
    background-color: var(--white);
    transition: all var(--animation2);
    

  &.full-click {
    &:hover,&:focus {
      border: 1px solid var(--action1);
    }
    .button-group a, .button-group button {
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
  }

  &:has(.media.icon) {
    .content {
      padding-top: 20px;
    }
    }

  .media {
    &.image {
      position: relative;
      aspect-ratio: 16/9;
      border-top-right-radius: inherit;
      border-top-left-radius: inherit;
      overflow: hidden;
      /* min-height: 200px; */
      img {
        
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    }
    &.icon {
      padding: 30px 30px 0 30px;
      &>span {
        display: flex;
      }
      svg {
        height:  36px;
        path {
          fill: var(--action1);
        }
      }
      /* Custom uploaded icons share FA icon sizing */
      img {
        display: block;
        height: 36px;
        width: auto;
        object-fit: contain;
      }

      &.larger-icon {
        svg,
        img {
          height: 80px;
        }
      }
    }
  }


  .content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    flex-grow: 1;
    

   .content-upper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex-grow: 1;

      span.eyebrow {
        display: inline-block;
        color: var(--gray3);
        line-height: 1.1;
        font-weight: 500;
        margin-bottom: 12px;
        font-size: 13px;
        letter-spacing: 0.5px;
        background: var(--light-gray);
        padding: 6px 8px;
        border-radius: var(--border1);
        text-transform:none;
      }

      span.title {
        display: block;
        color: var(--black);
        font-weight: bold;
        margin:0;
        line-height: 1.4;
        
      }

      span.description {
        margin-top: 10px;
        color: var(--black);
        display: block;
        margin-bottom: 0;
        p:last-of-type {
          margin-bottom: 0;
        }
      }
   }

    .button-group {
      margin-top: 30px;
    }

  }
}

/***************************************/
.featured-card {
  /* featured cards use .card class */
  @media(min-width: 768px) {
    flex-direction:row;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    gap: 30px;
  
    .media {
      width: 40%;
      border-radius: var(--border3);
    }
    .content {
      width: 60%;
      padding:0;
      .content-upper {
        span.eyebrow {
          font-size: 15px;
          padding: 8px 10px;
        }
        .title {
          font-size: 28px;
        }
      }
    }
  }
  
}

/*****Resource Card**********************************/
.resource-card {
 /* resource cards use .card class */
}

/***************************************/
.blog-card {
  .read-time {
    margin-top: 10px;
  }
}
.form,.popover-content-container:has(form) {
  background-color: var(--light-gray);
  padding: 30px;
  max-width: 765px;
  margin: 0 auto;
  float: none;
  overflow: auto;
  border-radius: var(--border3);
  border: 1px solid var(--gray1);
  .submitted-message {
    text-align: center;
  }
  .form-title:empty {
    display: none;
  }

  form {
    margin-bottom: 0;

    .hs-form-field {
      >label {
        font-size: 12px;
        font-weight: bold;
        line-height: 1.2;
        letter-spacing: 1px;
        pointer-events: auto;
      }
    }


    /* error messages */
    .hs_error_rollup {
      margin-top: 20px;

      .hs-error-msgs {
        margin-top: 0;
      }
    }

    ul.hs-error-msgs {
      margin: -10px 0 20px 0;
      padding: 0;
      list-style: none;

      li {
        display: block;
        text-align: center;
        margin: 0;
        width: 100%;
        font-size: 14px;
        line-height: 1.2;
        font-weight: bold;
        padding: 10px;
        border-radius: var(--border1);
        color: var(--white);
        background-color: red;
      }
    }


    /****** FORM INPUTS ******/
    .form-columns-1,
    .form-columns-2 {
      .input {
        margin-right: 0 !important;
      }
    }

    .form-columns-2 {
      display: flex;
      gap: 20px;
    }

    fieldset {
      max-width: unset;
    }


    input,
    select,
    textarea {

      &.error,
      &.invalid {
        border: 1px solid red;
      }
    }



    /* Text Based Inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"] {
      border-radius: var(--border1);
      margin-top: 2px;
      margin-bottom: 20px;
      font-size: 16px;
      background-color: var(--white);
      padding: 16px;
      width: 100% !important;
      appearance: none;

      &:not(.error):not(.invalid) {
        border: 1px solid transparent;
      }
    }

    /* Select Inputs */


    select {
      position: relative;
      border: 0;
      border-radius: var(--border1);
      margin-top: 2px;
      margin-bottom: 20px;
      font-size: 16px;
      background-color: var(--white);
      padding: 16px;
      cursor: pointer;
      width: 100% !important;
      appearance: none;
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23000"><path d="M480-357.85 253.85-584 296-626.15l184 184 184-184L706.15-584 480-357.85Z"/></svg>');
      background-repeat: no-repeat;
      background-position: right 16px center;
      background-size: 24px;
      color: var(--black);
      &::placeholder {
        color: var(--gray2);
      }
    }

    /* Radios and Checkboxes */
    ul.inputs-list {
      &.multi-container {
        list-style: none;
        padding: 0;
        margin-top: 8px;
        margin-bottom: 20px;

        label {
          >span {
            font-size: 14px;
            font-weight: normal;
            line-height: 1.2;
            pointer-events: auto;
          }
        }

        /* Shared Input Styles */
        input {
          margin-right: 5px;
          cursor: pointer;
        }

        /* Radio Input */
        input[type="radio"] {}

        /* Checkbox Input */
        input[type="checkbox"] {}
      }
    }


    /* Textarea Input */
    textarea {
      border: 1px solid transparent;
      border-radius: var(--border1);
      margin-top: 2px;
      margin-bottom: 20px;
      font-size: 16px;
      background-color: var(--white);
      padding: 16px;
      width: 100% !important;
      min-height: 150px;
      resize: vertical;
    }

    .legal-consent-container {
      font-size: 13px;
      font-weight: normal;
      line-height: 1.6;
      pointer-events: auto;
      display: flex;
      flex-direction: column;
      gap: 10px;

      * {
        margin: 0 !important;
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
          label {
            display: flex;
            gap: 5px;
            cursor: pointer;

            span {
              margin: 0;
            }
          }
        }
      }
    }

    /* Button */
    .hs-button {
      margin-top: 30px;
      margin-bottom: 0;
      display: block;
      width: 100%;
      font-size: 18px;
    }
  }

  .dark-mode & {
    background-color: rgba(255, 255, 255, .75);
  }
}

/* for the "new" hubspot form tool */
.form,.popover-content-container:has(form) {
  .hsfc-Renderer {
    p {
      font-family: var(--font1)!important;
      color: var(--black)!important;
      margin: 0 0 10px 0;
    }
    .hsfc-FormWrapper {
      form {
        .hsfc-Step {
          .hsfc-Step__Content {
            padding:0!important;
            /*---- FORM ROWS ----*/
            .hsfc-Row {
              margin-bottom:20px;
              label {
                font-size: 12px;
                font-weight: bold;
                line-height: 1.2;
                letter-spacing: 1px;
                pointer-events: auto;
              }
              input {
                margin-bottom:0;
              }
              /* FIELD TYPE SPECIFIC STYLES */
              /* rich text */
              .hsfc-RichText {
                margin-bottom: 30px;
                p:last-of-type {
                  margin-bottom:0;
                }
              }
              /* text input */
              .hsfc-TextField {}
              /* phone input */
              .hsfc-PhoneField {
                .hsfc-PhoneInput {
                  margin-bottom: 20px;
                  .hsfc-PhoneInput__FlagAndCaret {
                    border-color: transparent!important;
                  }
                  input.hsfc-TextInput {
                    margin-bottom:0;
                    margin-top:0;
                  }

                }
              }
              /* textarea field */
              .hsfc-TextareaField {
                textarea {
                  background-color: var(--white);
                  border:none;
                }
              }
              /* single checkbox field */
              .hsfc-CheckboxField {
                margin-bottom: 10px;
              }
              /* multiple checkbox field */
              .hsfc-CheckboxFieldGroup {
                margin-bottom:10px;
              }
              /* radio button field */
              .hsfc-RadioFieldGroup {
                margin-bottom: 10px;
              }
              /* file upload field */
              /* select/dropdown field */

            }
            /*---- SUBMIT BUTTON(S) ----*/
            .hsfc-NavigationRow {
              /*button style from buttons.css*/
              button[type="submit"] {
                display: block;
                width:100%;
                display: inline-block;
                font-family: var(--font1);
                color: var(--white);
                background-color: var(--isg-primary);
                border: 2px solid var(--isg-primary);
                border-radius: var(--button-radius);
                padding: 14px 32px;
                margin:0;
                transition: var(--animation2);
                text-transform: none;
                text-decoration: none;
                font-weight: 600;
                font-size: 16px;
                line-height: 1.6;
                letter-spacing: normal;
                cursor: pointer;
                text-align: center;
              &:hover,&:focus {
                transform: none;
                background-color: var(--isg-darkblue);
                color: var(--white);
                border-color: var(--isg-darkblue);
              }
              }
            }
          }
        }
      }
    }
  }
}

.hs-search-field {
  --search-button-bg: var(--action1);
  --search-button-color: var(--white);
  --search-border: var(--action1);
  --search-height: 48px;
  --search-radius: 6px;

  .hs-search-field__bar {
    form {
      display: flex;
      align-items: stretch;
      gap: 0;
      flex-wrap: nowrap;
      margin-bottom: 0;
    }

    .hs-search-field__input {
      height: var(--search-height);
      min-height: var(--search-height);
      padding: 0 1rem;
      border: 1px solid var(--search-border);
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-top-left-radius: var(--search-radius);
      border-bottom-left-radius: var(--search-radius);
      font-size: 16px;
      line-height: 1;
      box-sizing: border-box;
      flex: 0 0 180px;
      appearance: none;

      &:focus {
        outline: none;
        border-color: var(--search-button-bg);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--search-button-bg) 20%, transparent);
      }
    }

    .search-button {
      height: var(--search-height);
      min-height: var(--search-height);
      padding: 0 1rem;
      border: none;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-top-right-radius: var(--search-radius);
      border-bottom-right-radius: var(--search-radius);
      background: var(--search-button-bg);
      color: var(--search-button-color);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-sizing: border-box;
      transition: background 0.2s ease, transform 0.2s ease;

      &:hover {
        filter: brightness(0.95);
      }

      &:focus {
        outline: none;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--search-button-bg) 20%, transparent);
      }

      svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
      }
    }
  }
  ul.hs-search-field__suggestions {
    margin-top: 0;
    margin-bottom: 0;
  }
}


form {
  .hs-form__virality-link {
    display: none!important;
  }
}
/* Keep background from scrolling when menu is open */
html.menu-open {
  overflow-y: hidden;
}

/* set body offset height for fixed header */
body {
  margin-top: var(--header-height);
}

/* topbar collapses on mobile, so the fixed header is only the main bar */
@media (max-width: 1024px) {
  :root {
    --header-height: var(--header-bar-height);
  }
}

body.hide-header {
  margin-top: 0;
}

body.lp-sign-up {
  margin-top: 0;
}



/* HubSpot Cookie Notification */
div#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom.can-use-gradients {
  box-shadow: 2px -1px 5px 0px rgba(0, 0, 0, 0.05);
  border: 0;
  background-color: rgba(var(--white), .9);

  div#hs-eu-cookie-confirmation-inner {
    background-color: rgba(var(--white), 0);
    padding: 15px 20px 10px 20px;
    max-width: 1240px;

    p {
      margin-bottom: 0;
    }

    div#hs-en-cookie-confirmation-buttons-area {
      text-align: left;
      margin: 0;

      a#hs-eu-confirmation-button {
        font-weight: bold;
        margin: 10px 0;

        &:hover {
          background-color: var(--black);
        }
      }
    }
  }
}

/* default p size */
p {
  line-height: 1.5;
}

a {
  color: var(--action1);
}

blockquote,
blockquote p {}

em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

ul {
  list-style: disc;
  padding-left: 40px;
  margin-top: 0;
  margin-bottom: 30px;
}

ol {
  list-style: decimal;
  padding-left: 40px;
  margin-top: 0;
  margin-bottom: 30px;
}

li {
  margin-bottom: 5px;
  letter-spacing: .5px;
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin: 20px 0 20px 20px;
}

input {
  font-family: var(--font1);
}

button {
  font-family: var(--font1);
  cursor: pointer;
}

/* Forms */
form {
  margin-bottom: 30px
}

::-webkit-input-placeholder {
  color: var(--gray3);
  opacity: 1;
  font-weight: normal;
}

/* Webkit input placeholders */
::-moz-placeholder {
  color: var(--gray3);
  opacity: 1;
  font-weight: normal;
}

/* Firefox input placeholders */
:-ms-input-placeholder {
  color: var(--gray3);
  opacity: 1;
  font-weight: normal;
}

/* IE  input placeholders */
/* Images */
img {
  max-width: 100%;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
  vertical-align: bottom;
}

/* Make responsive, clear border, fix IE scaling, suppress the space beneath the baseline, fix Webkit blurring on scaled down files */
svg {
  max-width: 100%;
  width: auto;
  height: auto;
}

/* Horizontal Rule */
hr {
  margin-top: 30px;
  margin-bottom: 35px;
  border-width: 0;
  border-top: 1px solid var(--gray1);
}

/* Abbreviations */
abbr[title] {
  border: 0;
}

/* Code */
code {
  padding: 1px;
  margin: 0 10px;
  white-space: nowrap;
  background: var(--gray1);
  border: 1px solid var(--gray1);
  border-radius: 0;
}

pre>code {
  display: block;
  padding: 1px 15px;
  white-space: pre;
  margin-bottom: 30px
}

pre {
  overflow-x: auto;
}

/* responsive pre elements */
table pre {
  white-space: pre-wrap;
}

/* responsive pre tables */
/* Tables */
th,
td {
  padding: 10px 20px;
  text-align: left;
  border-bottom: 1px solid var(--gray1);
}

th:first-child,
td:first-child {
  padding-left: 0;
}

th:last-child,
td:last-child {
  padding-right: 0;
}

table {
  margin-bottom: 30px
}

table th {
  text-transform: uppercase;
}

table td {
  border-bottom: 1px solid var(--gray2);
  font-size: 14px;
}

a[href='javascript:;'] {
  cursor: default;
}

section[class*='u5m-'] {
  scroll-margin-top: calc(var(--header-height) + 7px);
}

.hs_cos_wrapper_type_form {
  h3 {
    text-align: center;
  }

  form {}
}
section.u5m-404-error,
section.u5m-500-error,section.u5m-backup-unsubscribe {
  margin: 0 auto;
  text-align: center;
  min-height: 60vh;
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  @media (max-width: 768px) {
    min-height: 35vh;
  }
  
}

section.u5m-backup-unsubscribe {
  
  text-align: center;
  #hs_cos_wrapper_backup_unsubscribe_email_simple_subscription {
    h3 {
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
      font-size: 20px;
      line-height: 1.4;
    }
  }


  form {
    h3 {
      font-size: 12px;
      font-weight: bold;
      text-align: left;
      margin-bottom: 4px;
    }

    input {
      border: 1px solid transparent;
      border-radius: 4px;
      margin-top: 2px;
      margin-bottom: 0;
      font-size: 16px;
      padding: 16px;
      width: 100%;
    }

    padding-bottom: 50px;
  }
}

section.u5m-membership-login,
section.u5m-membership-register,
section.u5m-membership-reset-password-request,
section.u5m-membership-reset-password,
section.u5m-password-prompt {

span.form-separator {
  display:block;
  margin-top: 20px;
}

  margin: 180px auto 80px;
  text-align: center;

  ul.hs-error-msgs {
    margin: 10px 0 20px 0;
  }
  .form {
    &.membership-reset-password-request {
      div.hs-form-field:has(ul.no-list) {
        display:none;
      }
      div.hs-form-field {
        input.hs-input {
          margin-bottom: 0;
        }
      }
    }
    &.membership-login, &.membership-register {
      div.hs-form-field:has(ul.no-list) {
        display:none;
      }
    }


    h1 {
      font-size: 40px;
      margin-bottom: 10px;
    }
    form {
      label:not(.hs-error-msg) {
        float:left;
        
      }
      .no-list li label, label#hs-register-widget-checkbox-consent {
        float:none;
      }
      label#hs-register-widget-checkbox-consent {
        position: relative;
        top: -2px;
      }
      label.hs-login-widget-email-label {
        margin-bottom: 10px;
      }
      a.hs-reset-widget-show-password, a.hs-register-widget-show-password, a.hs-login-widget-show-password {
        float:right;
        margin-left:10px;
        position: relative;
        font-size: 14px;
        top: -5px;
        &:hover,&:focus {
          color: var(--black);
        }
      }
      a#hs_login_reset {
        margin-top: 20px;
        display:block;
        &:hover,&:focus {
          color: var(--black);
        }
      }
      .hs-form-field:has(#hs-login-widget-remember),.hs-form-field:has(#hs-passwordless-auth-checkbox-consent){
        display: flex;
        gap: 10px;
        margin-top: 30px;
      }
   
    input[type="password"] {
      height:auto!important;
      margin-bottom: 0;
    }

  }
  }
  div>p {
    margin-top: 20px;
    a {
      &:hover,&:focus {
        color: var(--black);
      }
    }
  }

}

section.u5m-password-prompt {
  form {
    padding-top: 30px;
  }
}

section.u5m-search-results {
  margin: 0 auto;

  /* ===== Hero search band (light-gray, full-width) ===== */
  .search-hero {
    background-color: var(--isg-lightgray);
    padding: 64px 0;
    @media (max-width: 768px) {
      padding: 40px 0;
    }

    .search-hero__form {
      position: relative;
      display: flex;
      align-items: center;
    }

    .search-hero__input {
      width: 100%;
      height: 64px;
      margin: 0;
      padding: 0 64px 0 20px;
      font-size: 18px;
      color: var(--isg-navy);
      background-color: var(--white);
      border: 1px solid var(--isg-border);
      border-radius: 0;
      transition: border-color var(--animation2);
      &::placeholder {
        color: var(--gray2);
      }
      &:hover,
      &:focus {
        border-color: var(--action1);
        outline: none;
      }
      @media (max-width: 768px) {
        height: 56px;
        font-size: 16px;
      }
    }

    .search-hero__button {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 64px;
      width: 64px;
      padding: 0;
      background: transparent;
      border: 0;
      color: var(--gray2);
      cursor: pointer;
      transition: color var(--animation2);
      svg {
        height: 24px;
        width: 24px;
        fill: currentColor;
      }
      &:hover,
      &:focus {
        color: var(--action1);
      }
      @media (max-width: 768px) {
        height: 56px;
        width: 56px;
      }
    }
  }

  /* ===== Results body (white) ===== */
  .search-body {
    padding: 64px 0 100px;
    @media (max-width: 768px) {
      padding: 40px 0 60px;
    }

    .systems-page {
      .search-results-heading {
        font-family: var(--font2);
        color: var(--isg-blue);
        font-size: 48px;
        line-height: 1.1;
        margin: 0 0 30px;
        @media (max-width: 768px) {
          font-size: 36px;
        }
      }

      .search-results-empty {
        margin: 0;
        font-size: 18px;
        color: var(--isg-text);
      }

      .filters-wrapper {
        margin-bottom: 40px;
        @media (max-width: 768px) {
          margin-bottom: 30px;
        }
        select {
          position: relative;
          border: 1px solid var(--gray1);
          border-radius: var(--border1);
          transition: border-color var(--animation2);
          margin-top: 0px;
          margin-bottom: 0px;
          font-size: 16px;
          background-color: var(--white);
          padding: 16px;
          cursor: pointer;
          width: 100% !important;
          appearance: none;
          background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23000"><path d="M480-357.85 253.85-584 296-626.15l184 184 184-184L706.15-584 480-357.85Z"/></svg>');
          background-repeat: no-repeat;
          background-position: right 16px center;
          background-size: 24px;
          color: var(--black);
          &::placeholder {
            color: var(--gray2);
          }
          &:hover,
          &:focus {
            border-color: var(--action1);
          }
        }
      }
    }
  }

  .hs-search__no-results {
    p {
      font-size: 18px;
    }
  }
}

section.u5m-subscription-preferences {
  margin: 180px auto 80px;
.page-header br {
  display: none;
}
  .systems-page {
    .form-group {
      .form {
        max-width: 1000px;
        form {
          h1 {
            font-size: 40px;
          }
          h2 {
            font-size: 24px;
          }
          .email-prefs {
            margin-top: 30px;
            div.item {
              border-bottom: 1px solid var(--gray1);
              margin-bottom: 25px;
              .item-inner {
                padding-bottom: 25px;
                  div.checkbox-row span span {
                    font-weight: bold;
                    padding-left: 5px;
                  }
               p {
                margin:0;
                padding-left: 22px;
               } 
              }


            }
          }
          

          div.subscribe-options p span {
            font-weight: bold;
            padding-left: 5px;
          }
        }
      }
    }
  }
}

section.u5m-subscriptions-confirmation {
  margin: 180px auto 80px;
  form {
    margin-top: 20px;
    fieldset {
      padding:0;
      &#hs-subscriptions-unsubscribe-survey-fieldset {
        legend {
          margin-bottom: 10px;
        }
        #hs-subscriptions-unsubscribe-survey-options {
          div {
            margin-bottom: 5px;
            label {
              input {margin-right: 5px;}
            }
          }
        }
      }
      textarea {
        margin: 20px 0 0 0;
      }
    }
    button {}
  }
  div.success {
    font-weight: bold;
  }
}
.visually-hidden,
.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001s;
    transition-duration: 0.001s;
    animation-iteration-count: 1;
  }
}

.skip-to-content-link {
  background: var(--action1);
  min-height: 40px;
  left: 50%;
  padding: 10px;
  position: absolute;
  transform: translate(-50%, -100%);
  transition: transform 0.3s;
  z-index: 20;
  display:flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--white);
  font-weight: bold;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: .25px;
  cursor: pointer;
}

.skip-to-content-link:focus {
  transform: translate(-50%, 0%);
}
section.u5m-blog-post {
  position: relative;
  &.has-sidebar {
    --content-width: 1240px;
    --body-max-width: 800px;
  }
  &:not(.has-sidebar) {
    --content-width:920px;
  }

  /*****************************************/
  /* .hero */
  /*****************************************/
  .hero {
    background-color: var(--light-gray);
    margin-bottom:0;
    position: relative;
    padding: 80px 0;
    @media(max-width: 580px) {
      padding: 50px 0;
    }

    .section-inner.center {
      max-width: var(--content-width);
    }

    .hero-layout {
      display: flex;
      align-items: stretch;
      gap: 40px;

      @media(max-width: 900px) {
        flex-direction: column;
        gap: 24px;
      }
    }

    &.has-featured-image {
      .featured-image {
        flex: 1 1 50%;
        min-width: 0;
        border-radius: var(--border2);
        overflow: hidden;
        background-color: var(--gray1);

        img {
          display: block;
          width: 100%;
          height: 100%;
          min-height: 280px;
          object-fit: cover;
          object-position: 50% 50%;

          @media(max-width: 900px) {
            min-height: 220px;
            max-height: 360px;
          }
        }
      }

      .content {
        flex: 1 1 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
      }
    }

    .content {
      padding: 0;
      margin: 0;

      span.date {
        display:block;
        margin-bottom: 15px;
        font-weight: 500;
        font-size: 14px;
      }

      h1.title {
        margin: 0;
      }

      .author-wrap {
        display: flex;
        align-items: center;
        margin: 20px 0 0;
        justify-content:flex-start;
        gap: 10px;
        .avatar {
          overflow: hidden;
          height: 36px;
          width: 36px;
          border-radius: 50%;
          flex: 0 0 36px;
          img {
            object-fit: cover;
            object-position: 50% 50%;
            width: 100%;
            height: 100%;
          }
        }

        .author-link {
          font-size: 14px;
          a {
            font-weight: 500;
            color: var(--black);
            transition: var(--animation1);
          }

          a:hover {
            color: var(--action1);
          }
        }
      }
    }
  }

  /*****************************************/
  /* .share */
  /*****************************************/
  .share {
    margin-bottom: 50px;
    padding: 8px 0;
    background-color: var(--white);
    border-top: 1px solid var(--gray1);
    border-bottom: 1px solid var(--gray1);
    position: sticky;
    top: 100px;
    z-index:2;

    &.share-bottom {
      position: static;
      margin: 50px auto 0;
      max-width: var(--content-width);
      padding: 16px 20px;
      border: 0;
      border-top: 1px solid var(--gray1);
      background: transparent;
    }

    .section-inner.center {
      max-width: var(--content-width);
      display:flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .share-left {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    span.label {
      font-weight: 600;
      font-size: 14px;
    }

    .share-links {
      display:flex;
      gap: 5px;
      align-items: center;
      flex-direction:row;
      a {
        display:flex;
        svg {
          path {
            fill: var(--black);
            transition: var(--animation1);
          }
        }
        &:hover,&:focus {
          svg {
            path {
              fill: var(--action1);
            }
          }
        }
      }
    }

    .print-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      padding: 6px 14px;
      border: 1px solid var(--gray1);
      border-radius: var(--border2);
      background: var(--white);
      color: var(--black);
      font: inherit;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--animation1);

      &:hover,
      &:focus {
        border-color: var(--black);
        color: var(--action1);
      }
    }
  }

  /*****************************************/
  /* .body */
  /*****************************************/
  .body {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 20px;

    .content {
      img {
        border-radius: var(--border2);
      }

      h1,h2,h3,h4,h5,h6 {
        margin-top: 30px;
      }

      a {
        font-weight: bold;

        &:hover {
          color: var(--black);
        }
      }

      /* Hide leftover Sitefinity share markup from the import */
      .noprint,
      .row.justify-content-sm-between,
      .paywall-blur {
        display: none !important;
      }
    }

    &.has-sidebar {
      display: flex;
      flex-direction: row;
      gap: 80px;

      @media(max-width: 991px) {
        flex-direction: column;
      }

      .content {
          max-width: var(--body-max-width);
          width: 100%;
          @media(max-width: 991px) {
            order:2;
            max-width: 100%;
          }
          h2 {
            scroll-margin-top:160px;
          }
        }
      .blog-sidebar {
        max-width: 320px;
        width: 100%;
        position:relative;
        @media(max-width: 991px) {
          order:1;
          max-width: 100%;
        }
        .blog-sidebar-inner {
          position:sticky;
          top: 170px;
          padding: 20px;
          background-color: var(--white);
          border-radius: var(--border2);
          border: 1px solid var(--gray1);
          .title {
            font-weight: 600;
            margin-bottom:12px;
          }
          .toc-list {
            padding-left:20px;
            margin:0;
            li.toc-item {
              margin-bottom:12px;
              line-height:1.4;
              &::marker {
                color: var(--action1);
                font-weight: 600;
              }
              &:last-of-type {
                margin-bottom:0;
              }
              a.toc-link {
                color: var(--black);
                transition: var(--animation1);
                text-decoration: none;
                &.active {
                  color: var(--action1);
                }
                &:hover,&:focus {
                  color: var(--action1);
                  text-decoration:underline;
                }
              }
            }
          }
        }
      }
    }
  }

  /*****************************************/
  /* .author */
  /*****************************************/
  .author {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 50px 20px 0;

    .author-heading {
      margin: 0 0 24px;
      padding-top: 40px;
      border-top: 1px solid var(--gray1);
      font-size: 28px;
    }

    .author-info {
      display: flex;
      align-items: flex-start;
      gap: 24px;

      @media (max-width: 575.98px) {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
    }

    .avatar {
      flex: 0 0 120px;
      width: 120px;
      height: 120px;
      overflow: hidden;
      border-radius: 50%;
      background-color: var(--light-gray);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
      }
    }

    .bio {
      flex: 1 1 auto;
      min-width: 0;

      .name {
        margin: 0 0 12px;
        font-size: 22px;

        a {
          color: var(--black);
          text-decoration: none;
          transition: var(--animation1);

          &:hover,
          &:focus {
            color: var(--action1);
          }
        }
      }

      .bio-text {
        p {
          margin: 0 0 12px;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      .social {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 16px;

        @media (max-width: 575.98px) {
          justify-content: center;
        }

        a {
          display: flex;

          svg path {
            fill: var(--black);
            transition: var(--animation1);
          }

          &:hover,
          &:focus {
            svg path {
              fill: var(--action1);
            }
          }
        }
      }
    }
  }

  /*****************************************/
  /* print */
  /*****************************************/
  @media print {
    .share,
    .blog-sidebar,
    .author .social {
      display: none !important;
    }

    .hero {
      padding: 0;
      background: none;
    }
  }
}
/* CSS Keyframes */
@keyframes fadeIn1 {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes fadeIn2 {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  50% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
/* default anchor link offset */
div.hs_cos_wrapper_widget section.top-margin-none {
  margin-top: 0;
}

/* module overrides */
div.hs_cos_wrapper_widget section.top-margin-small {
  margin-top: 50px;

  @media (max-width: 767px) {
    margin-top: 35px;
  }

  @media (max-width: 575.98px) {
    margin-top: 25px;
  }
}

div.hs_cos_wrapper_widget section.top-margin-medium {
  margin-top: 100px;

  @media (max-width: 767px) {
    margin-top: 75px;
  }

  @media (max-width: 575.98px) {
    margin-top: 50px;
  }
}

div.hs_cos_wrapper_widget section.top-margin-large {
  margin-top: 150px;

  @media (max-width: 767px) {
    margin-top: 115px;
  }

  @media (max-width: 575.98px) {
    margin-top: 75px;
  }
}

div.hs_cos_wrapper_widget section.bottom-margin-none {
  margin-bottom: 0;
}

div.hs_cos_wrapper_widget section.bottom-margin-small {
  margin-bottom: 50px;

  @media (max-width: 767px) {
    margin-bottom: 35px;
  }

  @media (max-width: 575.98px) {
    margin-bottom: 25px;
  }
}

div.hs_cos_wrapper_widget section.bottom-margin-medium {
  margin-bottom: 100px;

  @media (max-width: 767px) {
    margin-bottom: 75px
  }

  @media (max-width: 575.98px) {
    margin-bottom: 50px
  }
}

div.hs_cos_wrapper_widget section.bottom-margin-large {
  margin-bottom: 150px;

  @media (max-width: 767px) {
    margin-bottom: 115px;
  }

  @media (max-width: 575.98px) {
    margin-bottom: 75px;
  }
}

div.hs_cos_wrapper_widget section.top-padding-none {
  padding-top: 0;
}

div.hs_cos_wrapper_widget section.top-padding-small {
  padding-top: 50px;

  @media (max-width: 767px) {
    padding-top: 35px;
  }

  @media (max-width: 575.98px) {
    padding-top: 25px;
  }
}

div.hs_cos_wrapper_widget section.top-padding-medium {
  padding-top: 100px;

  @media (max-width: 767px) {
    padding-top: 75px;
  }

  @media (max-width: 575.98px) {
    padding-top: 50px;
  }
}

div.hs_cos_wrapper_widget section.top-padding-large {
  padding-top: 150px;

  @media (max-width: 767px) {
    padding-top: 115px;
  }

  @media (max-width: 575.98px) {
    padding-top: 75px;
  }
}

div.hs_cos_wrapper_widget section.bottom-padding-none {
  padding-bottom: 0;
}

div.hs_cos_wrapper_widget section.bottom-padding-small {
  padding-bottom: 50px;

  @media (max-width: 767px) {
    padding-bottom: 35px;
  }

  @media (max-width: 575.98px) {
    padding-bottom: 25px;
  }
}

div.hs_cos_wrapper_widget section.bottom-padding-medium {
  padding-bottom: 100px;

  @media (max-width: 767px) {
    padding-bottom: 75px;
  }

  @media (max-width: 575.98px) {
    padding-bottom: 50px;
  }
}

div.hs_cos_wrapper_widget section.bottom-padding-large {
  padding-bottom: 150px;

  @media (max-width: 767px) {
    padding-bottom: 115px;
  }

  @media (max-width: 575.98px) {
    padding-bottom: 75px;
  }
}
.intro-content {
    display: flex;
    flex-direction: column;

    &.left-aligned {
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;

        .heading,
        .description {
            margin-left: 0;
            margin-right: auto;
            max-width: none;
        }

        .button-group {
            justify-content: flex-start;
        }
    }
    &.left-aligned.two-column {
        @media (min-width: 992px) {
            flex-direction: row;
            gap: 50px;
            justify-content: space-between;
            align-items: flex-end;
            width: 100%;
            .intro-content-upper {
                flex: 0 1 60%;
            }
            .button-group {
                flex: 0 1 40%;
                margin:0;
                display: flex;
                justify-content: flex-end;
                align-items: flex-end;
            }
        } 
    }

    &.center-aligned {
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-left: auto;
        margin-right: auto;

        .heading,
        .description {
            margin-left: auto;
            margin-right: auto;
        }

        .button-group {
            justify-content: center;
        }
    }

    .eyebrow {}

    .heading {
        max-width: 900px;
        margin-top: 0;
    }

    span.description {
        margin-bottom: 0;
        max-width: 750px;
        display: block;

        * {
            font-size: inherit;
        }

        *:last-child {
            margin-bottom: 0;
        }

        a {
            text-decoration: underline;

            &:hover,
            &:focus {
                color: var(--black);
            }
        }
    }


    .button-group {
        display: flex;
        gap: 20px;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 30px;

        span.button-span {
            @media (max-width: 767px) {
                width: auto;
            }

            a {
                margin: 0;
            }
        }

        &:has(.btn-nav) {
            flex-direction: column;
            gap: 20px;
            align-items: stretch;
            width: 100%;
        }
    }

}







section.dark-mode {
    .intro-content {
        .intro-content-upper {
            .eyebrow {
                color: var(--white);
            }
    
            h1,
            h2,
            h3 {
                color: var(--white);
            }
    
            span.description {
                color: var(--white);
                font-weight: 500;
    
                * {
                    color: var(--white);
    
                }
    
                a {
                    text-decoration: underline;
    
                    &:hover,
                    &:focus {
                        opacity: .8;
                    }
                }
    
            }
        }

    }
}
/* ===== Global header chrome (always loaded via main.css) =====
   The main nav bar itself is rendered + styled by the u5m-mega-menu-isg module.
   This file owns the fixed header wrapper + the dark-navy utility topbar so the
   chrome is styled regardless of which mega-menu module is in the partial. */

header {
  background-color: var(--isg-blue);
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;

  .hd-topbar {
    background-color: var(--isg-darkblue);

    @media (max-width: 1024px) {
      display: none;
    }

    .hd-topbar-inr {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      min-height: var(--topbar-height);
      padding: 0 20px;

      .hs-menu-wrapper > ul {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 24px;
        margin: 0;
        padding: 0;
        list-style: none;

        /* utility bar is a single row only - never expose nested levels */
        ul {
          display: none;
        }

        li {
          margin: 0;
          letter-spacing: normal;
          line-height: normal;

          a {
            color: var(--white);
            font-size: 13px;
            white-space: nowrap;
            text-decoration: none;
            transition: var(--animation1);

            &:hover {
              color: var(--isg-teal);
            }
          }
        }
      }
    }
  }
}

/* Landing pages: no sticky chrome */
body.hs-landing-page.hs-page header {
  position: absolute;
  background-color: transparent;

  .hd-topbar {
    display: none;
  }
}
/* Standard "bottom content" band (rich text + optional button group) used
   below a module's main content. Rendered via partials/u5-bottom-content.html
   so this styling stays consistent across every module that includes it. */
.bottom-content {
    margin-top: 50px;

    .button-group {
        margin-top: 28px;
    }

    /* Inline layout: text and button(s) sit side by side */
    &.layout-inline {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;

        .bottom-content__text {
            flex: 1 1 auto;
        }

        .button-group {
            flex: 0 0 auto;
            margin-top: 0;
        }

        @media (max-width: 768px) {
            flex-direction: column;
            align-items: flex-start;
        }
    }
}

/* Dark mode: rich text inherits body navy/black unless we force white. */
section.dark-mode {
    .bottom-content {
        color: var(--white);

        h1, h2, h3, h4, h5, h6 {
            color: var(--white);
        }

        a:not([class]) {
            color: var(--white);
            &:hover,
            &:focus {
                color: var(--white);
                opacity: 0.7;
            }
        }
    }
}