/* =============================================================================
   PLUTONIUM CMS — ROOT CSS VARIABLES & BASE STYLES
   Generated: 2026-03-20 21:58:25
   Single source of truth for the design system (replaces root_values.css).
   Static variables and base element styles are hard-coded below.
   Dynamic brand colors and typography are loaded from cms_themes (active theme).
   Edit colors + fonts via Admin > Color Converter > Theme Settings.
   ============================================================================= */

/* Material Symbols Outlined - Icon Font */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* Google Fonts — body/heading fonts from active theme settings */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {

    /* =========================================================================
       COLOR PALETTE — Primary Colors (30° increments)
       Colors are HSL WITHOUT alpha. Apply alpha via hsla(var(--Red), 0.8).
       ========================================================================= */

    /* Red (0°) */
    --Red: 1, 64%, 38%;
    --RedLight: 1, 72%, 63%;
    --RedDark: 1, 66%, 24%;

    /* Orange (30°) */
    --Orange: 30, 100%, 50%;
    --OrangeLight: 30, 50%, 50%;
    --OrangeDark: 30, 100%, 20%;

    /* Yellow (60°) */
    --Yellow: 60, 100%, 50%;
    --YellowLight: 60, 50%, 50%;
    --YellowDark: 60, 100%, 20%;

    /* Chartreuse (90°) */
    --Chartreuse: 90, 100%, 50%;
    --ChartreuseLight: 90, 50%, 50%;
    --ChartreuseDark: 90, 100%, 20%;

    /* Green (120°) */
    --Green: 141, 68%, 34%;
    --GreenLight: 141, 44%, 61%;
    --GreenDark: 141, 69%, 14%;

    /* Spring Green (150°) */
    --SpringGreen: 150, 100%, 50%;
    --SpringGreenLight: 150, 50%, 50%;
    --SpringGreenDark: 150, 100%, 20%;

    /* Cyan (180°) */
    --Cyan: 180, 100%, 50%;
    --CyanLight: 180, 50%, 50%;
    --CyanDark: 180, 100%, 20%;

    /* Azure (210°) */
    --Azure: 202, 27%, 50%;
    --AzureLight: 202, 27%, 75%;
    --AzureDark: 202, 27%, 22%;

    /* Blue (240°) */
    --Blue: 232, 47%, 46%;
    --BlueLight: 232, 25%, 68%;
    --BlueDark: 232, 100%, 8%;

    /* Violet (270°) */
    --Violet: 267, 32%, 37.3%;
    --VioletLight: 267, 32%, 60%;
    --VioletDark: 267, 32%, 23%;

    /* Magenta (300°) */
    --Magenta: 300, 100%, 50%;
    --MagentaLight: 300, 50%, 50%;
    --MagentaDark: 300, 100%, 20%;

    /* Rose (330°) */
    --Rose: 335, 100%, 60.8%;
    --RoseLight: 335, 50%, 84%;
    --RoseDark: 335, 100%, 30%;


    /* =========================================================================
       GRAYSCALE PALETTE
       ========================================================================= */

    --White: 0, 0%, 100%;
    --Black: 0, 0%, 0%;

    --Gray10: 0, 0%, 10%;
    --Gray20: 0, 0%, 20%;
    --Gray30: 0, 0%, 30%;
    --Gray40: 0, 0%, 40%;
    --Gray50: 0, 0%, 50%;
    --Gray60: 0, 0%, 60%;
    --Gray70: 0, 0%, 70%;
    --Gray80: 0, 0%, 80%;
    --Gray90: 0, 0%, 90%;
    --Gray95: 0, 0%, 95%;


    /* =========================================================================
       BRAND COLORS — Dynamic (Admin > Color Converter > Theme Settings)
       Override the default orange/violet/azure palette per client.
       ========================================================================= */

    --ColorBrand:       264, 55%, 33%;
    --ColorBrandLight:  264, 55%, 71%;
    --ColorBrandDark:   264, 55%, 20%;

    --ColorBrand2:      181, 100%, 36%;
    --ColorBrand2Light: 181, 100%, 80%;
    --ColorBrand2Dark:  181, 100%, 25%;

    --ColorBrand3:      39, 99%, 67%;
    --ColorBrand3Light: 39, 99%, 80%;
    --ColorBrand3Dark:  39, 99%, 35%;

    --ColorBrand4:      24, 85%, 76%;
    --ColorBrand4Light: 24, 85%, 90%;
    --ColorBrand4Dark:  24, 68%, 57%;

    --ColorBrand5:      210, 56%, 61%;
    --ColorBrand5Light: 210, 56%, 75%;
    --ColorBrand5Dark:  210, 56%, 40%;


    /* =========================================================================
       SEMANTIC COLOR MAPPINGS — Static (reference the palette above)
       ========================================================================= */

    /* UI State Colors */
    --ColorPrimary:   var(--Violet);
    --ColorSecondary: var(--BlueLight);
    --ColorSuccess:   var(--Green);
    --ColorDanger:    var(--Red);
    --ColorWarning:   var(--Orange);
    --ColorInfo:      var(--Cyan);

    /* Text Colors */
    --ColorTextPrimary:   var(--Gray10);
    --ColorTextSecondary: var(--Gray50);
    --ColorTextMuted:     var(--Gray60);
    --ColorTextInverse:   var(--White);

    /* Background Colors */
    --ColorBgPrimary:   var(--White);
    --ColorBgSecondary: var(--Gray95);
    --ColorBgTertiary:  var(--Gray90);
    --ColorBgDark:      var(--Gray10);

    /* Border Colors */
    --ColorBorder:      var(--ColorBrandDark);
    --ColorBorderLight: var(--Gray90);
    --ColorBorderDark:  var(--Gray60);


    /* =========================================================================
       TYPOGRAPHY — Font families are dynamic; sizes/weights/heights are static.
       ========================================================================= */

    --FontFamily:         'Montserrat', sans-serif;
    --FontFamilyMono:     "Courier New", Courier, monospace;
    --FontFamilyHeading:  'Montserrat', sans-serif;

    --FontSizeMultiplier: 1.20;

    --FontSizeBase: 1rem;
    --FontSizeXS:   calc(0.75rem  * var(--FontSizeMultiplier));
    --FontSizeSM:   calc(0.875rem * var(--FontSizeMultiplier));
    --FontSizeLG:   calc(1.1rem   * var(--FontSizeMultiplier));
    --FontSizeXL:   calc(1.5rem   * var(--FontSizeMultiplier));
    --FontSize2XL:  calc(2rem     * var(--FontSizeMultiplier));
    --FontSize3XL:  calc(2.5rem   * var(--FontSizeMultiplier));
    --FontSize4XL:  calc(3rem     * var(--FontSizeMultiplier));

    --FontWeightLight:     300;
    --FontWeightNormal:    400;
    --FontWeightMedium:    500;
    --FontWeightSemibold:  600;
    --FontWeightBold:      700;
    --FontWeightExtrabold: 800;

    --LineHeightTight:   1;
    --LineHeightNormal:  1.1;
    --LineHeightRelaxed: 1.3;


    /* =========================================================================
       SPACING SYSTEM — 0.25rem (4px) increments
       ========================================================================= */

    --Space0:  0;
    --Space1:  0.25rem;
    --Space2:  0.5rem;
    --Space3:  0.75rem;
    --Space4:  1rem;
    --Space5:  1.25rem;
    --Space6:  1.5rem;
    --Space8:  2rem;
    --Space10: 2.5rem;
    --Space12: 3rem;
    --Space16: 4rem;
    --Space20: 5rem;
    --Space24: 6rem;


    /* =========================================================================
       BORDER RADIUS
       ========================================================================= */

    --RadiusNone: 0;
    --RadiusSM:   0.125rem;
    --RadiusBase: 0.25rem;
    --Radius:     0.25rem;
    --RadiusMD:   0.375rem;
    --RadiusLG:   0.5rem;
    --RadiusXL:   0.75rem;
    --Radius2XL:  1rem;
    --RadiusFull: 9999px;


    /* =========================================================================
       SHADOWS
       ========================================================================= */

    --ShadowSM:    0 1px 2px 0 hsla(var(--Black), 0.05);
    --ShadowBase:  0 1px 3px 0 hsla(var(--Black), 0.1), 0 1px 2px 0 hsla(var(--Black), 0.06);
    --ShadowMD:    0 4px 6px -1px hsla(var(--Black), 0.1), 0 2px 4px -1px hsla(var(--Black), 0.06);
    --ShadowLG:    0 10px 15px -3px hsla(var(--Black), 0.5), 0 4px 6px -2px hsla(var(--Black), 0.06);
    --ShadowXL:    0 20px 25px -5px hsla(var(--Black), 0.1), 0 10px 10px -5px hsla(var(--Black), 0.04);
    --Shadow2XL:   0 15px 40px -12px hsla(var(--Black), 0.55);
    --ShadowInner: inset 0 2px 4px 0 hsla(var(--Black), 0.06);
    --ShadowNone:  none;


    /* =========================================================================
       Z-INDEX SCALE
       ========================================================================= */

    --ZIndexBase:          0;
    --ZIndexDropdown:      1000;
    --ZIndexSticky:        1020;
    --ZIndexFixed:         1030;
    --ZIndexModalBackdrop: 1040;
    --ZIndexModal:         1050;
    --ZIndexPopover:       1060;
    --ZIndexTooltip:       1070;


    /* =========================================================================
       TRANSITIONS
       ========================================================================= */

    --TransitionFast: 150ms ease-in-out;
    --TransitionBase: 300ms ease-in-out;
    --TransitionSlow: 500ms ease-in-out;


    /* =========================================================================
       BREAKPOINTS (reference only — CSS custom properties cannot be used in @media)
       ========================================================================= */

    --BreakpointXS:  0;
    --BreakpointSM:  576px;
    --BreakpointMD:  768px;
    --BreakpointLG:  992px;
    --BreakpointXL:  1200px;
    --Breakpoint2XL: 1400px;

}


