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

/* ---- color system ---- */
:root {
    /* ---- Site palette ---- */
    /* See theme-base.css for the full --clr- variable definitions. 
    If you're not going to use accent2 and accent3, set their values 
    to match neutral. 

    When setting up a color, usually focus on getting one color between -30 and -60
    to be your desired accent/brand color. Adjust the -h, -c values until all the 
    tints and shades of that color all look acceptable. Make note of the color
    you really want to use and set that one as --color-fg-vibrant, etc in the 
    color contexts below.
    
    Luminance: (optional) The -l-mult variables allow you to slightly lighten 
    or darken the -30 through -60 color stops. Set l-mult to 1.00 for no change,
    slightly higher (e.g. 1.04) to lighten, slightly lower (0.96) to darken.
    
    Chroma: (-c variables) should probably be around 0.15 for muted colors, 
    0.25 for loud colors. Extremely low (0.01) for neutrals.
    
    Hue: (-h variables) is 0-360 and sets the "color" of the color.
    0 = magenta, 23 = red, 60 = orange, 95 = yellow, 140 = green
    180 = aqua, 250 = blue, 285 = purple
    */
    --neutral-h: 90;    --neutral-c: 0.05;   --neutral-l-mult: 1.0;
    --accent1-h: 136;   --accent1-c: 0.06;   --accent1-l-mult: 1.0;
    --accent2-h: 85;    --accent2-c: 0.14;   --accent2-l-mult: 1.04;
    --accent3-h: 230;   --accent3-c: 0.05;   --accent3-l-mult: 1.0;
    --danger-h:  25;    --danger-c:  0.16;   --danger-l-mult:  1.0;
    --warning-h: 85;    --warning-c: 0.12;   --warning-l-mult: 1.0;
    --success-h: 135;   --success-c: 0.08;   --success-l-mult: 1.0;

    /*---- Overrides ----*/
    /* If the oklch-based color stops set in theme-base.css are not
    working for certain colors you can override one or more colors here.
    You can use a hex code, rgb, or hsl color here */
    /* --clr-accent1-50: hsl(130, 60%, 30%); */
}


/*---- Scroll Fade Background Colors ----*/
:root {
    --sfbc-color-0: var(--clr-white);       /* default bg color */
    --sfbc-color-1: var(--clr-neutral-95);  /* light tan */
    --sfbc-color-2: var(--clr-neutral-90);  /* slightly darker light tan */
    --sfbc-color-3: var(--clr-accent3-95);  /* light blue */
    --sfbc-color-4: var(--clr-accent1-95);  /* light green */
    --sfbc-color-5: var(--clr-accent1-70);  /* medium green */
}

/* ---- color contexts ---- */
/* Assign default colors for all color contexts */
html, 
[class*="color-context-"] { 

    /*---- specific colors ----*/
    --color-text: var(--color-fg-normal);
    --color-outline: var(--color-fg-vibrant);
    --color-border-default: var(--color-fg-xsubdued);

    --color-btn-primary-border: var(--color-fg-vibrant-2);
    --color-btn-primary-border-hover: var(--color-fg-vibrant-2-hover);
    --color-btn-primary-bg: var(--color-fg-vibrant-2);
    --color-btn-primary-bg-hover: var(--color-fg-vibrant-2-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-vibrant);
    --color-btn-secondary-border-hover: var(--color-fg-vibrant-hover);
    --color-btn-secondary-bg: transparent;
    --color-btn-secondary-bg-hover: transparent;
    --color-btn-secondary-text: var(--color-fg-vibrant);
    --color-btn-secondary-text-hover: var(--color-fg-vibrant-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-bg-disabled: transparent;
    --color-btn-tertiary-border-disabled: 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-text-2: var(--color-fg-subdued);
    --color-btn-tertiary-text-2-hover: var(--color-fg-subdued-hover);
    --color-btn-tertiary-text-2-disabled: var(--color-btn-tertiary-text-disabled);

    /* 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-white);
    --color-input-error-text: var(--clr-danger-50);
    --color-input-error-border: var(--clr-danger-50);
    --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-subdued);
    --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-white);
    --color-select-error-text: var(--clr-danger-50);
    --color-select-error-border: var(--clr-danger-50);
    --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-normal);
    --color-checkradio-mark-disabled: var(--color-checkradio-border-disabled);
    
    
    /* solid style */
    /* --color-checkradio-background: var(--color-fg-xsubdued);
    --color-checkradio-background-disabled: var(--color-fg-xxsubdued);
    --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 { 

    /*---- general colors ----*/
    --color-bg-opaque: var(--clr-white);
    --color-bg: var(--color-bg-opaque);
    --color-bg-shaded: var(--clr-neutral-98);
    --color-bg-shaded-2: var(--clr-neutral-95);
    --color-bg-shaded-3: var(--clr-neutral-90);
    
    --color-fg-normal: var(--clr-neutral-30);
    --color-fg-subdued: var(--clr-neutral-70);
    --color-fg-xsubdued: var(--clr-neutral-80);
    --color-fg-xxsubdued: var(--clr-neutral-90);
    --color-fg-vibrant: var(--clr-accent2-60);
    --color-fg-vibrant-2: var(--clr-accent1-40);
    
    --color-fg-normal-hover: var(--clr-neutral-20);
    --color-fg-subdued-hover: var(--clr-neutral-60);
    --color-fg-xsubdued-hover: var(--clr-neutral-70);
    --color-fg-xxsubdued-hover: var(--clr-neutral-80);
    --color-fg-vibrant-hover: var(--clr-accent2-50);
    --color-fg-vibrant-2-hover: var(--clr-accent1-30);

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

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

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

    /*---- specific colors ----*/
    --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);
}

