/* ----------------------------------- Colors ----------------------------------- */

/* ---- color system ---- */
:root {
--clr-white: hsl(0, 0%, 100%);
--clr-black: hsl(0, 0%, 0%);
--clr-transparent: hsla(0, 0%, 100%, 0);

--clr-neutral-00: hsl(213, 5%, 0%);
--clr-neutral-10: hsl(213, 5%, 10%);
--clr-neutral-20: hsl(213, 5%, 20%);
--clr-neutral-30: hsl(213, 5%, 30%);
--clr-neutral-40: hsl(213, 5%, 40%);
--clr-neutral-50: hsl(213, 5%, 50%);
--clr-neutral-60: hsl(213, 5%, 60%);
--clr-neutral-70: hsl(213, 5%, 70%);
--clr-neutral-80: hsl(213, 5%, 80%);
--clr-neutral-85: hsl(213, 5%, 80%);
--clr-neutral-90: hsl(213, 5%, 90%);
--clr-neutral-95: hsl(213, 5%, 95%);

--clr-accent1-40: hsl(213, 79%, 42%);
--clr-accent1-50: hsl(213, 75%, 48%);
--clr-accent1-60: hsl(213, 75%, 52%);
--clr-accent1-70: hsl(213, 75%, 65%);

--clr-accent1-80: hsl(213, 75%, 75%);
--clr-accent1-85: hsl(213, 75%, 80%);
--clr-accent1-90: hsl(213, 75%, 85%);
--clr-accent1-95: hsl(213, 75%, 90%);

--clr-danger-40: hsl(0, 60%, 45%);
--clr-danger-50: hsl(0, 60%, 50%);
--clr-danger-60: hsl(0, 60%, 60%);
/* --clr-danger-80: hsl(0, 60%, 80%); */
--clr-danger-90: hsl(0, 60%, 90%);
/* --clr-danger-95: hsl(0, 60%, 95%); */

--clr-warning-40: hsl(33, 100%, 44%);
--clr-warning-50: hsl(33, 95%, 48%);
/* --clr-warning-60: var(--clr-accent1-60); */
/* --clr-warning-80: var(--clr-accent1-80); */
--clr-warning-90: hsl(33, 90%, 85%);
/* --clr-warning-95: var(--clr-accent1-95); */

--clr-success-40: hsl(140, 50%, 40%);
--clr-success-50: hsl(140, 50%, 45%);
/* --clr-success-80: hsl(140, 50%, 80%); */
--clr-success-90: hsl(140, 50%, 90%);
/* --clr-success-95: hsl(140, 50%, 95%); */

}