/* =============================================================================
   BASE ELEMENT STYLES
   Consistent typography for CKEditor and front-end.
   ============================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--FontFamily);
    font-size: var(--FontSizeBase);
    line-height: var(--LineHeightNormal);
    color: hsla(var(--ColorTextPrimary), 1);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--FontFamilyHeading);
}

p {
    font-family: var(--FontFamily);
}

section p {
    margin-bottom: var(--ThemeSpace4);
}

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

p.lead {
    font-size: var(--FontSizeLG);
    line-height: var(--LineHeightRelaxed);
    margin-bottom: var(--Space6);
    color: hsla(var(--ColorTextPrimary), 0.9);
}

a {
    color: hsla(var(--ColorBrand), 1);
    text-decoration: none;
    transition: var(--TransitionFast);
}

a:hover {
    color: hsla(var(--ColorBrandDark), 1);
    text-decoration: underline;
}

a:focus {
    outline: 2px solid hsla(var(--ColorBrand), 0.5);
    outline-offset: 2px;
}

ul,
ol {
    margin-top: 0;
    margin-bottom: var(--Space4);
    padding-left: var(--Space6);
}

ul ul,
ul ol,
ol ul,
ol ol {
    margin-bottom: 0;
    list-style-position: inside;
}

li {
    margin-bottom: var(--Space2);
    line-height: var(--LineHeightRelaxed);
    list-style-position: outside;
}

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

ul          { list-style-type: disc; }
ul ul       { list-style-type: circle; }
ul ul ul    { list-style-type: square; }

ol          { list-style-type: decimal; }
ol ol       { list-style-type: lower-alpha; }
ol ol ol    { list-style-type: lower-roman; }

img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 0;
}

p img,
li img {
    display: inline-block;
    vertical-align: middle;
}

blockquote {
    margin: var(--Space6) 0;
    padding-left: var(--Space6);
    border-left: 4px solid hsla(var(--ColorBrand), 1);
    font-style: italic;
    color: hsla(var(--ColorTextSecondary), 1);
}

blockquote p:last-child {
    margin-bottom: 0;
}

hr {
    border: 0;
    border-top: 1px solid hsla(var(--Gray80), 1);
    margin: var(--Space8) 0;
    height: 0;
    display: block;
}

strong,
b {
    font-weight: var(--FontWeightBold);
}

em,
i {
    font-style: italic;
}

small {
    font-size: var(--FontSizeSM);
    color: hsla(var(--ColorTextMuted), 1);
}

code {
    font-family: var(--FontFamilyMono);
    font-size: 0.9em;
    padding: 2px 6px;
    background: hsla(var(--Gray90), 1);
    border-radius: var(--RadiusSM);
    color: hsla(var(--ColorDanger), 1);
}

pre {
    font-family: var(--FontFamilyMono);
    font-size: var(--FontSizeSM);
    padding: var(--Space4);
    background: hsla(var(--Gray95), 1);
    border-radius: var(--RadiusBase);
    overflow-x: auto;
    margin: var(--Space4) 0;
}

pre code {
    padding: 0;
    background: transparent;
    color: inherit;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--Space6) 0;
}

th,
td {
    padding: var(--Space3) var(--Space4);
    text-align: left;
    border-bottom: 1px solid hsla(var(--ColorBorder), 1);
}

th {
    font-weight: var(--FontWeightSemibold);
    background: hsla(var(--Gray95), 1);
    color: hsla(var(--ColorTextPrimary), 1);
}

tr:hover {
    background: hsla(var(--Gray95), 0.5);
}


/* =============================================================================
   BUTTONS — Structural only. Colors defined in theme.php.
   ============================================================================= */