/* Per Context: override values that need to be different from the default color context */
.color-context-neutral-shaded { 
    
    /*---- general colors ----*/
    --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-fg-normal: var(--clr-neutral-30);
    --color-fg-normal-hover: var(--clr-neutral-20);

    /*---- specific colors ----*/
}

.color-context-neutral-dark {
    
    /*---- general colors ----*/
    --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-60);
    --color-fg-vibrant-2: var(--color-fg-vibrant);
    
    --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-70);
    --color-fg-vibrant-2-hover: var(--color-fg-vibrant-hover);

    /*---- specific colors ----*/
    --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(--color-fg-vibrant);

    --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 {
    
    /*---- general colors ----*/
    --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-neutral-70);
    --color-fg-xsubdued: var(--clr-neutral-80);
    --color-fg-xxsubdued: var(--clr-neutral-90);
    --color-fg-vibrant: var(--clr-accent2-60);
    --color-fg-vibrant-2: var(--clr-accent1-40);
    
    --color-fg-normal-hover: var(--clr-neutral-20);
    --color-fg-subdued-hover: var(--clr-neutral-60);
    --color-fg-xsubdued-hover: var(--clr-neutral-70);
    --color-fg-xxsubdued-hover: var(--clr-neutral-80);
    --color-fg-vibrant-hover: var(--clr-accent2-50);
    --color-fg-vibrant-2-hover: var(--clr-accent1-30);

    /*---- specific colors ----*/
    --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-btn-primary-border: var(--color-fg-vibrant);
    --color-btn-primary-border-hover: var(--color-fg-vibrant-hover);
    --color-btn-primary-bg: var(--color-fg-vibrant);
    --color-btn-primary-bg-hover: var(--color-fg-vibrant-hover);

    --color-btn-secondary-border: var(--color-fg-vibrant);
    --color-btn-secondary-border-hover: var(--color-fg-vibrant-hover);
    --color-btn-secondary-text: var(--color-fg-vibrant);
    --color-btn-secondary-text-hover: var(--color-fg-vibrant-hover);
    
    --color-btn-tertiary-text: var(--color-fg-vibrant);
    --color-btn-tertiary-text-hover: var(--color-fg-vibrant-hover);
    
}

.color-context-accent1-medium {
    
    /*---- general colors ----*/
    --color-bg-opaque: var(--clr-accent1-70);
    --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-white);
    --color-fg-subdued: var(--clr-accent1-85);
    --color-fg-xsubdued: var(--clr-accent1-80);
    --color-fg-xxsubdued: var(--clr-accent1-75);
    --color-fg-vibrant: var(--clr-neutral-30);
    --color-fg-vibrant-2: var(--color-fg-vibrant);
    
    --color-fg-normal-hover: var(--clr-accent1-95);
    --color-fg-subdued-hover: var(--clr-accent1-85);
    --color-fg-xsubdued-hover: var(--clr-accent1-80);
    --color-fg-xxsubdued-hover: var(--clr-accent1-75);
    --color-fg-vibrant-hover: var(--clr-neutral-20);
    --color-fg-vibrant-2-hover: var(--color-fg-vibrant-hover);

    /*---- specific colors ----*/
    --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-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-secondary-border: var(--color-fg-normal);
    --color-btn-secondary-border-hover: var(--color-fg-normal-hover);
    --color-btn-secondary-text: var(--color-fg-normal);
    --color-btn-secondary-text-hover: var(--color-fg-normal-hover);
    
    --color-btn-tertiary-text: var(--color-fg-normal);
    --color-btn-tertiary-text-hover: var(--color-fg-normal-hover);
    --color-btn-tertiary-text-2: var(--color-fg-vibrant);
    --color-btn-tertiary-text-2-hover: var(--color-fg-vibrant-hover);
    
}