/* ---- color contexts ---- */
/* Assign default colors for all color contexts */
html, 
[class*="color-context-"] { 
	--color-text: var(--color-fg-normal);
	--color-outline: var(--color-fg-vibrant);
	--color-border-default: var(--color-fg-normal);

	--color-btn-primary-border: var(--color-fg-normal);
	--color-btn-primary-border-hover: var(--color-fg-normal-hover);
	--color-btn-primary-bg: var(--color-fg-normal);
	--color-btn-primary-bg-hover: var(--color-fg-normal-hover);
	--color-btn-primary-text: var(--color-bg);
	--color-btn-primary-text-hover: var(--color-bg);
    --color-btn-primary-text-disabled: var(--color-bg);
    --color-btn-primary-bg-disabled: var(--color-fg-xsubdued);
    --color-btn-primary-border-disabled: var(--color-fg-xsubdued);

	--color-btn-secondary-border: var(--color-fg-normal);
	--color-btn-secondary-border-hover: var(--color-fg-normal-hover);
	--color-btn-secondary-bg: transparent;
	--color-btn-secondary-bg-hover: transparent;
	--color-btn-secondary-text: var(--color-fg-normal);
	--color-btn-secondary-text-hover: var(--color-fg-normal-hover);
    --color-btn-secondary-text-disabled: var(--color-fg-xsubdued);
    --color-btn-secondary-bg-disabled: transparent;
    --color-btn-secondary-border-disabled: var(--color-fg-xsubdued);

	--color-btn-tertiary-border: transparent;
	--color-btn-tertiary-border-hover: transparent;
	--color-btn-tertiary-bg: transparent;
	--color-btn-tertiary-bg-hover: transparent;
	--color-btn-tertiary-text: var(--color-fg-vibrant);
	--color-btn-tertiary-text-hover: var(--color-fg-vibrant-hover);
    --color-btn-tertiary-text-disabled: var(--color-fg-xsubdued);
    --color-btn-tertiary-bg-disabled: transparent;
    --color-btn-tertiary-border-disabled: transparent;

	/* solid style */
	--color-input-background: var(--color-bg-shaded-2);
	--color-input-border: var(--color-bg-shaded-2);
	--color-input-border-focus: var(--color-bg-shaded-3);
	--color-input-background-focus: var(--color-bg-shaded-3);
	--color-input-border-disabled: var(--color-bg-shaded);
	--color-input-background-disabled: var(--color-bg-shaded);
	
	/* outline style */
	/* --color-input-background: var(--clr-white);
	--color-input-border: var(--color-fg-subdued);
	--color-input-border-focus: var(--color-fg-normal);
	--color-input-background-focus: var(--color-input-background);
	--color-input-border-disabled: var(--color-fg-xsubdued);
	--color-input-background-disabled: var(--color-input-background); */
	
	--color-input-outline: var(--clr-transparent);
	--color-input-text: var(--color-fg-normal);
	--color-input-placeholder-text: var(--color-fg-subdued);
	--color-input-text-disabled: var(--color-fg-subdued);
	--color-input-text-disabled-placeholder: var(--color-fg-xsubdued);
	--color-input-error-background: var(--clr-danger-90);
	--color-input-error-text: var(--clr-danger-50);
	--color-input-error-border: var(--clr-danger-90);
	--color-input-error-outline: var(--color-outline);
	--color-input-error-placeholder: var(--clr-danger-60);

	/* solid style */
	--color-select-background: var(--color-bg-shaded-2);
	--color-select-border: var(--color-bg-shaded-2);
	--color-select-border-focus: var(--color-bg-shaded-3);
	--color-select-background-focus: var(--color-bg-shaded-3);
	--color-select-border-disabled: var(--color-bg-shaded);
	--color-select-background-disabled: var(--color-bg-shaded);

	/* outline style */
	/* --color-select-background: var(--clr-white);
	--color-select-border: var(--color-fg-subdued);
	--color-select-border-focus: var(--color-fg-normal);
	--color-select-background-focus: var(--color-select-background); 
	--color-select-border-disabled: var(--color-fg-xsubdued);
	--color-select-background-disabled: var(--color-select-background); */

	--color-select-outline: var(--clr-transparent);
	--color-select-text: var(--color-fg-normal);
	--color-select-placeholder-text: var(--color-fg-subdued);
	--color-select-arrow-border: var(--color-fg-normal);
	--color-select-text-disabled: var(--color-fg-subdued);
	--color-select-text-disabled-placeholder: var(--color-fg-xsubdued);
	--color-select-arrow-border-disabled: var(--color-fg-xsubdued);
	--color-select-error-background: var(--clr-danger-90);
	--color-select-error-text: var(--clr-danger-50);
	--color-select-error-border: var(--color-select-error-background);
	--color-select-error-outline: var(--color-outline);
	--color-select-error-placeholder: var(--clr-danger-60);

	--color-label-error-text: var(--clr-danger-50);
	--color-field-error-description: var(--clr-danger-50);
	--color-field-description: var(--color-fg-subdued);

	--color-checkradio-label-disabled: var(--color-fg-subdued);

	/* outline style */
	/* --color-checkradio-background: var(--clr-white);
	--color-checkradio-background-disabled: var(--color-checkradio-background);
	--color-checkradio-background-checked: var(--color-checkradio-background);
	--color-checkradio-border: var(--color-fg-subdued);
	--color-checkradio-border-checked: var(--color-checkradio-border);
	--color-checkradio-border-disabled: var(--color-fg-xsubdued);
	--color-checkradio-outline: var(--color-input-outline);
	--color-checkradio-border-focus: var(--color-fg-normal);
	--color-checkradio-mark: var(--color-fg-vibrant);
	--color-checkradio-mark-disabled: var(--color-checkradio-border-disabled); */
	
	
	/* solid style */
	--color-checkradio-background: var(--color-bg-shaded-2);
	--color-checkradio-background-disabled: var(--color-bg-shaded);
	--color-checkradio-background-checked: var(--color-fg-vibrant);
	--color-checkradio-border: var(--color-checkradio-background);
	--color-checkradio-border-checked: var(--color-checkradio-background-checked);
	--color-checkradio-border-disabled: var(--color-checkradio-background-disabled);
	--color-checkradio-outline: var(--color-outline);
	--color-checkradio-border-focus: var(--clr-transparent);
	--color-checkradio-mark: var(--color-bg);
	--color-checkradio-mark-disabled: var(--color-checkradio-mark);

	--color-tooltip-background: var(--clr-neutral-80);
	--color-tooltip-text: var(--color-fg-normal);
}

/* Set Color Context Color Values */

/* This is the default color context */
html, 
.color-context-neutral-light { 
	--color-bg-opaque: var(--clr-white);
	--color-bg: var(--color-bg-opaque);
	--color-bg-shaded: var(--clr-neutral-95);
	--color-bg-shaded-2: var(--clr-neutral-90);
	--color-bg-shaded-3: var(--clr-neutral-85);
	
	--color-fg-normal: var(--clr-neutral-30);
	--color-fg-subdued: var(--clr-neutral-60);
	--color-fg-xsubdued: var(--clr-neutral-80);
	--color-fg-xxsubdued: var(--clr-neutral-90);
	--color-fg-vibrant: var(--clr-accent1-50);
	
	--color-fg-normal-hover: var(--clr-neutral-20);
	--color-fg-subdued-hover: var(--clr-neutral-50);
	--color-fg-xsubdued-hover: var(--clr-neutral-70);
	--color-fg-xxsubdued-hover: var(--clr-neutral-80);
	--color-fg-vibrant-hover: var(--clr-accent1-40);

	--color-bg-danger: var(--clr-danger-90);
	--color-fg-danger: var(--clr-danger-50);
	--color-fg-danger-hover: var(--clr-danger-40);

	--color-bg-warning: var(--clr-warning-90);
	--color-fg-warning: var(--clr-warning-50);
	--color-fg-warning-hover: var(--clr-warning-40);

	--color-bg-success: var(--clr-success-90);
	--color-fg-success: var(--clr-success-50);
	--color-fg-success-hover: var(--clr-success-40);

	--color-border-preset-1: var(--color-border-default);
	--color-border-preset-2: var(--color-fg-xxsubdued);
	--color-border-preset-3: var(--clr-neutral-20);
	--color-border-preset-4: var(--color-fg-vibrant);
}

/* Per Context: override values that need to be different from the default color context */
.color-context-neutral-shaded { 
	--color-bg-opaque: var(--clr-neutral-95);
	--color-bg: var(--color-bg-opaque);
	--color-bg-shaded: var(--clr-neutral-90);
	--color-bg-shaded-2: var(--clr-neutral-85);
	--color-bg-shaded-3: var(--clr-neutral-80);
}