button,
.button,
a.button,
input[type="submit"],
input[type="button"] {
    display: inline-block;
    border: none;
    padding: var(--Space3) var(--Space6);
    border-radius: var(--Radius2XL);
    font-weight: var(--FontWeightMedium);
    font-size: var(--FontSizeBase);
    font-family: var(--FontFamily);
    text-decoration: none !important;
    text-align: center;
    cursor: pointer;
    transition: all var(--TransitionFast);
    box-shadow: var(--ShadowSM);
    background: hsla(var(--ColorPrimary), 1);
    color: hsla(var(--White), 1);
}

.buttonRed,   a.buttonRed,
.buttonGreen, a.buttonGreen,
.buttonBlue,  a.buttonBlue,
.buttonPurple, a.buttonPurple,
a.buttonNavy, .buttonNavy {
    display: inline-block;
    border: none;
    padding: var(--Space3) var(--Space6);
    font-weight: var(--FontWeightMedium);
    font-size: var(--FontSizeBase);
    font-family: var(--FontFamily);
    text-decoration: none !important;
    text-align: center;
    cursor: pointer;
    transition: all var(--TransitionFast);
    box-shadow: var(--ShadowSM);
}

button:hover,
.button:hover,
a.button:hover,
.buttonRed:hover,    a.buttonRed:hover,
.buttonGreen:hover,  a.buttonGreen:hover,
.buttonBlue:hover,   a.buttonBlue:hover,
.buttonPurple:hover, a.buttonPurple:hover,
a.buttonNavy:hover,  .buttonNavy:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--ShadowMD);
}