.color-context-accent1-dark {

    /*---- general colors ----*/
    --color-bg-opaque: var(--clr-accent1-30);
    --color-bg: var(--color-bg-opaque);
    --color-bg-shaded: var(--clr-accent1-30);
    --color-bg-shaded-2: var(--clr-accent1-30);
    --color-bg-shaded-3: var(--clr-accent1-30);

    --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-accent2-60);
    --color-fg-vibrant-2: var(--color-fg-vibrant);
    
    --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-accent2-50);
    --color-fg-vibrant-2-hover: var(--color-fg-vibrant-hover);

    /*---- specific colors ----*/
    --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(--color-fg-vibrant);

    --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-btn-tertiary-text-2: var(--color-fg-vibrant);
    --color-btn-tertiary-text-2-hover: var(--color-fg-vibrant-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);
}

.color-context-accent3-shaded { 
    --color-bg-opaque: var(--clr-accent3-95);
    --color-bg: var(--color-bg-opaque);
    --color-bg-shaded: var(--clr-accent3-90);
}

/* ----------------------------------- 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.5rem;
    /* --fs-multiple: var(--golden-ratio); */
    /* --fs-decrement: calc(var(--fs-base-unit) * var(--fs-multiple) * 0.06 ); */
    --fs-decrement: calc(var(--fs-base-unit) * 0.09 );
    --fs-increment: calc(var(--fs-base-unit) * 0.2 );
    --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: calc(var(--fs-5) - var(--fs-decrement) );
    --fs-5: calc(var(--fs-6) - var(--fs-decrement) );
    --fs-6: calc(var(--fs-7) - var(--fs-decrement) );
    --fs-7: var(--fs-base-unit); 
    --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-17: calc(var(--fs-16) + var(--fs-increment) );
    --fs-18: calc(var(--fs-17) + var(--fs-increment) );
    --fs-19: calc(var(--fs-18) + var(--fs-increment) );
    --fs-20: calc(var(--fs-19) + var(--fs-increment) );
    --fs-21: calc(var(--fs-20) + var(--fs-increment) );
    --fs-22: calc(var(--fs-21) + var(--fs-increment) );
    --fs-23: calc(var(--fs-22) + var(--fs-increment) );
    --fs-24: calc(var(--fs-23) + var(--fs-increment) );
    --fs-25: calc(var(--fs-24) + var(--fs-increment) );
    --fs-26: calc(var(--fs-25) + var(--fs-increment) );
    --fs-27: calc(var(--fs-26) + var(--fs-increment) );
    --fs-28: calc(var(--fs-27) + var(--fs-increment) );
    --fs-29: calc(var(--fs-28) + var(--fs-increment) );
    --fs-30: calc(var(--fs-29) + var(--fs-increment) );
    --fs-31: calc(var(--fs-30) + var(--fs-increment) );
    --fs-32: calc(var(--fs-31) + var(--fs-increment) );
    --fs-33: calc(var(--fs-32) + var(--fs-increment) );
    --fs-34: calc(var(--fs-33) + var(--fs-increment) );
    --fs-35: calc(var(--fs-34) + var(--fs-increment) );
    --fs-36: calc(var(--fs-35) + var(--fs-increment) );
    --fs-37: calc(var(--fs-36) + var(--fs-increment) );
    --fs-38: calc(var(--fs-37) + var(--fs-increment) );
    --fs-39: calc(var(--fs-38) + var(--fs-increment) );
    --fs-40: calc(var(--fs-39) + var(--fs-increment) );
    --fs-41: calc(var(--fs-40) + var(--fs-increment) );
    --fs-42: calc(var(--fs-41) + var(--fs-increment) );
    --fs-43: calc(var(--fs-42) + var(--fs-increment) );
    --fs-44: calc(var(--fs-43) + var(--fs-increment) );
    --fs-45: calc(var(--fs-44) + var(--fs-increment) );
    --fs-46: calc(var(--fs-45) + var(--fs-increment) );
    --fs-47: calc(var(--fs-46) + var(--fs-increment) );
    --fs-48: calc(var(--fs-47) + var(--fs-increment) );
    --fs-49: calc(var(--fs-48) + var(--fs-increment) );
    --fs-50: calc(var(--fs-49) + var(--fs-increment) );
    --fs-default: var(--fs-3);

    /* 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: 1.5px;
    --ln-4: 2px;
    --ln-5: 3px;
    --ln-default: var(--ln-3);

    /* 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-4);
    --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.6;
    --icon-size-2: 1.7rem;
    --icon-stroke-width-2: 1.0;
    --icon-size-3: 2.35rem;
    --icon-stroke-width-3: 0.7;
    --icon-size-4: 3.0rem;
    --icon-stroke-width-4: 0.6;

    --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;

    --font-family-scribo: scribo-regular, sans-serif;
    
    --font-family-aktiv-grotesk: aktiv-grotesk, sans-serif;
    
    --font-family-aktiv-grotesk-ex: aktiv-grotesk-extended, sans-serif;

    /* body text (p, div,...) */
    --font-family-body: var(--font-family-aktiv-grotesk-ex);
    --body-line-height: 1.5;
    --body-font-size: var(--fs-default);
    --body-font-weight: 400;
    --strong-font-weight: 700;

    --small-text-line-height: 1.5;
    --small-text-font-size: var(--fs-2);

    /* p2 */
    --font-family-p2: var(--font-family-aktiv-grotesk);
    --p2-font-size: var(--fs-3);
    --p2-line-height: var(--body-line-height);
    --p2-font-weight: var(--body-font-weight);
    --p2-text-transform: none;
    --p2-small-text-font-size: var(--fs-2);
    
    /* headings */
    --font-family-headings: var(--font-family-aktiv-grotesk-ex);
    --headings-line-height: 1.2;
    --headings-font-weight: 600;
    --headings-text-transform: uppercase;
    --headings-letter-spacing: 0;
    
    /* h1 */
    --font-family-h1: var(--font-family-scribo);
    --h1-font-size: var(--fs-21);
    --h1-font-weight: 400;
    --h1-line-height: 1.0;
    --h1-text-transform: none;
    --h1-letter-spacing: var(--headings-letter-spacing);

    /* h2 */
    --font-family-h2: var(--font-family-headings);
    --h2-font-size: var(--fs-9);
    --h2-font-weight: var(--headings-font-weight);
    --h2-line-height: var(--headings-line-height);
    --h2-text-transform: var(--headings-text-transform);
    --h2-letter-spacing: 0.02em;

    /* h3 */
    --font-family-h3: var(--font-family-headings);
    --h3-font-size: var(--fs-6);
    --h3-font-weight: 400;
    --h3-line-height: var(--headings-line-height);
    --h3-text-transform: var(--headings-text-transform);
    --h3-letter-spacing: 0.02em;

    /* h4 */
    --font-family-h4: var(--font-family-aktiv-grotesk);
    --h4-font-size: var(--fs-6);
    --h4-font-weight: var(--headings-font-weight);
    --h4-line-height: 1.25;
    --h4-text-transform: none;
    --h4-letter-spacing: var(--headings-letter-spacing);
    
    /* h5 */
    --font-family-h5: var(--font-family-headings);
    --h5-font-size: var(--fs-4);
    --h5-font-weight: 400;
    --h5-line-height: 1.25;
    --h5-text-transform: var(--headings-text-transform);
    --h5-letter-spacing: 0.02em;
    
    /* h6 */
    --font-family-h6: var(--font-family-headings);
    --h6-font-size: var(--fs-3);
    --h6-font-weight: 400;
    --h6-line-height: 1.2;
    --h6-text-transform: var(--headings-text-transform);
    --h6-letter-spacing: 0.02em;

    /* small heading */
    --font-family-small-heading: var(--font-family-h6);
    --small-heading-font-size: var(--h6-font-size);
    --small-heading-font-weight: var(--h6-font-weight);
    --small-heading-line-height: var(--h6-line-height);
    --small-heading-text-transform: var(--h6-text-transform);

    /* rich-text headings and paragraphs */
    /* rt-p */
    --font-family-rt-p: var(--font-family-p2);
    --rt-p-font-size: var(--p2-font-size);
    --rt-p-line-height: var(--p2-line-height);
    --rt-p-font-weight: var(--p2-font-weight);

    /* rt-h1 */
    --font-family-rt-h1: var(--font-family-aktiv-grotesk-ex);
    --rt-h1-font-size: var(--fs-8);
    --rt-h1-font-weight: 600;
    --rt-h1-line-height: 1.2;
    --rt-h1-text-transform: uppercase;
    --rt-h1-letter-spacing: 0.02em;
    --rt-h1-margin-block-start: var(--sp-5);
    --rt-h1-margin-block-end: var(--sp-3);

    /* rt-h2 */
    --font-family-rt-h2: var(--font-family-aktiv-grotesk);
    --rt-h2-font-size: var(--fs-7);
    --rt-h2-font-weight: 700;
    --rt-h2-line-height: 1.2;
    --rt-h2-text-transform: var(--headings-letter-spacing);
    --rt-h2-letter-spacing: 0;
    --rt-h2-margin-block-start: var(--sp-5);
    --rt-h2-margin-block-end: var(--sp-3);

    /* rt-h3 */
    --font-family-rt-h3: var(--font-family-aktiv-grotesk-ex);
    --rt-h3-font-size: var(--fs-5);
    --rt-h3-font-weight: 400;
    --rt-h3-line-height: 1.2;
    --rt-h3-text-transform: uppercase;
    --rt-h3-letter-spacing: 0.02em;
    --rt-h3-margin-block-start: var(--sp-5);
    --rt-h3-margin-block-end: var(--sp-3);

    /* rt-h4 */
    --font-family-rt-h4: var(--font-family-aktiv-grotesk);
    --rt-h4-font-size: var(--rt-p-font-size);
    --rt-h4-font-weight: 700;
    --rt-h4-line-height: var(--rt-p-line-height);
    --rt-h4-text-transform: none;
    --rt-h4-letter-spacing: var(--headings-letter-spacing);
    --rt-h4-margin-block-start: var(--sp-5);
    --rt-h4-margin-block-end: var(--sp-0);

    /* rt-h5 */
    --font-family-rt-h5: var(--font-family-aktiv-grotesk);
    --rt-h5-font-size: var(--rt-p-font-size);
    --rt-h5-font-weight: 700;
    --rt-h5-line-height: var(--rt-p-line-height);
    --rt-h5-text-transform: none;
    --rt-h5-letter-spacing: var(--headings-letter-spacing);
    --rt-h5-margin-block-start: var(--sp-5);
    --rt-h5-margin-block-end: var(--sp-0);

    /* rt-h6 */
    --font-family-rt-h6: var(--font-family-aktiv-grotesk);
    --rt-h6-font-size: var(--rt-p-font-size);
    --rt-h6-font-weight: 700;
    --rt-h6-line-height: var(--rt-p-line-height);
    --rt-h6-text-transform: none;
    --rt-h6-letter-spacing: var(--headings-letter-spacing);
    --rt-h6-margin-block-start: var(--sp-5);
    --rt-h6-margin-block-end: var(--sp-0);

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

    /* list */
    --ul-margin-block-start: 1.1rem; /* to align the bullet */
    --ol-counter-character-width: 0.55rem; /* to calculate ol li indent */
    --checkmark-list-mark-color: var(--color-fg-vibrant);

    /* blockquote */
    --font-family-blockquote: var(--font-family-aktiv-grotesk-ex);
    --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-aktiv-grotesk-ex);
    --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-font-weight-tertiary: 600;
    --btn-small-text-small-font-weight: 400;
    --btn-small-border-width: var(--ln-3);
    --btn-small-border-radius: var(--br-3);
    --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: 3.4rem;
    --btn-medium-font-size: calc(var(--fs-3));
    --btn-medium-font-weight: 400;
    --btn-medium-font-weight-tertiary: 600;
    --btn-medium-text-small-font-weight: 400;
    --btn-medium-border-width: var(--ln-3);
    --btn-medium-border-radius: var(--br-4);
    --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-3);
    --btn-medium-icon-stroke-width: var(--icon-stroke-width-3);
    
    --btn-large-min-height: 3.4rem;
    --btn-large-font-size: var(--fs-3);
    --btn-large-font-weight: 400;
    --btn-large-font-weight-tertiary: 600;
    --btn-large-text-small-font-weight: 400;
    --btn-large-border-width: var(--ln-3);
    --btn-large-border-radius: var(--br-4);
    --btn-large-padding-inline: var(--sp-5);
    --btn-large-padding-block: 0.05rem 0;
    --btn-large-column-gap: var(--sp-3);
    --btn-large-row-gap: var(--sp-1);
    --btn-large-icon-size: var(--icon-size-3);
    --btn-large-icon-stroke-width: var(--icon-stroke-width-3);

    /* forms */
    --input-text-font-family: var(--font-family-aktiv-grotesk);
    --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-3);
    --input-text-medium-padding-inline: var(--sp-4);
    --input-text-medium-padding-block: 0.2rem;
    --input-text-medium-border-radius: var(--br-3);

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

    --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-medium-arrow-inset: 0.9rem;

    --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);
    --select-small-arrow-inset: 0.5rem;

    --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-2);
    --checkbox-box-border-radius: var(--br-1);

    --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-family: var(--font-family-aktiv-grotesk);
    --field-label-font-size: var(--input-text-medium-font-size);
    --field-label-font-size-small: var(--input-text-small-font-size);
    
    --field-description-font-family: var(--font-family-aktiv-grotesk);
    --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-outer-padding: var(--sp-4);
    --modal-backdrop-color: var(--clr-black);
    --modal-close-outside-icon-color: var(--clr-white);
    --modal-backdrop-opacity: 0.4;
    --modal-border-radius: var(--br-7);
    --modal-close-button-padding: var(--sp-4);
    --modal-small-max-inline-size: 25rem;
    --modal-medium-max-inline-size: 53rem;
    --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;

    /* fade cycle */
    --fade-cycle-item-duration: 5s; 
    --fade-cycle-animation-duration: 0.5s;

    /* scroll slide in */
    --ssi-transform-duration: 0.8s;
    --ssi-opacity-duration: 0.4s;
    --ssi-transform-timing: ease-out;
    --ssi-translate-amount: var(--sp-7);
    --ssi-delay-amount: 0.1s;
    --ssi-delay-number: 0;
    
} /* end :root  */