.color-context-neutral-dark {
	--color-bg-opaque: var(--clr-neutral-10);
	--color-bg: var(--color-bg-opaque);
	--color-bg-shaded: var(--clr-neutral-20);
	--color-bg-shaded-2: var(--clr-neutral-30);
	--color-bg-shaded-3: var(--clr-neutral-40);
	
	--color-fg-normal: var(--clr-white);
	--color-fg-subdued: var(--clr-neutral-80);
	--color-fg-xsubdued: var(--clr-neutral-70);
	--color-fg-vibrant: var(--clr-accent1-50);
	
	--color-fg-normal-hover: var(--clr-neutral-95);
	--color-fg-subdued-hover: var(--clr-neutral-90);
	--color-fg-xsubdued-hover: var(--clr-accent1-80);
	--color-fg-vibrant-hover: var(--clr-accent1-60);

	--color-outline: var(--color-fg-normal);

	--color-border-preset-1: var(--color-border-default);
	--color-border-preset-2: var(--clr-neutral-30);
	--color-border-preset-3: var(--color-fg-normal);
	--color-border-preset-4: var(--clr-neutral-20);

	--color-btn-primary-border: var(--color-fg-normal);
	--color-btn-primary-border-hover: var(--color-fg-normal-hover);
	--color-btn-primary-bg: var(--color-fg-normal);
	--color-btn-primary-bg-hover: var(--color-fg-normal-hover);
	--color-btn-primary-text: var(--color-bg);
	--color-btn-primary-text-hover: var(--color-bg);

	--color-btn-secondary-border: var(--color-fg-normal);
	--color-btn-secondary-border-hover: var(--color-fg-normal-hover);
	--color-btn-secondary-bg: transparent;
	--color-btn-secondary-bg-hover: transparent;
	--color-btn-secondary-text: var(--color-fg-normal);
	--color-btn-secondary-text-hover: var(--color-fg-normal-hover);

	--color-btn-tertiary-border: transparent;
	--color-btn-tertiary-border-hover: transparent;
	--color-btn-tertiary-bg: transparent;
	--color-btn-tertiary-bg-hover: transparent;
	--color-btn-tertiary-text: var(--color-fg-normal);
	--color-btn-tertiary-text-hover: var(--color-fg-normal-hover);

	--color-tooltip-background: var(--clr-white);
	--color-tooltip-text: var(--clr-neutral-20);
}

.color-context-accent1-shaded {
	--color-bg-opaque: var(--clr-accent1-95);
	--color-bg: var(--color-bg-opaque);
	--color-bg-shaded: var(--clr-accent1-90);
	--color-bg-shaded-2: var(--clr-accent1-85);
	--color-bg-shaded-3: var(--clr-accent1-80);

	--color-fg-normal: var(--clr-neutral-30);
	--color-fg-subdued: var(--clr-accent1-70);
	--color-fg-xsubdued: var(--clr-accent1-80);
	--color-fg-xxsubdued: var(--clr-accent1-90);
	--color-fg-vibrant: var(--clr-accent1-50);
	
	--color-fg-normal-hover: var(--clr-neutral-20);
	--color-fg-subdued-hover: var(--clr-accent1-60);
	--color-fg-xsubdued-hover: var(--clr-accent1-70);
	--color-fg-xxsubdued-hover: var(--clr-accent1-80);
	--color-fg-vibrant-hover: var(--clr-accent1-40);

	--color-border-preset-1: var(--color-border-default);
	--color-border-preset-2: var(--color-fg-xxsubdued);
	--color-border-preset-3: var(--color-fg-normal);
	--color-border-preset-4: var(--color-fg-vibrant);

	--color-tooltip-background: var(--clr-white);
	--color-tooltip-text: var(--clr-neutral-20);
}

.color-context-accent1-dark {
	--color-bg-opaque: var(--clr-accent1-50);
	--color-bg: var(--color-bg-opaque);
	--color-bg-shaded: var(--clr-accent1-40);
	--color-bg-shaded-2: var(--clr-accent1-40);
	--color-bg-shaded-3: var(--clr-accent1-40);

	--color-fg-normal: var(--clr-white);
	--color-fg-subdued: var(--clr-accent1-90);
	--color-fg-xsubdued: var(--clr-accent1-70);
	--color-fg-vibrant: var(--clr-neutral-20);
	
	--color-fg-normal-hover: var(--clr-accent1-95);
	--color-fg-subdued-hover: var(--clr-accent1-80);
	--color-fg-xsubdued-hover: var(--clr-accent1-80);
	--color-fg-vibrant-hover: var(--clr-neutral-10);

	--color-outline: var(--color-fg-normal);

	--color-border-preset-1: var(--color-border-default);
	--color-border-preset-2: var(--color-fg-xxsubdued);
	--color-border-preset-3: var(--color-fg-normal);
	--color-border-preset-4: var(--clr-neutral-20);

	--color-btn-primary-border: var(--color-fg-normal);
	--color-btn-primary-border-hover: var(--color-fg-normal-hover);
	--color-btn-primary-bg: var(--color-fg-normal);
	--color-btn-primary-bg-hover: var(--color-fg-normal-hover);
	--color-btn-primary-text: var(--color-bg);
	--color-btn-primary-text-hover: var(--color-bg);

	--color-btn-secondary-border: var(--color-fg-normal);
	--color-btn-secondary-border-hover: var(--color-fg-normal-hover);
	--color-btn-secondary-bg: transparent;
	--color-btn-secondary-bg-hover: transparent;
	--color-btn-secondary-text: var(--color-fg-normal);
	--color-btn-secondary-text-hover: var(--color-fg-normal-hover);

	--color-btn-tertiary-border: transparent;
	--color-btn-tertiary-border-hover: transparent;
	--color-btn-tertiary-bg: transparent;
	--color-btn-tertiary-bg-hover: transparent;
	--color-btn-tertiary-text: var(--color-fg-normal);
	--color-btn-tertiary-text-hover: var(--color-fg-normal-hover);

	--color-input-background: var(--clr-white);
	--color-input-border: var(--color-input-background);
	--color-input-border-focus: var(--color-input-background);
	--color-input-outline: var(--color-fg-subdued);
	--color-input-text: var(--color-fg-vibrant);
	--color-input-placeholder-text: color-mix(in srgb, var(--color-input-text) 70%, var(--color-input-background));
	--color-input-error-border: var(--color-input-error-background);

	--color-select-arrow-border: var(--color-fg-vibrant);

	--color-tooltip-background: var(--clr-white);
	--color-tooltip-text: var(--clr-neutral-20);

    /* tweak white icons on dark background */
    --icon-stroke-width-2: 0.9;
}