button:active,
.button:active,
a.button:active,
input[type="submit"]:active,
input[type="button"]:active {
    transform: translateY(0);
    box-shadow: var(--ShadowSM);
}

a.button:visited,
a.button:focus {
    color: hsla(var(--White), 1) !important;
    text-decoration: none !important;
    outline: none;
}

a.button:focus-visible {
    outline: 2px solid hsla(var(--ColorBrand), 0.5);
    outline-offset: 2px;
}

.buttonSecondary,
a.buttonSecondary {
    display: inline-block;
    border: 1px solid transparent;
    padding: var(--Space3) var(--Space6);
    border-radius: 2px;
    font-weight: var(--FontWeightMedium);
    font-size: var(--FontSizeBase);
    font-family: var(--FontFamily);
    text-decoration: none !important;
    text-align: center;
    cursor: pointer;
    transition: all var(--TransitionBase);
    box-shadow: var(--ShadowSM);
    background: hsla(var(--ColorSecondary), 0.5);
    color: hsla(var(--White), 1);
    border-color: transparent;
}

.buttonSecondary:hover,
a.buttonSecondary:hover {
    transform: translateY(-2px);
    box-shadow: var(--ShadowMD);
}

.buttonSecondary:active,
a.buttonSecondary:active {
    transform: translateY(0);
    box-shadow: var(--ShadowSM);
}

.buttonOutline,
a.buttonOutline {
    display: inline-block;
    border: 2px solid transparent;
    padding: calc(var(--Space3) - 1px) calc(var(--Space6) - 1px);
    border-radius: var(--Radius2XL);
    font-weight: var(--FontWeightMedium);
    font-size: var(--FontSizeBase);
    font-family: var(--FontFamily);
    text-decoration: none !important;
    text-align: center;
    cursor: pointer;
    transition: all var(--TransitionBase);
    background: transparent;
    border-color: hsla(var(--ColorPrimary), 1);
    color: hsla(var(--ColorPrimary), 1);
}