/* Access different combos of the Scribo Open Type features */

/* disables contextual alterntive characters */
.scribo-var-1 {
    font-feature-settings: "calt" 0;
}

/* enables style set 02 (electrify text) */
.scribo-var-2 {
    font-feature-settings: "ss02" 1;
}

/* disabels contextual alt and enables style set 2 */
.scribo-var-3 {
    font-feature-settings: "calt" 0, "ss02" 1;
}

/* Misc Changes */
.rich-text :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
    margin-block-start: var(--sp-3);
}

/* fhm shapes */
.fhm-shape-1 {
    inline-size: 100%;
    aspect-ratio: 1/0.656;
    object-fit: contain;
    clip-path: url(#fhm-shape-1);
}
.fhm-shape-2 {
    inline-size: 100%;
    aspect-ratio: 1/0.692;
    object-fit: contain;
    clip-path: url(#fhm-shape-2);
}

/*----------------------------- FHM Site Header 1 -----------------------------*/
.fhm-site-header-1 {
    --fhm-sh1-block-size: 5.3rem;
    --fhm-sh1-link-group-max-inline-size: 30rem;
    position: relative;
    z-index: 10;
    block-size: var(--fhm-sh1-block-size); 
}
@media (min-width: 1351px) {
    .fhm-site-header-1 .fhm-sh1-mobile-menu-button {
        display: none;
    }
}
@media (max-width: 1350px) {
    .fhm-site-header-1 .fhm-sh1-link-group {
        display: none;
    } 
}
.fhm-site-header-1 .fhm-sh1-link {
    font-family: var(--font-family-aktiv-grotesk-ex);
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.0;
    text-transform: uppercase;
    border-radius: var(--br-1);
    padding-block: var(--sp-3);
    padding-inline: var(--sp-2);
}
.fhm-site-header-1 .fhm-sh1-link .icon {
    stroke: currentColor;
}
.fhm-site-header-1 .fhm-sh1-image-light {
    display: none;
}

.fhm-sh1-overlap {
    margin-block-end: calc(-1 * var(--fhm-sh1-block-size));
}
.fhm-sh1-overlap .fhm-sh1-bar {
    border-block-end-width: 0;
}
.fhm-sh1-overlap .fhm-sh1-image-dark {
    display: none;
}
.fhm-sh1-overlap .fhm-sh1-image-light {
    display: block;
}
.fhm-sh1-overlap .fhm-sh1-link,
.fhm-sh1-overlap .fhm-sh1-mobile-menu-button button {
    color: var(--clr-white);
}
.fhm-sh1-overlap .fhm-sh1-link:hover,
.fhm-sh1-overlap .fhm-sh1-mobile-menu-button button:hover {
    color: var(--clr-neutral-95);
}
.fhm-sh1-overlap .fhm-sh1-link .icon,
.fhm-sh1-overlap .fhm-sh1-mobile-menu-button button .icon {
    stroke: currentColor;
}

.fhm-sh1-bar {
    position: static;
    block-size: var(--fhm-sh1-block-size); 
    inline-size: 100%;
    border-style: solid;
    border-color: var(--color-fg-xxsubdued);
    border-width: 0;
    border-block-end-width: var(--border-width);
}
.fhm-sh1-overlap .fhm-sh1-bar {
    background-color: rgba(0, 0, 0, 0);
}
.fhm-site-header-1.intersecting-0 .fhm-sh1-bar {
    transition: transform 0.3s ease-out;
    transform: translateY(-100%);
}
html.x_scroll-direction-up:not(.has-open-modal) .fhm-site-header-1.intersecting-0 .fhm-sh1-bar {
    top: 0;
    position: fixed;
    transform: translateY(0);
    background-color: var(--color-bg);
    border-block-end-width: var(--border-width);
}
html.x_scroll-direction-up:not(.has-open-modal) .fhm-site-header-1.intersecting-0 .fhm-sh1-bar .fhm-sh1-image-dark {
    display: block;
}
html.x_scroll-direction-up:not(.has-open-modal) .fhm-site-header-1.intersecting-0 .fhm-sh1-bar .fhm-sh1-image-light {
    display: none;
}
html.x_scroll-direction-up:not(.has-open-modal) .fhm-site-header-1.intersecting-0 .fhm-sh1-bar .fhm-sh1-link,
html.x_scroll-direction-up:not(.has-open-modal) .fhm-site-header-1.intersecting-0 .fhm-sh1-bar .fhm-sh1-mobile-menu-button button {
    color: var(--color-fg-normal);
}
html.x_scroll-direction-up:not(.has-open-modal) .fhm-site-header-1.intersecting-0 .fhm-sh1-bar .fhm-sh1-link:hover,
html.x_scroll-direction-up:not(.has-open-modal) .fhm-site-header-1.intersecting-0 .fhm-sh1-bar .fhm-sh1-mobile-menu-button button:hover {
    color: var(--color-fg-normal-hover);
}

/*----------------------------- FHM Site Footer -----------------------------*/
.fhm-footer-action-link {
    display: flex;
    gap: var(--sp-3);
    justify-content: flex-end; 
    align-items: flex-start; 
    text-transform: uppercase; 
    line-height: 1.1;
}
.fhm-footer-action-link .icon {
    margin-block: calc(-1 * var(--sp-3));
}

.fhm-footer-primary-link {
    text-transform: uppercase; 
    font-weight: 600; 
    letter-spacing: 0.04em; 
    font-size: var(--fs-4);
}

.fhm-footer-secondary-link {
    font-size: var(--fs-2);
}

/*----------------------------- Hubspot Forms -----------------------------*/
/* Maps HubSpot --hsf-* vars to NTGT tokens (neutral-light context on [class].fhm-hubspot). */
/* https://developers.hubspot.com/docs/cms/start-building/features/forms/forms */
[class].fhm-hubspot {
    /* Global */
    --hsf-global__font-family: var(--font-family-body);
    --hsf-global__font-size: var(--input-text-medium-font-size);
    --hsf-global__color: var(--color-fg-normal);
    --hsf-global-error__color: var(--color-label-error-text);

    /* Form shell — inherit page background, no card chrome */
    --hsf-background__background-color: transparent;
    --hsf-background__border-width: 0;
    --hsf-background__padding: 0;

    /* Layout spacing (between rows / modules) */
    --hsf-row__vertical-spacing: var(--sp-5);
    --hsf-row__horizontal-spacing: var(--sp-5);
    --hsf-module__vertical-spacing: var(--sp-3);

    /* Headings & rich text inside the form */
    --hsf-heading__font-family: var(--font-family-headings);
    --hsf-heading__color: var(--color-fg-normal);
    --hsf-richtext__font-family: var(--font-family-body);
    --hsf-richtext__font-size: var(--input-text-medium-font-size);
    --hsf-richtext__color: var(--color-fg-normal);

    /* Labels & helper copy */
    --hsf-field-label__font-family: var(--field-label-font-family);
    --hsf-field-label__font-size: var(--field-label-font-size);
    --hsf-field-label__color: var(--color-fg-normal);
    --hsf-field-label-requiredindicator__color: var(--color-fg-danger);
    --hsf-field-description__font-family: var(--field-description-font-family);
    --hsf-field-description__color: var(--color-field-description);
    --hsf-field-footer__font-family: var(--field-description-font-family);
    --hsf-field-footer__color: var(--color-field-description);

    /* Text inputs (match outline inputs in html-demo / main.css #forms) */
    --hsf-field-input__font-family: var(--input-text-font-family);
    --hsf-field-input__color: var(--color-input-text);
    --hsf-field-input__background-color: var(--color-input-background);
    --hsf-field-input__placeholder-color: var(--color-input-placeholder-text);
    --hsf-field-input__border-color: var(--color-input-border);
    --hsf-field-input__border-width: var(--input-text-border-width);
    --hsf-field-input__border-style: solid;
    --hsf-field-input__border-radius: var(--input-text-medium-border-radius);
    --hsf-field-input__padding: var(--input-text-medium-padding-block) var(--input-text-medium-padding-inline);

    /* Textareas */
    --hsf-field-textarea__font-family: var(--input-text-font-family);
    --hsf-field-textarea__color: var(--color-input-text);
    --hsf-field-textarea__background-color: var(--color-input-background);
    --hsf-field-textarea__placeholder-color: var(--color-input-placeholder-text);
    --hsf-field-textarea__border-color: var(--color-input-border);
    --hsf-field-textarea__border-width: var(--input-text-border-width);
    --hsf-field-textarea__border-style: solid;
    --hsf-field-textarea__border-radius: var(--input-text-medium-border-radius);
    --hsf-field-textarea__padding: var(--input-text-medium-padding-block) var(--input-text-medium-padding-inline);

    /* Checkboxes & radios (match .checkradio in main.css) */
    --hsf-field-checkbox__background-color: var(--color-checkradio-background);
    --hsf-field-checkbox__color: var(--color-fg-normal);
    --hsf-field-checkbox__border-color: var(--color-checkradio-border);
    --hsf-field-checkbox__border-width: var(--checkradio-border-width);
    --hsf-field-checkbox__border-style: solid;
    --hsf-field-checkbox__padding: 0;
    --hsf-field-radio__background-color: var(--color-checkradio-background);
    --hsf-field-radio__color: var(--color-fg-normal);
    --hsf-field-radio__border-color: var(--color-checkradio-border);
    --hsf-field-radio__border-width: var(--checkradio-border-width);
    --hsf-field-radio__border-style: solid;

    /* Submit button (match .btn primary) */
    --hsf-button__font-family: var(--font-family-btn);
    --hsf-button__font-size: var(--btn-medium-font-size);
    --hsf-button__font-weight: var(--btn-medium-font-weight);
    --hsf-button__color: var(--color-btn-primary-text);
    --hsf-button__background-color: var(--color-btn-primary-bg);
    --hsf-button__border-radius: var(--btn-medium-border-radius);
    --hsf-button__padding: 1rem 1rem;
    --hsf-button__box-shadow: none;

    /* Alerts */
    --hsf-erroralert__font-family: var(--field-description-font-family);
    --hsf-erroralert__font-size: var(--field-description-font-size);
    --hsf-erroralert__color: var(--color-label-error-text);
    --hsf-infoalert__font-family: var(--field-description-font-family);
    --hsf-infoalert__font-size: var(--field-description-font-size);
    --hsf-infoalert__color: var(--color-field-description);

    /* Progress Bar */
    --hsf-progressbar-trackLine__background-color: var(--color-bg-shaded);
    --hsf-progressbar-progressLine__background-color: var(--color-bg-shaded-3);
}

[class].fhm-hubspot .hsfc-Button {
    text-transform: var(--btn-text-transform);
}

[class].fhm-hubspot .hsfc-TextInput:focus,
[class].fhm-hubspot .hsfc-TextInput:hover,
[class].fhm-hubspot .hsfc-CheckboxInput:focus,
[class].fhm-hubspot .hsfc-CheckboxInput:hover {
    box-shadow: none;
}

[class].fhm-hubspot .hsfc-ProgressBar__Progress {
    border-radius: 0;
}

[class].fhm-hubspot .hsfc-ProgressBar__Progress > div {
    border-radius: 0;
}

[class].fhm-hubspot .hsfc-CheckboxInput {
    border-radius: var(--checkbox-border-radius);
}

[class].fhm-hubspot .hsfc-CheckboxInput:checked:after {
    display: none;
}

[class].fhm-hubspot .hsfc-CheckboxField label {
    align-items: flex-start;
    gap: var(--sp-3);
}

[class].fhm-hubspot .hsfc-RadioInput {
    padding: 0;
}

/* Bloomerang Form */
.qgiv-embed-container {
    width: 100% !important;
}

.qgiv-embed-container iframe {
    height: 4000px !important;
}