/*----------------------------- variables -----------------------------*/
:root {

    --golden-ratio: 1.618;   
     

    /* spacing units */
    --sp-base-unit: 0.20rem;
    --sp-multiple: var(--golden-ratio);
    --sp-0: 0rem;
    --sp-1: var(--sp-base-unit);
    --sp-2: calc(var(--sp-1) * var(--sp-multiple) );
    --sp-3: calc(var(--sp-2) * var(--sp-multiple) );
    --sp-4: calc(var(--sp-3) * var(--sp-multiple) );
    --sp-5: calc(var(--sp-4) * var(--sp-multiple) );
    --sp-6: calc(var(--sp-5) * var(--sp-multiple) );
    --sp-7: calc(var(--sp-6) * var(--sp-multiple) );
    --sp-8: calc(var(--sp-7) * var(--sp-multiple) );
    --sp-9: calc(var(--sp-8) * var(--sp-multiple) );
    --sp-10: calc(var(--sp-9) * var(--sp-multiple) );
    --sp-default: var(--sp-5);

    /* shift classes */
    --shift-increment: 0.05rem;

    /* font size units */
    --fs-base-unit: 1.0rem;
    --fs-multiple: var(--golden-ratio);
    --fs-decrement: calc(var(--fs-base-unit) * var(--fs-multiple) * 0.07 );
    --fs-increment: calc(var(--fs-base-unit) * var(--fs-multiple) * 0.20 );
    --fs-1: calc(var(--fs-2) - var(--fs-decrement) );
    --fs-2: calc(var(--fs-3) - var(--fs-decrement) );
    --fs-3: calc(var(--fs-4) - var(--fs-decrement) );
    --fs-4: var(--fs-base-unit);
    --fs-5: calc(var(--fs-4) + var(--fs-increment) );
    --fs-6: calc(var(--fs-5) + var(--fs-increment) );
    --fs-7: calc(var(--fs-6) + var(--fs-increment) );
    --fs-8: calc(var(--fs-7) + var(--fs-increment) );
    --fs-9: calc(var(--fs-8) + var(--fs-increment) );
    --fs-10: calc(var(--fs-9) + var(--fs-increment) );
    --fs-11: calc(var(--fs-10) + var(--fs-increment) );
    --fs-12: calc(var(--fs-11) + var(--fs-increment) );
    --fs-13: calc(var(--fs-12) + var(--fs-increment) );
    --fs-14: calc(var(--fs-13) + var(--fs-increment) );
    --fs-15: calc(var(--fs-14) + var(--fs-increment) );
    --fs-16: calc(var(--fs-15) + var(--fs-increment) );
    --fs-default: var(--fs-4);

    /* border radius units */
    --border-radius-multiple: 1.45;
    --br-1: 0.2rem;
    --br-2: calc(var(--br-1) * var(--border-radius-multiple) );
    --br-3: calc(var(--br-2) * var(--border-radius-multiple) );
    --br-4: calc(var(--br-3) * var(--border-radius-multiple) );
    --br-5: calc(var(--br-4) * var(--border-radius-multiple) );
    --br-6: calc(var(--br-5) * var(--border-radius-multiple) );
    --br-7: calc(var(--br-6) * var(--border-radius-multiple) );
    --br-8: calc(var(--br-7) * var(--border-radius-multiple) );
    --br-9: calc(var(--br-8) * var(--border-radius-multiple) );
    --br-10: calc(var(--br-9) * var(--border-radius-multiple) );
    --br-full: 9999px;
    --br-default: var(--br-4);
    /* --br-4: 0.8rem;
    --br-5: 0.8rem; */

    /* line weights */
    --ln-1: 0.5px;
    --ln-2: 1px;
    --ln-3: 2px;
    --ln-4: 3px;
    --ln-5: 8px;
    --ln-default: var(--ln-2);

    /* scrolling */
    /* Used by modal js, so must be set in pixels */
    --scroll-margin-top: 25px;
    

    /* border styles */
    --border-style-default: solid;

    /* border presets - size, style, color */
    /* Leave preset 1 as these default variables */
    --border-preset-1-width: var(--ln-default);
    --border-preset-1-style: var(--border-style-default);
    --border-preset-1: var(--border-preset-1-width) var(--border-preset-1-style) var(--color-border-preset-1);
    
    --border-preset-2-width: var(--ln-default);
    --border-preset-2-style: var(--border-style-default);
    --border-preset-2: var(--border-preset-2-width) var(--border-preset-2-style) var(--color-border-preset-2);

    --border-preset-3-width: var(--ln-default);
    --border-preset-3-style: var(--border-style-default);
    --border-preset-3: var(--border-preset-3-width) var(--border-preset-3-style) var(--color-border-preset-3);

    --border-preset-4-width: var(--ln-default);
    --border-preset-4-style: var(--border-style-default);
    --border-preset-4: var(--border-preset-4-width) var(--border-preset-4-style) var(--color-border-preset-4);

    /* focus outline style */
    --outline-style: dashed;
    --outline-width: var(--ln-3);
    --outline-offset: var(--sp-1);

    /* container sizes */
    --container-inline-padding: var(--sp-5);
    --container-gap: var(--sp-5);
    @media (min-width: 500px) { /* sm */
        --container-inline-padding: var(--sp-5);
    } 
    @media (min-width: 800px) { /* md */
        --container-inline-padding: var(--sp-6);
    } 
    @media (min-width: 1100px) { /* lg */
        --container-inline-padding: var(--sp-8);
    } 
    @media (min-width: 1600px) { /* xl */
        --container-inline-padding: var(--sp-8);
    } 

    /* dot sizes */
    --default-dot-size: var(--sp-3);
    
    /* icon sizes */
    --icon-size-1: 1.0rem;
    --icon-stroke-width-1: 1.8;
    --icon-size-2: 1.7rem;
    --icon-stroke-width-2: 1.1;
    --icon-size-3: 2.4rem;
    --icon-stroke-width-3: 1.0;
    --icon-size-4: 3.0rem;
    --icon-stroke-width-4: 0.9;

    --icon-circle-size-1: 2.1rem;
    --icon-circle-size-2: 3.1rem;
    --icon-circle-size-3: 4.2rem;
    --icon-circle-size-4: 5.0rem;    

    /* Set up font families */
    --font-family-sans-serif: sans-serif;
    --trim-text-bs-sans-serif: 0.18;
    --trim-text-be-sans-serif: 0.22;

    --font-family-neue-haas-unica-w1g: neue-haas-unica, sans-serif;
    --trim-text-bs-neue-haas-unica-w1g: 0.24;
    --trim-text-be-neue-haas-unica-w1g: 0.15;

	--font-family-roc-grotesk-wide: roc-grotesk-wide, sans-serif;
    --trim-text-bs-roc-grotesk-wide: 0.08;
    --trim-text-be-roc-grotesk-wide: 0.18;

    /* body text (p, div,...) */
    --font-family-body: var(--font-family-neue-haas-unica-w1g);
    --trim-text-bs-body: var(--trim-text-bs-neue-haas-unica-w1g);
    --trim-text-be-body: var(--trim-text-be-neue-haas-unica-w1g);
    --body-line-height: 1.5;
    --body-font-size: var(--fs-default);
    --body-font-weight: 400;
    --strong-font-weight: 600;

    --small-text-line-height: 1.5;
    --small-text-font-size: var(--fs-2);
    
    /* headings */
    --font-family-headings: var(--font-family-roc-grotesk-wide);
    --trim-text-bs-headings: var(--trim-text-bs-roc-grotesk-wide);
    --trim-text-be-headings: var(--trim-text-be-roc-grotesk-wide);
    --headings-line-height: 1.20;
    --headings-font-weight: 600;
    --headings-text-transform: uppercase;
    
    /* h1 */
    --font-family-h1: var(--font-family-headings);
    --trim-text-bs-h1: var(--trim-text-bs-headings);
    --trim-text-be-h1: var(--trim-text-be-headings);
    --h1-font-size: var(--fs-9);
    --h1-font-weight: var(--headings-font-weight);
    --h1-line-height: 0.9;
    --h1-text-transform: var(--headings-text-transform);

    /* h2 */
    --font-family-h2: var(--font-family-headings);
    --trim-text-bs-h2: var(--trim-text-bs-headings);
    --trim-text-be-h2: var(--trim-text-be-headings);
    --h2-font-size: var(--fs-5);
    --h2-font-weight: var(--headings-font-weight);
    --h2-line-height: 1.1;
    --h2-text-transform: var(--headings-text-transform);

    /* h3 */
    --font-family-h3: var(--font-family-neue-haas-unica-w1g);
    --trim-text-bs-h3: var(--trim-text-bs-neue-haas-unica-w1g);
    --trim-text-be-h3: var(--trim-text-be-neue-haas-unica-w1g);
    --h3-font-size: var(--fs-5);
    --h3-font-weight: 400;
    --h3-line-height: var(--headings-line-height);
    --h3-text-transform: uppercase;

    /* h4 */
    --font-family-h4: var(--font-family-neue-haas-unica-w1g);
    --trim-text-bs-h4: var(--trim-text-bs-neue-haas-unica-w1g);
    --trim-text-be-h4: var(--trim-text-be-neue-haas-unica-w1g);
    --h4-font-size: var(--fs-5);
    --h4-font-weight: 400;
    --h4-line-height: var(--headings-line-height);
    --h4-text-transform: none;
    
    /* h5 */
    --font-family-h5: var(--font-family-neue-haas-unica-w1g);
    --trim-text-bs-h5: var(--trim-text-bs-neue-haas-unica-w1g);
    --trim-text-be-h5: var(--trim-text-be-neue-haas-unica-w1g);
    --h5-font-size: var(--fs-5);
    --h5-font-weight: 400;
    --h5-line-height: var(--headings-line-height);
    --h5-text-transform: none;
    
    /* h6 */
    --font-family-h6: var(--font-family-neue-haas-unica-w1g);
    --trim-text-bs-h6: var(--trim-text-bs-neue-haas-unica-w1g);
    --trim-text-be-h6: var(--trim-text-be-neue-haas-unica-w1g);
    --h6-font-size: var(--body-font-size);
    --h6-font-weight: 700;
    --h6-line-height: var(--body-line-height);
    --h6-text-transform: none;

    /* small heading */
    --font-family-small-heading: var(--font-family-neue-haas-unica-w1g);
    --trim-text-bs-small-heading: var(--trim-text-bs-neue-haas-unica-w1g);
    --trim-text-be-small-heading: var(--trim-text-be-neue-haas-unica-w1g);
    --small-heading-font-size: var(--fs-4);
    --small-heading-font-weight: 400;
    --small-heading-line-height: 1.2;
    --small-heading-text-transform: uppercase;

    /* text links */
    --text-link-text-decoration: underline;
    --text-link-text-underline-offset: 2px;

    /* list */
    --ul-margin-block-start: 1.1rem; /* to align the bullet */
    --ol-counter-character-width: 0.55rem; /* to calculate ol li indent */

    /* blockquote */
    --font-family-blockquote: var(--font-family-neue-haas-unica-w1g);
    --trim-text-bs-blockquote: var(--trim-text-bs-neue-haas-unica-w1g);
    --trim-text-be-blockquote: var(--trim-text-be-neue-haas-unica-w1g);
    --blockquote-margin-block: var(--sp-6);
    --blockquote-indentation: var(--sp-5);
    --blockquote-font-size: var(--fs-6);
    --blockquote-color: var(--color-fg-subdued);
    --blockquote-line-height: 1.5;
    --blockquote-font-style: italic;
    --blockquote-p-gutter: var(--sp-4);
    --blockquote-attribution-font-size: var(--fs-4);
    --blockquote-attribution-margin-bs: var(--sp-4);

    /* standard buttons */
    --font-family-btn: var(--font-family-neue-haas-unica-w1g);
    --btn-font-style: normal;
    --btn-text-transform: uppercase;
    --btn-line-height: 1.0;
    --btn-text-small-multiple: 0.7;
    
    /* per size */
    --btn-small-min-height: 2rem;
    --btn-small-font-size: var(--fs-2);
    --btn-small-font-weight: 400;
    --btn-small-text-small-font-weight: 400;
    --btn-small-border-width: var(--ln-2);
    --btn-small-border-radius: 0;
    --btn-small-padding-inline: var(--sp-5);
    --btn-small-padding-block:  0.05rem 0;
    --btn-small-column-gap: var(--sp-2);
    --btn-small-row-gap: var(--sp-1);
    --btn-small-icon-size: var(--icon-size-1);
    --btn-small-icon-stroke-width: var(--icon-stroke-width-1);
    
    --btn-medium-min-height: 2.9rem;
    --btn-medium-font-size: var(--fs-3);
    --btn-medium-font-weight: 400;
    --btn-medium-text-small-font-weight: 400;
    --btn-medium-border-width: var(--ln-2);
    --btn-medium-border-radius: 0;
    --btn-medium-padding-inline: var(--sp-5);
    --btn-medium-padding-block: 0.05rem 0;
    --btn-medium-column-gap: var(--sp-3);
    --btn-medium-row-gap: var(--sp-1);
    --btn-medium-icon-size: var(--icon-size-2);
    --btn-medium-icon-stroke-width: var(--icon-stroke-width-2);
    
    --btn-large-min-height: 4.2rem;
    --btn-large-font-size: var(--fs-5);
    --btn-large-font-weight: 400;
    --btn-large-text-small-font-weight: 400;
    --btn-large-border-radius: 0;
    --btn-large-border-width: var(--ln-2);
    --btn-large-padding-inline: var(--sp-6);
    --btn-large-padding-block: 0.2rem 0;
    --btn-large-column-gap: var(--sp-4);
    --btn-large-row-gap: calc(var(--sp-1) * 0.5);
    --btn-large-icon-size: var(--icon-size-2);
    --btn-large-icon-stroke-width: var(--icon-stroke-width-2);

    /* forms */
    --input-text-font-family: var(--font-family-neue-haas-unica-w1g);
    --input-text-font-weight: 400;
    --input-text-font-style: normal;
    --input-text-placeholder-font-style: italic;
    --input-text-line-height: 1.2;
    --input-text-border-width: var(--ln-3);
    --input-text-label-gap: var(--sp-2);
    
    --input-text-medium-min-height: var(--btn-medium-min-height);
    --input-text-medium-font-size: var(--fs-4);
    --input-text-medium-padding-inline: var(--sp-3);
    --input-text-medium-padding-block: 0.2rem;
    --input-text-medium-border-radius: 0;

    --input-text-small-min-height: var(--btn-small-min-height);
    --input-text-small-font-size: var(--fs-4);
    --input-text-small-padding-inline: var(--sp-3);
    --input-text-small-padding-block: 0.2rem;
    --input-text-small-border-radius: 0;

    --select-font-family: var(--input-text-font-family);
    --select-font-weight: var(--input-text-font-weight);
    --select-font-style: var(--input-text-font-style);
    --select-placeholder-font-style: var(--input-text-placeholder-font-style);
    --select-line-height: var(--input-text-line-height);
    --select-border-width: var(--ln-3);
    --select-label-gap: var(--input-text-label-gap);
    
    --select-medium-min-height: var(--btn-medium-min-height);
    --select-medium-font-size: var(--input-text-medium-font-size);
    --select-medium-padding-inline: var(--input-text-medium-padding-inline);
    --select-medium-padding-block: var(--input-text-medium-padding-block);
    --select-medium-border-radius: var(--input-text-medium-border-radius);

    --select-small-min-height: var(--btn-small-min-height);
    --select-small-font-size: var(--input-text-small-font-size);
    --select-small-padding-inline: var(--input-text-small-padding-inline);
    --select-small-padding-block: var(--input-text-small-padding-block);
    --select-small-border-radius: var(--input-text-small-border-radius);

    --checkradio-border-width: var(--ln-3);
    --checkradio-size: 1.5rem;
    --radio-mark-border-width-multiplier: 0.29;
    --checkbox-mark-border-width-multiplier: 0.31;
    --checkbox-border-radius: var(--br-0);
    --checkbox-box-border-radius: var(--br-0);

    --toggle-switch-block-size: 1.8rem;
    --toggle-switch-font-size: var(--fs-3);
    --toggle-switch-text-inset-block-start: 0.05rem;
    --toggle-switch-inline-size-small: 4.0rem;
    --toggle-switch-inline-size-medium: 7.0rem;
    --toggle-switch-inline-size-large: 9.0rem;

    --field-label-line-height: 1.3;
    --field-label-font-size: var(--input-text-medium-font-size);
    --field-label-font-size-small: var(--input-text-small-font-size);
    
    --field-description-font-size: var(--small-text-font-size);
    --field-description-line-height: var(--small-text-line-height);
    --field-description-margin-block-start: var(--sp-2);

    /* modals */
    --modal-backdrop-color: var(--clr-black);
    --modal-close-outside-icon-color: var(--clr-white);
    --modal-backdrop-opacity: 0.4;
    --modal-border-radius: var(--br-2);
    --modal-close-button-padding: var(--sp-4);
    --modal-small-max-inline-size: 25rem;
    --modal-medium-max-inline-size: 50rem;
    --modal-large-max-inline-size: 65rem;
    --modal-fade-transition-duration: 0.15s;
    --modal-fade-scale-amount: 0.97;
    --modal-slide-transition-duration: 0.15s;

    /* details */

    /* content slide */
    --content-slide-transition-duration: 0.15s;
    
    /* toggle transitions */
    --toggle-rotate-90-duration: 0.10s;
    --toggle-rotate-180-duration: 0.15s;
    --toggle-transition-height-duration: 0.2s;

    /* tables */
    --table-line-height: 1.2;
    --table-vertical-align: top;
    --table-row-border-width: var(--ln-default);
    --table-row-border-color: var(--color-border-default);
    --table-thead-row-border-color: var(--color-fg-normal);
    --table-cell-pad-i: var(--sp-0);
    --table-cell-pad-b: var(--sp-3);
    --table-font-size: var(--fs-4);
    

    /* tooltips */
    --tooltip-arrow-size: 0.7rem;
    --tooltip-bubble-gap: var(--sp-1);
    --tooltip-border-radius: var(--br-2);
    --tooltip-font-size: var(--fs-2);
    --tooltip-padding: var(--sp-2);
    --tooltip-max-width: 10rem;
    --tooltip-transition-duration: 0.1s;
    
}