.buttonOutline:hover,
a.buttonOutline:hover {
    transform: translateY(-2px);
    box-shadow: var(--ShadowMD);
}

.buttonOutline:active,
a.buttonOutline:active {
    transform: translateY(0);
    box-shadow: var(--ShadowSM);
}


/* =============================================================================
   TEXT COLOR CLASSES — Used by CKEditor PlutoColor plugin and front-end content
   ============================================================================= */

.Red            { color: hsla(var(--Red), 1) !important; }
.Orange         { color: hsla(var(--Orange), 1) !important; }
.Yellow         { color: hsla(var(--Yellow), 1) !important; }
.Chartreuse     { color: hsla(var(--Chartreuse), 1) !important; }
.Green          { color: hsla(var(--Green), 1) !important; }
.SpringGreen    { color: hsla(var(--SpringGreen), 1) !important; }
.Cyan           { color: hsla(var(--Cyan), 1) !important; }
.Azure          { color: hsla(var(--Azure), 1) !important; }
.Blue           { color: hsla(var(--Blue), 1) !important; }
.Violet         { color: hsla(var(--Violet), 1) !important; }
.Magenta        { color: hsla(var(--Magenta), 1) !important; }
.Rose           { color: hsla(var(--Rose), 1) !important; }

.White          { color: hsla(var(--White), 1) !important; }
.Gray20         { color: hsla(var(--Gray20), 1) !important; }
.Gray50         { color: hsla(var(--Gray50), 1) !important; }
.Gray70         { color: hsla(var(--Gray70), 1) !important; }
.Black          { color: hsla(var(--Black), 1) !important; }

.ColorBrand        { color: hsla(var(--ColorBrand), 1) !important; }
.ColorBrandLight   { color: hsla(var(--ColorBrandLight), 1) !important; }
.ColorBrandDark    { color: hsla(var(--ColorBrandDark), 1) !important; }
.ColorBrand2       { color: hsla(var(--ColorBrand2), 1) !important; }
.ColorBrand2Light  { color: hsla(var(--ColorBrand2Light), 1) !important; }
.ColorBrand2Dark   { color: hsla(var(--ColorBrand2Dark), 1) !important; }
.ColorBrand3       { color: hsla(var(--ColorBrand3), 1) !important; }
.ColorBrand3Light  { color: hsla(var(--ColorBrand3Light), 1) !important; }
.ColorBrand3Dark   { color: hsla(var(--ColorBrand3Dark), 1) !important; }
.ColorBrand4       { color: hsla(var(--ColorBrand4), 1) !important; }
.ColorBrand4Light  { color: hsla(var(--ColorBrand4Light), 1) !important; }
.ColorBrand4Dark   { color: hsla(var(--ColorBrand4Dark), 1) !important; }
.ColorBrand5       { color: hsla(var(--ColorBrand5), 1) !important; }
.ColorBrand5Light  { color: hsla(var(--ColorBrand5Light), 1) !important; }
.ColorBrand5Dark   { color: hsla(var(--ColorBrand5Dark), 1) !important; }

.ColorSuccess   { color: hsla(var(--ColorSuccess), 1) !important; }
.ColorWarning   { color: hsla(var(--ColorWarning), 1) !important; }
.ColorDanger    { color: hsla(var(--ColorDanger), 1) !important; }
.ColorInfo      { color: hsla(var(--ColorInfo), 1) !important; }


/* =============================================================================
   LAYOUT UTILITY CLASSES
   Multi-column text layouts for CKEditor and front-end.
   ============================================================================= */

.twoColumnText {
    column-count: 2;
    column-gap: var(--Space6);
    column-rule: 1px solid hsla(var(--ColorBorder), 0.3);
}

.twoColumnText img.alignLeft,
.twoColumnText img.alignRight {
    float: none;
    display: block;
    margin: 0 auto var(--Space4);
}

.threeColumnText {
    column-count: 3;
    column-gap: var(--Space6);
    column-rule: 1px solid hsla(var(--ColorBorder), 0.3);
}

.fourColumnText {
    column-count: 4;
    column-gap: var(--Space4);
    column-rule: 1px solid hsla(var(--ColorBorder), 0.3);
}