/*----------------------------- Site-specific CSS Rules -----------------------------*/

.btn-tertiary,
.btn-tertiary-text {
	font-weight: 600;
	letter-spacing: 0.03em;
}	


.ul,
.rich-text ul {
    > li {
        list-style: square outside;
    }
}


/* ----------------------------------- Zoho ----------------------------------- */
/* Override zoho webforms css to apply our styles to their html. */

.zls-btnmn,
.zls-btrht {
    display:none !important;
}

#ntgt-zoho {

    [style*="color:red;"],
    [style*="color: red;"] {
        color: var(--color-fg-danger) !important;
    }

    form {
        display: grid;
        column-gap: var(--sp-5);
        row-gap: var(--sp-5);
        
        @media all and (min-width: 800px) {
            grid-template-columns: 1fr 1fr;
        }
    }


    .zcwf_col_lab {
        label {
            color: var(--color-text);
        }
    }

    .zcwf_lblLeft div.zcwf_col_fld {
        margin-block-start: var(--input-text-label-gap);

        &:has(select) {
            &::after {
                --this-size: 0.6rem;
                content: "";
                display: block;
                block-size: var(--this-size);
                inline-size: var(--this-size);
                transform: rotate(-45deg) translateY(calc(-50% - var(--this-size) / 2));
                position: absolute;
                right: 0.5rem;
                pointer-events: none;
                border-block-end: 2px solid var(--color-select-arrow-border);
                border-inline-start: 2px solid var(--color-select-arrow-border);
                top: calc(var(--select-medium-min-height) / 2);
            }
        }

        select {
            appearance: none;
            padding-inline-end: 2.0rem;
            cursor: pointer;
            display: block;
            width: 100%;
            font-family: var(--select-font-family);
            font-style: var(--select-font-style);
            line-height: var(--select-line-height);
            border-width: var(--select-border-width);
            border-style: solid;
            border-color: var(--color-select-border);
            background-color: var(--color-select-background);
            color: var(--color-select-text);

            &:focus-visible {
                outline-style: var(--outline-style);
                outline-width: var(--outline-width);
                outline-offset: var(--outline-offset);
                outline-color: var(--color-select-outline);
                border-color: var(--color-select-border-focus);
                background-color: var(--color-select-background-focus);
            }
            
            /* default: medium */
            min-height: var(--select-medium-min-height);
            font-size: var(--select-medium-font-size);
            padding-inline-start: var(--select-medium-padding-inline);
            padding-block: var(--select-medium-padding-block);
            border-radius: var(--select-medium-border-radius);
        }

        textarea, input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"]) {
            display: block;
            width: 100%;
            font-family: var(--input-text-font-family);
            font-style: var(--input-text-font-style);
            line-height: var(--input-text-line-height);
            border-width: var(--input-text-border-width);
            border-style: solid;
            border-color: var(--color-input-border);
            border: var(--input-text-border-width) solid var(--color-input-border) !important;
            background-color: var(--color-input-background);
            color: var(--color-input-text);

            &:focus-visible {
                outline-style: var(--outline-style);
                outline-width: var(--outline-width);
                outline-offset: var(--outline-offset);
                outline-color: var(--color-input-outline);
                border-color: var(--color-input-border-focus) !important;
                background-color: var(--color-input-background-focus);
            }
            
            /* default: medium */
            min-height: var(--input-text-medium-min-height);
            font-size: var(--input-text-medium-font-size);
            padding-inline: var(--input-text-medium-padding-inline);
            padding-block: var(--input-text-medium-padding-block);
            border-radius: var(--input-text-medium-border-radius);
        }

        textarea { 
            min-block-size: 7rem;
        }

    }

    div.zcwf_lblLeft .zcwf_button {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        line-height: var(--btn-line-height);

        padding-inline: var(--btn-medium-padding-inline);
        padding-block: var(--btn-medium-padding-block);
        font-family: var(--font-family-btn);
        font-style: var(--btn-font-style);
        text-transform: var(--btn-text-transform);
        border-style: solid;
        border-width: var(--btn-medium-border-width);
        
        border-radius: var(--btn-medium-border-radius);
        min-height: var(--btn-medium-min-height);
        font-weight: var(--btn-medium-font-weight);
        font-size: var(--btn-medium-font-size);
        column-gap: var(--btn-medium-column-gap);
        
        border-color: var(--color-btn-primary-border);
        background-color: var(--color-btn-primary-bg);
        color: var(--color-btn-primary-text);

        &:disabled {
            cursor: not-allowed;
            border-color: var(--color-btn-primary-border-disabled);
            background-color: var(--color-btn-primary-bg-disabled);
            color: var(--color-btn-primary-text-disabled);
        }

        &:hover:not(:disabled) {
            border-color: var(--color-btn-primary-border-hover);
            background-color: var(--color-btn-primary-bg-hover);
            color: var(--color-btn-primary-text-hover);
        }

        & + .zcwf_button {
            margin-inline-start: var(--sp-4);
        }
    }
    
    .zcwf_col_fld:has(.g-recaptcha) {
        max-width: calc(80vw - 1.05rem);
        overflow: auto;
    }
    .g-recaptcha {
        @media (min-width: 800px) {
            margin-block-start: 1.3rem;
        } 
    }

    .formsubmit.zcwf_button {
        background: transparent;
    }
    



    #crmWebToEntityForm.zcwf_lblLeft {
        width: 100%;
        max-width: 100% !important;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    #crmWebToEntityForm.zcwf_lblLeft * {
        box-sizing: border-box;
    }

    #crmWebToEntityForm {
        text-align: left;
    }

    #crmWebToEntityForm * {
        direction: ltr;
    }

    .zcwf_lblLeft .zcwf_title {
        word-wrap: break-word;
        padding: 0;
        font-weight: bold;
        display: none;
    }

    .zcwf_lblLeft.cpT_primaryBtn:hover {
        background: linear-gradient(#02acff 0, #006be4 100%) no-repeat padding-box !important;
        box-shadow: 0 -2px 0 0 #0159b9 inset !important;
        border: 0 !important;
        color: #fff !important;
        outline: 0 !important;
    }

    .zcwf_lblLeft .zcwf_col_fld input[type=text],
    input[type=password],
    .zcwf_lblLeft .zcwf_col_fld textarea {
        width: 100%;
        border: 1px solid #c0c6cc !important;
        resize: vertical;
        border-radius: 0;
        float: none;
    }

    .zcwf_lblLeft .zcwf_col_lab {
        width: 100%;
        word-break: break-word;
        padding: 0;
        margin-right: 0;
        margin-top: 0;
        float: none;
        min-height: 1px;
    }

    .zcwf_lblLeft .zcwf_col_fld {
        float: none;
        width: 100%;
        padding: 0;
        position: relative;
        margin-top: 0;
    }

    .zcwf_lblLeft .zcwf_privacy {
        padding: 0;
    }

    .zcwf_lblLeft .wfrm_fld_dpNn {
        display: none;
    }

    .dIB {
        display: inline-block;
    }

    .zcwf_lblLeft .zcwf_col_fld_slt {
        width: 100%;
        border: 1px solid #ccc;
        background: #fff;
        border-radius: 0;
        font-size: 1rem;
        float: none;
        resize: vertical;
        padding: 0.2rem 1rem;
    }

    .zcwf_lblLeft .zcwf_row:after,
    .zcwf_lblLeft .zcwf_col_fld:after {
        content: '';
        display: table;
        clear: both;
    }

    .zcwf_lblLeft .zcwf_col_help {
        float: left;
        margin-left: 7px;
        font-size: 12px;
        max-width: 35%;
        word-break: break-word;
    }

    .zcwf_lblLeft .zcwf_help_icon {
        cursor: pointer;
        width: 16px;
        height: 16px;
        display: inline-block;
        background: #fff;
        border: 1px solid #c0c6cc;
        color: #c1c1c1;
        text-align: center;
        font-size: 11px;
        line-height: 16px;
        font-weight: bold;
        border-radius: 50%;
    }

    .zcwf_lblLeft .zcwf_row {
        margin: 0;
    }

    .zcwf_lblLeft .formsubmit {
        margin-right: 5px;
        cursor: pointer;
        color: var(--baseColor);
        font-size: 12px;
    }

    .zcwf_lblLeft .zcwf_privacy_txt {
        width: 90%;
        color: rgb(0, 0, 0);
        font-size: 12px;
        font-family: Arial;
        display: inline-block;
        vertical-align: top;
        color: var(--baseColor);
        padding-top: 2px;
        margin-left: 6px;
    }

    .zcwf_lblLeft .zcwf_button {
        font-size: 12px;
        color: var(--baseColor);
        border: 1px solid #c0c6cc;
        padding: 3px 9px;
        border-radius: 4px;
        cursor: pointer;
        max-width: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .zcwf_lblLeft .zcwf_tooltip_over {
        position: relative;
    }

    .zcwf_lblLeft .zcwf_tooltip_ctn {
        position: absolute;
        background: #dedede;
        padding: 3px 6px;
        top: 3px;
        border-radius: 4px;
        word-break: break-word;
        min-width: 100px;
        max-width: 150px;
        color: var(--baseColor);
        z-index: 100;
    }

    .zcwf_lblLeft .zcwf_ckbox {
        float: left;
    }

    .zcwf_lblLeft .zcwf_file {
        width: 55%;
        box-sizing: border-box;
        float: left;
    }

    .clearB:after {
        content: '';
        display: block;
        clear: both;
    }

    @media all and (max-width: 600px) {

        .zcwf_lblLeft .zcwf_col_lab,
        .zcwf_lblLeft .zcwf_col_fld {
            width: auto;
            float: none !important;
        }

        .zcwf_lblLeft .zcwf_col_help {
            width: 40%;
        }
    }

    
}