@media (max-width: 768px) {
    .twoColumnText,
    .threeColumnText,
    .fourColumnText {
        column-count: 1 !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .threeColumnText,
    .fourColumnText {
        column-count: 2 !important;
    }
}

.show  { display: block !important; }
.hide  { display: none !important; }

.clear,
.clearFloat {
    clear: both;
    display: block;
}

.clear::after {
    content: "";
    display: table;
    clear: both;
}


/* =============================================================================
   ACCORDION / COLLAPSIBLE SECTIONS
   ============================================================================= */

.accordion {
    border: 1px solid hsla(var(--ColorBorder), 1);
    border-radius: var(--RadiusBase);
    margin: var(--Space4) 0;
    overflow: hidden;
}

.accordion p,
.accordion h1,
.accordion h2,
.accordion h3,
.accordion h4,
.accordion h5,
.accordion h6 {
    color: black;
}

.accordion-item {
    border-bottom: 1px solid hsla(var(--ColorBorder), 1);
}

.accordion-item:last-child {
    border-bottom: none;
}

.accordion-header {
    background: hsla(var(--ColorBgSecondary), 1);
    padding: var(--Space3) var(--Space4);
    cursor: pointer;
    user-select: none;
    transition: var(--TransitionFast);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: var(--FontWeightMedium);
}

.accordion-header:hover {
    background: hsla(var(--ColorBgTertiary), 1);
}

.accordion-header::after {
    content: '▼';
    font-size: var(--FontSizeSM);
    transition: transform var(--TransitionFast);
    color: hsla(var(--ColorBrand), 1);
}

.accordion-item.active .accordion-header::after {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--TransitionBase) ease-out;
    background: hsla(var(--ColorBgPrimary), 1);
}

.accordion-item.active .accordion-content {
    max-height: 5000px;
    transition: max-height var(--TransitionBase) ease-in;
}

.accordion-content-inner {
    padding: var(--Space4);
}


/* =============================================================================
   IMAGE SIZING CLASSES
   ============================================================================= */

.img25  { max-width: 25%;  height: auto; }
.img50  { max-width: 50%;  height: auto; margin-right: var(--Space4); }
.img75  { max-width: 75%;  height: auto; }
.img100 { max-width: 100%; height: auto; }

@media (max-width: 768px) {
    .img25,
    .img50,
    .img75 {
        max-width: 100% !important;
    }
}


/* =============================================================================
   ALIGNMENT CLASSES
   ============================================================================= */

img.alignLeft {
    float: left;
    margin: 0 var(--Space4) var(--Space4) 0;
    clear: left;
}

img.alignRight {
    float: right;
    margin: 0 0 var(--Space4) var(--Space4);
    clear: right;
}

img.alignCenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--Space4);
    float: none;
    clear: both;
}

h1.alignLeft, h2.alignLeft, h3.alignLeft,
h4.alignLeft, h5.alignLeft, h6.alignLeft,
p.alignLeft, div.alignLeft, blockquote.alignLeft  { text-align: left; }

h1.alignRight, h2.alignRight, h3.alignRight,
h4.alignRight, h5.alignRight, h6.alignRight,
p.alignRight, div.alignRight, blockquote.alignRight { text-align: right; }

h1.alignCenter, h2.alignCenter, h3.alignCenter,
h4.alignCenter, h5.alignCenter, h6.alignCenter,
p.alignCenter, div.alignCenter, blockquote.alignCenter { text-align: center; }

p.alignJustify,
div.alignJustify,
blockquote.alignJustify { text-align: justify; }

ul.bulletsCenter              { list-style-position: inside; text-align: center; }
ul.bulletsCenter li           { list-style-position: inside; }


/* =============================================================================
   IMAGE STYLE CLASSES
   ============================================================================= */

img.imgRoundedCorners { border-radius: var(--RadiusMD); }
img.imgDropShadow     { box-shadow: var(--ShadowLG); }
img.imgBorder         { border: 2px solid hsla(var(--ColorBorder), 1); background: hsla(var(--ColorBgPrimary), 1); }
.dropShadow           { box-shadow: var(--ShadowLG); }


/* =============================================================================
   SECTION LAYOUT CLASSES
   ============================================================================= */

section,
.section {
    width: 100%;
    display: flex;
}

section::after,
.section::after {
    content: "";
    display: table;
    clear: both;
}

section.sectionWhite {
    background: hsla(var(--White), 1);
    padding: var(--Space8) var(--Space6);
    min-height: 30vh;
}

section.sectionBrand1,
section.sectionBrand2,
section.sectionBrand3,
section.sectionBrand4,
section.sectionBrand5 {
    width: 100%;
    margin: 20px auto;
    padding: var(--Space8) var(--Space6);
}

section.sectionBrand1,  .section.sectionBrand1  { background: hsla(var(--ColorBrandDark), 1);  color: hsla(var(--White), 1); }
section.sectionBrand2,  .section.sectionBrand2  { background: hsla(var(--ColorBrand2Dark), 1); color: hsla(var(--White), 1); }
section.sectionBrand3,  .section.sectionBrand3  { background: hsla(var(--ColorBrand3Dark), 1); color: hsla(var(--White), 1); }
section.sectionBrand4,  .section.sectionBrand4  { background: hsla(var(--ColorBrand4Dark), 1); color: hsla(var(--White), 1); }
section.sectionBrand5,  .section.sectionBrand5  { background: hsla(var(--ColorBrand5Dark), 1); color: hsla(var(--White), 1); }

section.sectionLight,
.section.sectionLight {
    background: hsla(var(--White), 1);
    color: hsla(var(--ColorTextPrimary), 1);
}

section.sectionGray,
.section.sectionGray {
    padding-top: var(--Space6);
    padding-bottom: var(--Space6);
    background: hsla(var(--Gray95), 1);
    color: hsla(var(--ColorTextPrimary), 1);
}

section.White,
.section.sectionWhite {
    position: relative;
    background: hsla(var(--White), 1);
    color: hsla(var(--ColorTextPrimary), 1);
    width: 90%;
    margin: 0 auto;
    max-width: 1920px;
    margin-bottom: var(--Space6);
    box-shadow: var(--ShadowXL);
    display: block;
    padding: var(--Space8) var(--Space6);
}

section.sectionBrand1 h1, section.sectionBrand1 h2, section.sectionBrand1 h3,
section.sectionBrand1 h4, section.sectionBrand1 h5, section.sectionBrand1 h6,
section.sectionBrand1 p,  section.sectionBrand1 ul, section.sectionBrand1 ol, section.sectionBrand1 a,
section.sectionBrand2 h1, section.sectionBrand2 h2, section.sectionBrand2 h3,
section.sectionBrand2 h4, section.sectionBrand2 h5, section.sectionBrand2 h6,
section.sectionBrand2 p,  section.sectionBrand2 ul, section.sectionBrand2 ol, section.sectionBrand2 a,
section.sectionBrand3 h1, section.sectionBrand3 h2, section.sectionBrand3 h3,
section.sectionBrand3 h4, section.sectionBrand3 h5, section.sectionBrand3 h6,
section.sectionBrand3 p,  section.sectionBrand3 ul, section.sectionBrand3 ol, section.sectionBrand3 a,
section.sectionBrand4 h1, section.sectionBrand4 h2, section.sectionBrand4 h3,
section.sectionBrand4 h4, section.sectionBrand4 h5, section.sectionBrand4 h6,
section.sectionBrand4 p,  section.sectionBrand4 ul, section.sectionBrand4 ol, section.sectionBrand4 a,
section.sectionBrand5 h1, section.sectionBrand5 h2, section.sectionBrand5 h3,
section.sectionBrand5 h4, section.sectionBrand5 h5, section.sectionBrand5 h6,
section.sectionBrand5 p,  section.sectionBrand5 ul, section.sectionBrand5 ol, section.sectionBrand5 a {
    color: hsla(var(--White), 1);
}


/* =============================================================================
   SECTION GRID COLUMN VARIANTS
   ============================================================================= */

section.sectionTwoColumn,   .section.sectionTwoColumn   { grid-template-columns: 1fr 1fr;         gap: var(--Space6); }
section.sectionThreeColumn, .section.sectionThreeColumn { grid-template-columns: 1fr 1fr 1fr;      gap: var(--Space6); }
section.sectionAutoFit,     .section.sectionAutoFit     { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--Space6); }

@media (max-width: 768px) {
    section.sectionTwoColumn,   .section.sectionTwoColumn,
    section.sectionThreeColumn, .section.sectionThreeColumn,
    section.sectionAutoFit,     .section.sectionAutoFit {
        grid-template-columns: 1fr;
    }
}