/* ==========================================================================
      Common Styles - Shared Base Styles
--------------------------------------------------------------------------
    Think of this file as your "design system layer":
    - Design tokens (CSS variables) define brand colors, typography, spacing.
    - Global resets & a11y helpers establish consistent defaults.
    - Reusable primitives (buttons, grids, form controls, typography scale)
      behave like a lightweight utility framework similar to Tailwind CSS.
    - Page-level components (breadcrumb, headers, layouts) are composed from
      these primitives for consistency.
========================================================================== */
/* Mobile: max-width: 877px */
/* Tablet: min-width: 878px and max-width: 1024px */
/* Desktop: min-width: 1025px (default/base styles) */
/* ==========================================================================
    CSS Custom Properties - Design System Tokens
--------------------------------------------------------------------------
    Single source of truth for:
    - Brand palette          (primary / secondary / greys)
    - Typography scale       (font families, sizes, line heights)
    - Layout metrics         (container widths, sidebar widths, cards)
    - Motion & layering      (transitions, shadows, z-index scale)
    All components and utilities below should consume these variables instead
    of hard-coded values wherever possible.

    --------------------------------------------------------------------------
    READ THIS BEFORE ADDING OR USING A COLOUR TOKEN
    --------------------------------------------------------------------------
    Every colour token declared in this file is a COMPLETE CSS COLOUR and is
    consumed BARE:

        --color-dark-blue: #005596;
        color: var(--color-dark-blue);
        background: color-mix(in srgb, var(--color-dark-blue) 10%, transparent);

    NEVER wrap one in rgb()/rgba(). `rgb(var(--color-dark-blue))` expands to
    `rgb(#005596)`, which is invalid at computed-value time, so the browser
    DROPS THE WHOLE DECLARATION and the element falls back to its inherited or
    initial value. There is no console error and no visible parse failure - the
    colour just quietly goes missing. Use color-mix() when you need alpha.

    HISTORY - and the one thing never to reintroduce
    ------------------------------------------------
    These tokens used to be declared as bare "R, G, B" triples, a format that
    existed for one reason only: alpha compositing, which predates color-mix().
    Since roughly 90% of the call sites needed no alpha at all, the repo was
    migrated (Sept 2026) to the single colour format above.

    An intermediate state of that migration declared every colour TWICE in this
    same :root - once as a triple, and once as its own "derived" value:

        --color-white: 255, 255, 255;
        --color-white: rgb(var(--color-white));   <- SELF-REFERENCE

    A custom property whose value references itself is a dependency CYCLE. Per
    the CSS Variables spec every property in the cycle computes to the
    guaranteed-invalid value, so BOTH `var(--color-white)` and
    `rgb(var(--color-white))` were dead everywhere - the second declaration did
    not derive from the first, it destroyed it. Never write `--x: rgb(var(--x))`
    or any other self-referencing token here; if you need a derived value, give
    it a DIFFERENT name (see --color-valent-* in valentair/css/styles.css, which
    derives from the distinctly-named --valent-* triples and is therefore fine).

    Bare RGB triples still exist in two places OUTSIDE this file and are still
    consumed wrapped in rgb()/rgba(), so do not "fix" them to match:
      - Content/valentair/css/styles.css   --valent-*
      - Content/CapsLiveNewFeed/*.css      --primary, --secondary, --accent, ...
    Note that valentair/css/styles.css also RE-THEMES three tokens declared
    below (--color-dark-blue, --color-sky-blue, --color-secondary-blue). Those
    overrides are colour-format, matching the declarations here - a re-theme
    must never flip a token's format, because that breaks one brand while the
    other looks fine.

    CMS caveat: CSS authored inside the Sitefinity database (page templates,
    HTML widgets, inline styles) is not in this repo and may still write
    `rgb(var(--color-dark-blue))`. Those call sites have to be edited in the CMS
    to the bare form. They are no worse off than before this change: the
    self-reference cycle described above had already killed them.

    `tools/css-token-lint/` enforces all of the above; the pre-commit
    hook in `.githooks/` runs it on staged files.
    --------------------------------------------------------------------------
========================================================================== */
:root {
    /* ----------------------------------------------------------------------
       Core palette. Consume BARE: var(--x).
       Never wrap in rgb()/rgba(); for alpha use
       color-mix(in srgb, var(--x) N%, transparent).
       ---------------------------------------------------------------------- */
    --color-white: #fff;
    --color-dark-blue: #005596;
    --color-dark-gray: #5f6062;
    --color-near-black: #333;
    --color-near-black-2: #0d0d0d;
    --color-black: #000;
    --color-medium-gray: #a7a9ac;
    --color-light-gray: #f6f6f6;
    --color-border-gray: #d6d6d6;
    --color-text-gray: #666;
    --color-tag-gray: #969696;
    --color-tag-gray-icon: #d0d0d0;
    --color-tag-gray-filter-border: #e5e5e5;
    --color-sky-blue: #34a8f6;
    --color-orange: #ec881d;
    --color-leadtime-moved-in: #b7bf10;
    --color-leadtime-moved-out: #f8d018;
    /* UI State Colors (for design-time helpers, modals, etc.) */
    --color-warning-bg: #fff3cd;
    --color-warning-border: #ffc107;
    --color-warning-hover: #ffe69c;
    --color-warning-text: #856404;
    --color-success-bg: #d4edda;
    --color-success-border: #28a745;
    --color-success-text: #155724;
    --color-error: #d32f2f;
    --color-nav-hover-blue: #34a8f6;
    --color-secondary-blue: #34a8f6;
    /* ----------------------------------------------------------------------
       Additional named colours
       ---------------------------------------------------------------------- */
    --color-gray: #333;
    --color-mid-gray: #666;
    --color-lighter-gray: #e5e5e5;
    --color-hover-gray: rgb(87 88 90);
    --color-accent-orange: #d97a24;
    --color-cta-orange: #e65c00;
    --color-navy: #003057;
    --color-link-blue: #0066cc;
    --color-timeline-accent: #29a9e0;
    --color-timeline-accent-hover: #1d8ab8;
    --white: #fff;
    /* Brand Colors */
    --primary-color: #075697;
    --primary-color-dark: #054070;
    --primary-hover: rgba(7, 86, 151, 0.9);
    --secondary-color: #1d4ed8;
    --color-primary: #075697;
    --color-primary-light: #34a8f6;
    /* Text Colors */
    --text-color: #1f2937;
    --text-primary: #333;
    --text-secondary: #666;
    --text-light: #6b7280;
    --link-color: #999999;
    --icon-color: #5f6368;
    /* Background Colors */
    --background-color: #ffffff;
    --background-light: #fafafa;
    --background-sidebar: #f9fafb;
    --background-overlay: rgba(255, 255, 255, 0.95);
    --background-hover: rgba(37, 99, 235, 0.05);
    --background-button-hover: #f0f0f0;
    --color-bg-light: #f4f4f4;
    --color-bg-lighter: #f6f6f6;
    --color-bg-lightest: #f7f8fa;
    --color-surface-subtle: #f7f8f9;
    /* Border Colors */
    --border-color: #e5e5e5;
    --border-color-dark: #969696;
    --card-border: #e5e5e5;
    --checkbox-border: #d1d5db;

    /* --------------------------------------------------------------
       Aliases for previously-undefined tokens
       --------------------------------------------------------------
       These names were referenced by building-types.css/.js,
       product-listing.css and ad-vehicle-*.css but were never declared
       anywhere, so every declaration using them was invalid at
       computed-value time and silently dropped. Aliased to the nearest
       existing token so the call sites keep their semantic names and can
       be retuned here in one place. An alias forwards its target's value,
       so these are consumed bare like everything else.
       -------------------------------------------------------------- */
    /* building-types.css: light neutral surfaces + gradient stops */
    --color-bg-light-1: var(--color-light-gray);        /* scrollbar track, modal surface, gradient end */
    --color-bg-light-2: var(--color-white);             /* .school-building gradient start */
    --color-bg-gradient-start: var(--color-white);      /* .hvac-unit-3d gradient start */
    --color-bg-light-3: var(--color-light-gray);        /* .hvac-unit-3d gradient end */
    --color-bg-hover: var(--color-light-gray);          /* popover close-button hover tint */
    /* building-types.css: borders + carousel dots */
    --color-border-medium: var(--color-medium-gray);    /* inactive carousel dot */
    --color-near-border-gray: var(--color-border-gray); /* .product-body-content scrollbar track */
    --color-popover-border: var(--color-border-gray);   /* .space-popover border + arrow tail */
    /* product-listing.css / ad-vehicle-*.css: type + borders.
       NOTE: while undefined, these font declarations fell back to the
       inherited --font-family-medium from `body`, so they are aliased to
       medium here to keep rendering byte-identical. If design wants true
       body copy at these sites, repoint --font-family / --font-family-body
       at --font-family-book. */
    --font-family: var(--font-family-medium);
    --font-family-body: var(--font-family-medium);
    --font-family-heading: var(--font-family-bold);     /* its rule declares font-weight: 700 */
    --border-light: var(--border-color);                /* disabled checkbox border */

    /* Shared header/footer tokens */
    /* Sticky elements (e.g. product-detail nav): set to fixed header height so bar sits below it */
    --product-detail-sticky-top: 0;
    --border-radius: 21px;
    --border-radius-sm: 4px;
    --border-radius-pill: 21px;
    --font-size-base: 15px;
    --font-size-nav: 15px;
    --transition-base: all 0.2s ease-in-out;
    --spacing-sm: 6px;
    --spacing-md: 15px;
    --spacing-lg: 30px;
    --spacing-xl: 32px;
    /* Shadows */
    --shadow-sm: 0 2px 4px color-mix(in srgb, var(--color-black) 5%, transparent);
    --shadow-lg: 0 4px 12px color-mix(in srgb, var(--color-black) 10%, transparent);
    --box-shadow-base: 0 4px 12px rgba(0, 0, 0, 0.05);
    --box-shadow-dropdown: 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    /* Inset shadow for select/dropdown inputs (resource list, communications) */
    --dropdown-shadow: inset -4px -2px 10px 0 var(--color-light-gray), 0 0 0 0 color-mix(in srgb, var(--color-black) 62%, transparent);
    --box-shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.18);
    /* Typography */
    --font-family-light: "SharpSans-Light", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    --font-family-medium: "SharpSans-Medium", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    --font-family-semi-bold: "SharpSans-SemiBold", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    --font-family-bold: "SharpSans-Bold", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    --font-family-book: "SharpSans-Book", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    --font-family-extra-bold: "SharpSans-ExtraBold", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    --font-family-helvetica-condensed: "Helvetica-Condensed", sans-serif;
    --font-family-helvetica-condensed-bold: "Helvetica-Condensed-Bold", sans-serif;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.8;
    /* Layout */
    --max-width-container: 1248px;
    --card-max-width: 288px;
    --card-height: 354px;
    --sidebar-width: 288px;
    --sidebar-width-tablet: 240px;
    --card-back-height: 308px;
    --icon-visibility-width: 15px;
    --icon-visibility-on-height: 10px;
    --icon-visibility-off-height: 14px;
    --icon-scroll-top: 36px;
    /* Responsive Container Padding */
    --container-padding-desktop: 48px;
    --container-padding-tablet: 72px;
    --container-padding-mobile: 38px;
    /* Fixed mobile header bar height. Used as the `<main>` top offset on
     mobile/tablet breakpoints (<=1023px) where `.mobile-header-bar` is
     `position: fixed` and therefore removed from normal flow.
     Value = 44px (tallest child, #mobile-nav-toggle) + 2 * 25px
     (`.mobile-header-container` vertical padding) = 94px. Keep in sync
     with `.mobile-header-container` padding in header/common CSS. */
    --mobile-header-height: 94px;
    /* Cosmetic bottom gap below the desktop site header (white strip between
     the logo/nav bar and page content). Zeroed out in the scrolled/sticky
     state and in gradient-hero mode (see header.css and
     header-transparent-overrides.css). */
    --site-header-bottom-gap: 7px;
    /* Height of the mobile/tablet `.mobile-header-logo` wrapper. The <img>
     inside it is `height: 100%; width: auto` so this variable is the single
     source of truth for mobile logo size. Default is the mobile value; the
     tablet breakpoint redeclares it below, and `header-transparent-overrides.css`
     bumps it on gradient-hero tablet pages. */
    --mobile-logo-height: 33px;
    /* Desktop logo height in the two sticky-nav states. Applied on
     `.site-header .header-logo img` at the default value, and overridden
     in `.site-header--scrolled .header-logo img` at the scrolled value.
     `width: auto` on the <img> preserves aspect ratio. One source of truth
     for light AND gradient-hero pages so the compact state looks identical
     across themes (see header.css and header-transparent-overrides.css).
     Rounded to integer pixels — the Figma-exported 33.87px reads identically
     on every DPR but cascades cleanly as 34. */
    --desktop-logo-height-default: 46px;
    --desktop-logo-height-scrolled: 34px;
    /* Desktop site-header total height in its DEFAULT (non-scrolled) state.
     Breakdown: `.site-header__top-bar` min-height 65px
              + `.site-header__logo-nav-bar` height 122.25px
              + `.site-header__container` padding-bottom 7px (= --site-header-bottom-gap)
              ≈ 194.25px, rounded up to 195 for a 0.75px safety cushion.
     Used by `<main>` as `padding-top` on desktop so the fixed header never
     overlaps content, and content never shifts when the header compacts on
     scroll (see .site-header { position: fixed } in header.css). Hero pages
     opt out because they intentionally render the hero image under the
     header — via `.header-gradient-mode` on Greenheck and the page-level
     `.header-overlay-hero` on Valent. */
    --site-header-height-default: 195px;
    /* Shared motion tokens for the desktop sticky-header compact/expand
     animation. Kept separate from the mega-menu --header-nav-motion-*
     tokens because the two are different motions: the mega menu favours a
     longer, more dramatic curve (640ms, ease-out spring); the sticky nav
     favours a tighter, material-standard transition (~360ms, ease-in-out)
     so the reverse scroll-up doesn't feel heavy. */
    --header-scroll-transition-duration: 360ms;
    --header-scroll-transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition: 0.3s ease;
    --transition-normal: all 0.3s ease;
    --transition-smooth: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Header nav mega menu + sticky bar (shared motion language) */
    --header-nav-motion-duration-enter: 640ms;
    --header-nav-motion-duration-exit: 440ms;
    --header-nav-motion-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
    --header-nav-motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
    /* Component-Specific Colors */
    --footer-bg: #f8f8f8;
    /* Z-Index Scale */
    --z-close-btn: 10;
    --z-skip-link: 100;
    --z-scroll-top: 1000;
}

/* ==========================================================================
    Font Definitions
--------------------------------------------------------------------------
    Font-family aliases used throughout the typography scale:
    - SharpSans-Book / -Medium / -Bold: core brand text styles
    - SharpSans variants: alternative headline styles
    Note: Using SharpSans font family exclusively.
========================================================================== */
@font-face {
    font-family: "SharpSans-Book";
    src: url("../font/SharpSans-Book.otf") format("opentype");
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: "SharpSans-Medium";
    src: url("../font/SharpSans-Medium.otf") format("opentype");
    font-display: swap;
    font-weight: 500;
}

@font-face {
    font-family: "SharpSans-Bold";
    src: url("../font/SharpSans-Bold.otf") format("opentype");
    font-display: swap;
    font-weight: 700;
}

@font-face {
    font-family: "SharpSans-Light";
    src: url("../font/SharpSans-Light.otf") format("opentype");
    font-display: swap;
    font-weight: 300;
}

@font-face {
    font-family: "SharpSans-Thin";
    src: url("../font/SharpSans-Thin.otf") format("opentype");
    font-display: swap;
    font-weight: 100;
}

@font-face {
    font-family: "SharpSans-SemiBold";
    src: url("../font/SharpSans-SemiBold.otf") format("opentype");
    font-display: swap;
    font-weight: 600;
}

@font-face {
    font-family: "SharpSans-ExtraBold";
    src: url("../font/SharpSans-ExtraBold.otf") format("opentype");
    font-display: swap;
    font-weight: 800;
}

@font-face {
    font-family: "FontAwesome";
    src: url("../font/fontawesome-webfont.eot?v=4.7.0");
    src: url("../font/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("../font/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("../font/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("../font/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("../font/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

 

.card-short-info-text:empty {
    display: none !important;
}

.card-with-icon p {
    padding-bottom: 10px;
}

img.nav-card-img {
    width: auto;
    height: 100%;
}

sub {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -2.6px;
}

.semi-bold {
    font-family: var(--font-family-semi-bold) !important;
    font-weight: 600 !important;
}

.font-18 {
    font-size: 18px !important;
}

.border-bottom-gray {
    border-bottom: 1px solid rgba(151, 151, 151, 1) !important;
}

.bg-light-gray-ck {
    background-color: #f8f8f8;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.gs-action > .fa {
    display: inline-block !important;
}

.fa-remove:before,
.fa-close:before,
.fa-times:before {
    content: "\f00d";
}

.fa-pencil:before {
    content: "\f040";
}

.fa-ban:before {
    content: "\f05e";
}

.fa-compress:before {
    content: "\f066";
}

.fa-plus:before {
    content: "\f067";
}

.fa-minus:before {
    content: "\f068";
}

.fa-asterisk:before {
    content: "\f069";
}

.fa-arrows-alt:before {
    content: "\f0b2";
}

.fa-save:before,
.fa-floppy-o:before {
    content: "\f0c7";
}

.fa-rotate-left:before,
.fa-undo:before {
    content: "\f0e2";
}

.fa-share-alt:before {
    content: "\f1e0";
    color: var(--color-dark-blue);
}

.fa-twitter:before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 12px;
    background-image: url("/Content/img/icons/twitter-black.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: -0.125em;
}

.fa-linkedin:before {
    content: "\f0e1";
}

.fa-facebook-f:before,
.fa-facebook:before {
    content: "\f09a";
}

.fa-envelope:before {
    content: "\f0e0";
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
}

/* ==========================================================================
    CSS Reset & Base
--------------------------------------------------------------------------
    - Normalize box model and typography defaults.
    - Set global body typography and background.
    - Prefer system fonts with brand overrides from the font-face block.
========================================================================== */
*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

html {
    box-sizing: border-box;
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-family-medium);
    font-size: 15px;
    line-height: var(--line-height-relaxed);
    background: var(--color-white);
    color: var(--color-near-black);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
    Accessibility Utilities
--------------------------------------------------------------------------
    - `.sr-only` / `.skip-link` mirror common a11y utility patterns.
    - Focus styles are visible by default and enhanced for `:focus-visible`.
    - These behave similarly to Tailwind's a11y helpers.
========================================================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

    .sr-only:focus {
        position: static;
        width: auto;
        height: auto;
        padding: 8px;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
        background-color: var(--color-white);
        border: 2px solid var(--color-dark-blue);
        border-radius: 8px;
    }

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-dark-blue);
    color: var(--color-white);
    padding: 8px;
    text-decoration: none;
    z-index: var(--z-skip-link);
    border-radius: 0 0 4px 0;
}

    .skip-link:focus {
        top: 0;
    }

/* ==========================================================================
    Focus Styles for Accessibility
--------------------------------------------------------------------------
    Global focus ring using the primary color, with `:focus-visible` support
    to avoid noisy outlines for mouse interactions in modern browsers.
========================================================================== */
*:focus,
*:hover {
    /* outline: 2px solid rgb(var(--color-black));
    outline-offset: 2px; */
    outline: none !important;
}

    *:focus:not(:focus-visible) {
        outline: none !important;
    }

*:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
}
.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}
/* ==========================================================================
    Scroll To Top Button
--------------------------------------------------------------------------
    Fixed button that appears when scrolling down, using material symbols.
========================================================================== */
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    background-color: var(--color-white);
    color: var(--color-dark-blue);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: var(--z-scroll-top);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-fast), background-color var(--transition-fast);
    box-shadow: var(--shadow-lg);
}

    .scroll-to-top.visible {
        opacity: 1;
        visibility: visible;
    }

    .scroll-to-top:hover {
        background-color: var(--color-light-gray);
    }

    .scroll-to-top .material-symbols-outlined {
        font-size: 24px;
        font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    }

/* ==========================================================================
    Layout Components - Page Shell
--------------------------------------------------------------------------
    High-level layout primitives used across pages:
    - `main`: page content container with max-width + padding.
    - Additional grid and column systems are defined later in the file.
========================================================================== */
body > main {
    padding: 0;
    /* max-width: var(--max-width-container); */
    margin: 0 auto 0 auto;
}

a {
    color: var(--color-dark-blue);
    text-decoration: none;
}

    a:hover {
        color: var(--color-sky-blue);
        text-decoration: none;
    }

    a:focus {
        color: var(--color-dark-blue);
        text-decoration: none;
    }

    a:active {
        color: var(--color-dark-blue);
        text-decoration: none;
    }

/* Default-hidden state for the white logo variants. They are cross-faded with
   their blue counterparts in the header (see header.css), so we hide via
   `opacity` rather than `display: none` — otherwise the element would be
   removed from rendering and the opacity transition would never run. */
.desktop-logo-white,
.mobile-logo-white {
    opacity: 0;
    pointer-events: none;
}

.hide,
.hidden {
    display: none !important;
}

/* ==========================================================================
    Breadcrumb Navigation (site-breadcrumb: avoids Bootstrap .breadcrumb conflict)
--------------------------------------------------------------------------
    Composable breadcrumb using:
    - `.site-breadcrumb`       : container spacing.
    - `.site-breadcrumb__list` : horizontal flex list.
    - `.site-breadcrumb__item` : individual crumb styling.
    - `.site-breadcrumb__link` : interactive states.
    This behaves like a small component built from layout + text primitives.
========================================================================== */
.site-breadcrumb {
    margin-bottom: 22px !important;
    max-width: var(--max-width-container);
    width: 100%;
}

.site-breadcrumb__list {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-dark-gray);
    flex-wrap: wrap;
    height: auto;
}

.site-breadcrumb__item {
    display: flex;
    align-items: center;
    font-family: var(--font-family-semi-bold);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-near-black);
}

.site-breadcrumb__arrow {
    font-size: 14px !important;
    color: #999999 !important;
    margin: 0;
    vertical-align: middle;
    vertical-align: middle;
}

.site-breadcrumb__link {
    color: var(--color-near-black);
    text-decoration: none;
    transition: var(--transition);
}

    .site-breadcrumb__link:hover,
    .site-breadcrumb__link:focus {
        color: var(--color-dark-blue);
    }

.site-breadcrumb__current {
    color: var(--color-medium-gray);
    font-weight: 500;
}

.max-width-1248 {
    max-width: 1248px;
}

.m-auto {
    margin: 0 auto;
}

.w-full {
    width: 100%;
}

.w-fit-content {
    width: fit-content !important;
}

.text-right {
    text-align: right !important;
}

/* ==========================================================================
    Link Utility Class
--------------------------------------------------------------------------
    Utility class for consistent link styling with typography and interactive states.
========================================================================== */
.link-small {
    font-size: 14px;
    color: var(--color-dark-blue);
    text-decoration: none;
    transition: var(--transition);
}

    .link-small:hover,
    .link-small:focus {
        color: var(--color-dark-blue);
        text-decoration: underline;
    }

/* ==========================================================================
    Page Header
--------------------------------------------------------------------------
    Flexible heading + subheading pattern used across templates.
    Aligns with the typography scale defined in the `.text-content` section.
========================================================================== */
.page-header {
    text-align: center;
    margin-bottom: 21px;
}

    .page-header h1,
    .page-title,
    h1 {
        font-family: var(--font-family-bold);
        font-weight: 700;
        font-size: 32px;
        line-height: 38px;
        color: var(--color-near-black);
        margin-bottom: 0;
        text-align: left;
    }

    .page-header p {
        font-size: 15px;
        font-weight: 500;
        color: var(--color-near-black);
        line-height: 22px;
        margin: 0 auto;
        text-align: left;
        width: 100%;
    }

    .page-header h2,
    h2,
    h3 .account-sidebar h3 {
        color: var(--color-near-black);
        font-family: var(--font-family-medium);
        font-size: 22px;
        font-weight: 500;
    }

/* ==========================================================================
    Scroll to Top Button
--------------------------------------------------------------------------
    Floating action button composed from:
    - Fixed positioning tokens (bottom/right offsets).
    - Icon font styles (`.material-symbols-outlined`).
    - Hover/focus state using brand blue.
========================================================================== */
.scroll-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 36px;
    height: 36px;
    color: var(--color-dark-blue);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-scroll-top);
    text-decoration: none;
}

.material-symbols-outlined {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
    font-size: 22px;
    color: var(--color-dark-gray);
}

.scroll-to-top .material-symbols-outlined {
    font-size: 36px;
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
    line-height: 1;
    color: var(--color-dark-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-to-top:hover .material-symbols-outlined,
.scroll-to-top:focus .material-symbols-outlined {
    color: var(--color-white);
    background-color: var(--color-sky-blue);
    border-radius: 50%;
}

.font-bold {
    font-family: var(--font-family-bold);
    font-weight: 700;
}

.font-medium {
    font-family: var(--font-family-medium);
    font-weight: 500;
}

.font-semi-bold {
    font-family: var(--font-family-semi-bold);
    font-weight: 600;
}

/* ==========================================================================
    Accordion Utility - Minimal Divider Rhythm
--------------------------------------------------------------------------
    Reusable section divider utility for stacked accordion rows.
    Keep the visual language quiet and consistent with design tokens.
========================================================================== */
.grey-bottom-border {
    border-bottom: 1px solid var(--color-border-gray);
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    margin-top: 0;
    margin-bottom: 0;
}

    .grey-bottom-border + .grey-bottom-border {
        margin-top: var(--spacing-sm);
    }

/* ==========================================================================
    Responsive Design - Base
--------------------------------------------------------------------------
    Base typography and spacing tweaks for smaller screens.
    Additional breakpoint-specific grid behavior is defined
    alongside the grid system later in the file.
========================================================================== */
/* ==========================================================================
      Typography Utilities - Text Content Scale
--------------------------------------------------------------------------
      `.text-content` acts as a base block-level text container.
      Variant classes encode both weight and semantic role:
        - bold-*     : strong headings / emphasis
        - medium-*   : primary headings / labels
        - regular-*  : body text
      Suffix scale:
        - h1–h3  : display/section headings
        - st1–st3: section titles / lead-ins
        - p1–p3  : body copy sizes
      This mirrors a Tailwind-like type ramp while keeping semantic class names.
========================================================================== */
.text-content {
    text-align: left;
    margin-bottom: 20px;
}

    .text-content.bold-h1 {
        font-family: var(--font-family-bold);
        font-size: 42px;
        font-weight: 700;
        color: var(--color-near-black);
        max-width: var(--max-width-container);
        margin: 0 auto;
    }

    .text-content.bold-h2 {
        font-family: var(--font-family-bold);
        font-size: 32px;
        font-weight: 700;
        color: var(--color-near-black);
    }

    .text-content.bold-h3,
    .blog-post-text-container h3 {
        font-family: var(--font-family-bold);
        font-size: 22px;
        font-weight: 700;
        color: var(--color-near-black);
    }

    .text-content.bold-st1 {
        font-family: var(--font-family-bold);
        font-size: 18px;
        font-weight: 700;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

    .text-content.bold-st2 {
        font-family: var(--font-family-bold);
        font-size: 16px;
        font-weight: 700;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

    .text-content.bold-st3 {
        font-family: var(--font-family-bold);
        font-size: 14px;
        font-weight: 700;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

    .text-content.bold-p1 {
        font-family: var(--font-family-bold);
        font-size: 15px;
        font-weight: 500;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

    .text-content.bold-p2 {
        font-family: var(--font-family-bold);
        font-size: 14px;
        font-weight: 500;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

    .text-content.bold-p3 {
        font-family: var(--font-family-bold);
        font-size: 13px;
        font-weight: 500;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

    .text-content.medium-h1 {
        font-family: var(--font-family-medium);
        font-size: 42px;
        font-weight: 500;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

    .text-content.medium-h2 {
        font-family: var(--font-family-medium);
        font-size: 32px;
        font-weight: 500;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

    .text-content.medium-h3 {
        font-family: var(--font-family-medium);
        font-size: 22px;
        font-weight: 500;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

    .text-content.medium-st1 {
        font-family: var(--font-family-medium);
        font-size: 18px;
        font-weight: 500;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

    .text-content.medium-st2 {
        font-family: var(--font-family-medium);
        font-size: 16px;
        font-weight: 500;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

    .text-content.medium-st3 {
        font-family: var(--font-family-medium);
        font-size: 14px;
        font-weight: 500;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

    .text-content.medium-p1,
    .blog-post-text-container p,
    .blog-post-text-container ul > li,
    .blog-post-text-container ol > li {
        font-family: var(--font-family-medium);
        font-size: 15px;
        font-weight: 500;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

    .text-content.medium-p2 {
        font-family: var(--font-family-medium);
        font-size: 14px;
        font-weight: 500;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

    .text-content.medium-p3 {
        font-family: var(--font-family-medium);
        font-size: 13px;
        font-weight: 500;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

    .text-content.regular-h1 {
        font-family: var(--font-family-medium);
        font-size: 42px;
        font-weight: 400;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

    .text-content.regular-h2 {
        font-family: var(--font-family-medium);
        font-size: 32px;
        font-weight: 400;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

        .text-content.regular-h2 b {
            font-family: var(--font-family-bold);
            font-weight: 700;
        }

    .text-content.regular-h3 {
        font-family: var(--font-family-medium);
        font-size: 22px;
        font-weight: 400;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

    .text-content.regular-st1 {
        font-family: var(--font-family-medium);
        font-size: 18px;
        font-weight: 400;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

    .text-content.regular-st2 {
        font-family: var(--font-family-medium);
        font-size: 16px;
        font-weight: 400;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

    .text-content.regular-st3 {
        font-family: var(--font-family-medium);
        font-size: 14px;
        font-weight: 400;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

    .text-content.regular-p1 {
        font-family: var(--font-family-medium);
        font-size: 15px;
        font-weight: 400;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

    .text-content.regular-p2 {
        font-family: var(--font-family-medium);
        font-size: 14px;
        font-weight: 400;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

    .text-content.regular-p3 {
        font-family: var(--font-family-medium);
        font-size: 13px;
        font-weight: 400;
        color: var(--color-near-black);
        margin-bottom: 5px;
        text-align: left;
    }

.flex-col {
    flex-direction: column !important;
}

.gh-form fieldset,
.hs-layout fieldset {
    border: none !important;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

section.text-content.regular-p1 li {
    padding-bottom: 17px;
    padding-left: 4px;
    position: relative;
}

section.text-content.regular-p1 ul {
    list-style-position: outside;
    padding-left: 14px;
    margin: 0;
}

/* ==========================================================================
      Title with Border-Bottom Utility
--------------------------------------------------------------------------
      Common pattern for list/item titles with blue underline:
      - Used in: assistance-list, info-list, news-list, dashboard
      - Provides consistent styling for section titles
========================================================================== */
.title-with-border {
    font-family: var(--font-family-medium);
    color: var(--color-near-black);
    border-bottom: 2px solid var(--color-dark-blue);
    padding-bottom: 8px;
}

.title-with-border--small {
    padding-bottom: 6px;
}

.title-with-border--large {
    padding-bottom: 10px;
}

/* ==========================================================================
      Button System
--------------------------------------------------------------------------
      Comprehensive button system with Primary, Secondary, Transparent variants,
      each available in Default and Small sizes, with optional icon support.

      Design specifications:
      - Default buttons: 52px height, 16px 20px padding, 15px font, 6px radius
      - Small buttons: 32px height, 7px 20px padding, 13px font, 6px radius
      - Font: SharpSans-Bold, 700 weight, uppercase, 0.56px letter-spacing
      - Primary: Dark blue background, sky blue hover, gray disabled
      - Secondary: Sky blue background, dark blue hover, gray disabled
      - Transparent: White border, colored hover backgrounds, gray disabled
      - Icons: Material icons with 8px gap, 15px font size (default) / 13px (small)
========================================================================== */
/* ==========================================================================
      Base Button Styles - Shared Properties
========================================================================== */
/* [data-sf-role="form-container"] button is included throughout this section:
   the Sitefinity form widget emits a bare <button> with no class to hook, so it
   opts in by selector instead. It previously restated all of these declarations
   in a separate block - keep it in these lists rather than copying them again. */
[class*="btn-"],
[data-sf-role="form-container"] button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    border: 0;
    border-radius: 6px;
    font-family: var(--font-family-bold);
    font-weight: 700;
    font-style: normal;
    /* text-transform: uppercase; */
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: var(--transition-base);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    outline: none;
}

    [class*="btn-"]:focus-visible,
    [data-sf-role="form-container"] button:focus-visible {
        outline: 2px solid var(--color-black);
        outline-offset: 2px;
    }

    [class*="btn-"]:disabled,
    [class*="btn-"][disabled],
    [data-sf-role="form-container"] button:disabled,
    [data-sf-role="form-container"] button[disabled] {
        cursor: not-allowed;
        opacity: 1;
    }
    .form-control:hover:not(:disabled):not([readonly])::file-selector-button{
        background-color: var(--color-dark-blue);
        color: var(--color-white);
    }
    .form-control::file-selector-button {
        padding: inherit;
        margin: inherit;
        margin-inline-end: inherit;
        color: inherit;
        background-color: inherit;
        pointer-events: inherit;
        border-color: inherit;
        border-style: inherit;
        border-width: inherit;
        border-inline-end-width: inherit;
        border-radius: inherit;
        transition: inherit;
    }
/* ==========================================================================
      Default Size Buttons (52px height)
========================================================================== */
/* Primary Button - Default */
/* When .btn-primary is on a wrapper (e.g. .sf-fieldWrp), styles apply to the inner button only */
.btn-primary,
[data-sf-role="form-container"] button {
    height: auto;
    padding: 14px 30px;
    background-color: var(--color-dark-blue);
    color: var(--color-white);
    font-size: 15px;
    letter-spacing: 0.56px;
}

    .btn-primary:hover:not(:disabled):not([disabled]),
    [data-sf-role="form-container"] button:hover:not(:disabled):not([disabled]) {
        background-color: var(--color-secondary-blue);
        color: var(--color-white);
    }

    .btn-primary:active:not(:disabled):not([disabled]) {
        background-color: var(--color-dark-blue);
        color: var(--color-white);
        transform: translateY(1px);
    }

    .btn-primary:focus:not(:disabled):not([disabled]) {
        outline: 2px solid var(--color-black);
        outline-offset: 2px;
        color: var(--color-white);
    }

    .btn-primary:focus-visible:not(:disabled):not([disabled]) {
        outline: 2px solid var(--color-black);
        outline-offset: 2px;
        color: var(--color-white);
    }

    .btn-primary:focus-within:not(:disabled):not([disabled]) {
        outline: 2px solid var(--color-black);
        outline-offset: 2px;
        color: var(--color-white);
    }

    .btn-primary:target:not(:disabled):not([disabled]) {
        outline: 2px solid var(--color-dark-blue);
        outline-offset: 2px;
        color: var(--color-white);
    }

    .btn-primary:disabled,
    .btn-primary[disabled],
    [data-sf-role="form-container"] button:disabled,
    [data-sf-role="form-container"] button[disabled] {
        background-color: var(--color-tag-gray);
        color: var(--color-white);
    }

/* Secondary Button - Default */
/* When .btn-secondary is on a wrapper (e.g. .sf-fieldWrp), styles apply to the inner button only */
.btn-secondary {
    height: auto;
    padding: 14px 30px;
    background-color: var(--color-secondary-blue);
    color: var(--color-white);
    font-size: 15px;
    letter-spacing: 0.56px;
}

    .btn-secondary:hover:not(:disabled):not([disabled]) {
        background-color: var(--color-dark-blue);
        color: var(--color-white);
    }

    .btn-secondary:active:not(:disabled):not([disabled]) {
        background-color: var(--color-secondary-blue);
        color: var(--color-white);
        transform: translateY(1px);
    }

    .btn-secondary:focus:not(:disabled):not([disabled]) {
        outline: 2px solid var(--color-black);
        outline-offset: 2px;
        color: var(--color-white);
    }

    .btn-secondary:focus-visible:not(:disabled):not([disabled]) {
        outline: 2px solid var(--color-black);
        outline-offset: 2px;
    }

    .btn-secondary:focus-within:not(:disabled):not([disabled]) {
        outline: 2px solid var(--color-black);
        outline-offset: 2px;
    }

    .btn-secondary:target:not(:disabled):not([disabled]) {
        outline: 2px solid var(--color-secondary-blue);
        outline-offset: 2px;
    }

    .btn-secondary:disabled,
    .btn-secondary[disabled] {
        background-color: var(--color-tag-gray);
        color: var(--color-white);
    }

/* Primary Transparent Button - Default */
/* When .btn-primary-transparent is on a wrapper (e.g. .sf-fieldWrp), styles apply to the inner button only */
.btn-primary-transparent {
    height: auto;
    padding: 14px 30px;
    background-color: transparent;
    border: 1px solid var(--color-white);
    color: var(--color-white);
    font-size: 15px;
    letter-spacing: 0.56px;
}

    .btn-primary-transparent:hover:not(:disabled):not([disabled]) {
        background-color: var(--color-dark-blue);
        border: 1px solid var(--color-dark-blue);
        color: var(--color-white);
    }

    .btn-primary-transparent:disabled,
    .btn-primary-transparent[disabled] {
        background-color: transparent;
        border: 1px solid var(--color-tag-gray);
        color: var(--color-tag-gray);
    }

/* Primary Transparent Button - Default - Blue Border */
/* When .btn-primary-transparent-blue-border is on a wrapper (e.g. .sf-fieldWrp), styles apply to the inner button only */
.btn-primary-transparent-blue-border {
    height: auto;
    padding: 14px 30px;
    background-color: transparent;
    border: 1px solid var(--color-dark-blue);
    color: var(--color-dark-blue);
    font-size: 15px;
    letter-spacing: 0.56px;
}

    .btn-primary-transparent-blue-border:hover:not(:disabled):not([disabled]) {
        background-color: var(--color-secondary-blue);
        border: 1px solid var(--color-secondary-blue);
        color: var(--color-white);
    }

    .btn-primary-transparent-blue-border:disabled,
    .btn-primary-transparent-blue-border[disabled] {
        background-color: transparent;
        border: 1px solid var(--color-tag-gray);
        color: var(--color-tag-gray);
    }

/* Secondary Transparent Button - Default */
/* When .btn-secondary-transparent is on a wrapper (e.g. .sf-fieldWrp), styles apply to the inner button only */
.btn-secondary-transparent {
    height: auto;
    padding: 14px 30px;
    background-color: transparent;
    border: 1px solid var(--color-white);
    color: var(--color-white);
    font-size: 15px;
    letter-spacing: 0.56px;
}

    .btn-secondary-transparent:hover:not(:disabled):not([disabled]) {
        background-color: var(--color-secondary-blue);
        border: 1px solid var(--color-secondary-blue);
        color: var(--color-white);
    }

    .btn-secondary-transparent:disabled,
    .btn-secondary-transparent[disabled] {
        background-color: transparent;
        border: 1px solid var(--color-tag-gray);
        color: var(--color-tag-gray);
    }

/* ==========================================================================
      Small Size Buttons (32px height)
========================================================================== */
/* Primary Button - Small */
/* When .btn-primary-small is on a wrapper (e.g. .sf-fieldWrp), styles apply to the inner button only */
.btn-primary-small,
.applyBtn.btn.btn-sm.btn-primary {
    min-height: 32px;
    padding: 7px 20px;
    background-color: var(--color-dark-blue);
    color: var(--color-white);
    font-size: 13px;
    letter-spacing: 0.56px;
}

    .btn-primary-small:hover:not(:disabled):not([disabled]),
    .applyBtn.btn.btn-sm.btn-primary:hover:not(:disabled):not([disabled]) {
        background-color: var(--color-secondary-blue);
        color: var(--color-white);
    }

    .btn-primary-small:active:not(:disabled):not([disabled]),
    .applyBtn.btn.btn-sm.btn-primary:active:not(:disabled):not([disabled]) {
        background-color: var(--color-dark-blue);
        color: var(--color-white);
        transform: translateY(1px);
    }

    .btn-primary-small:focus:not(:disabled):not([disabled]),
    .applyBtn.btn.btn-sm.btn-primary:focus:not(:disabled):not([disabled]) {
        outline: 2px solid var(--color-black);
        outline-offset: 2px;
        color: var(--color-white);
    }

    .btn-primary-small:focus-visible:not(:disabled):not([disabled]),
    .applyBtn.btn.btn-sm.btn-primary:focus-visible:not(:disabled):not([disabled]) {
        outline: 2px solid var(--color-black);
        outline-offset: 2px;
    }

    .btn-primary-small:focus-within:not(:disabled):not([disabled]),
    .applyBtn.btn.btn-sm.btn-primary:focus-within:not(:disabled):not([disabled]) {
        outline: 2px solid var(--color-black);
        outline-offset: 2px;
    }

    .btn-primary-small:target:not(:disabled):not([disabled]),
    .applyBtn.btn.btn-sm.btn-primary:target:not(:disabled):not([disabled]) {
        outline: 2px solid var(--color-dark-blue);
        outline-offset: 2px;
    }

    .btn-primary-small:disabled,
    .btn-primary-small[disabled],
    .applyBtn.btn.btn-sm.btn-primary:disabled,
    .applyBtn.btn.btn-sm.btn-primary[disabled] {
        background-color: var(--color-tag-gray);
        color: var(--color-white);
    }

/* Tertiary Button - Small */
.btn-tertiary-small {
    min-height: 32px;
    padding: 7px 20px;
    width: fit-content;
    border-radius: 6px;
    border: 1px solid transparent;
    background-color: var(--color-white);
    color: var(--color-dark-blue);
    font-family: var(--font-family-medium);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.56px;
    text-transform: capitalize;
    cursor: pointer;
    transition: var(--transition-base);
}

    .btn-tertiary-small:focus-visible:not(:disabled):not([disabled]),
    .btn-tertiary-small:focus-within:not(:disabled):not([disabled]),
    .btn-tertiary-small:target:not(:disabled):not([disabled]),
    .btn-tertiary-small:disabled,
    .btn-tertiary-small[disabled],
    .btn-tertiary-small:disabled:not(:disabled):not([disabled]),
    .btn-tertiary-small[disabled]:not(:disabled):not([disabled]),
    .btn-tertiary-small:disabled:not(:disabled):not([disabled]):hover,
    .btn-tertiary-small[disabled]:not(:disabled):not([disabled]):hover,
    .btn-tertiary-small:disabled:not(:disabled):not([disabled]):focus,
    .btn-tertiary-small[disabled]:not(:disabled):not([disabled]):focus,
    .btn-tertiary-small:disabled:not(:disabled):not([disabled]):focus-visible,
    .btn-tertiary-small[disabled]:not(:disabled):not([disabled]):focus-visible,
    .btn-tertiary-small:hover:not(:disabled):not([disabled]) {
        background-color: var(--color-dark-blue);
        border: 1px solid var(--color-white);
        color: var(--color-white);
    }

/* Secondary Button - Small */
/* When .btn-secondary-small is on a wrapper (e.g. .sf-fieldWrp), styles apply to the inner button only */
.btn-secondary-small,
.cancelBtn.btn.btn-sm.btn-default {
    min-height: 32px;
    padding: 7px 20px;
    background-color: var(--color-secondary-blue);
    color: var(--color-white);
    font-size: 13px;
    letter-spacing: 0.56px;
    width: fit-content;
}

    .btn-secondary-small:hover:not(:disabled):not([disabled]),
    .cancelBtn.btn.btn-sm.btn-default:hover:not(:disabled):not([disabled]) {
        background-color: var(--color-dark-blue);
        color: var(--color-white);
    }

    .btn-secondary-small:active:not(:disabled):not([disabled]),
    .cancelBtn.btn.btn-sm.btn-default:active:not(:disabled):not([disabled]) {
        background-color: var(--color-secondary-blue);
        color: var(--color-white);
        transform: translateY(1px);
    }

    .btn-secondary-small:focus:not(:disabled):not([disabled]),
    .cancelBtn.btn.btn-sm.btn-default:focus:not(:disabled):not([disabled]) {
        outline: 2px solid var(--color-black);
        outline-offset: 2px;
        color: var(--color-white);
    }

    .btn-secondary-small:focus-visible:not(:disabled):not([disabled]),
    .cancelBtn.btn.btn-sm.btn-default:focus-visible:not(:disabled):not([disabled]) {
        outline: 2px solid var(--color-black);
        outline-offset: 2px;
    }

    .btn-secondary-small:focus-within:not(:disabled):not([disabled]),
    .cancelBtn.btn.btn-sm.btn-default:focus-within:not(:disabled):not([disabled]) {
        outline: 2px solid var(--color-black);
        outline-offset: 2px;
    }

    .btn-secondary-small:target:not(:disabled):not([disabled]),
    .cancelBtn.btn.btn-sm.btn-default:target:not(:disabled):not([disabled]) {
        outline: 2px solid var(--color-secondary-blue);
        outline-offset: 2px;
    }

    .btn-secondary-small:disabled,
    .btn-secondary-small[disabled],
    .cancelBtn.btn.btn-sm.btn-default:disabled,
    .cancelBtn.btn.btn-sm.btn-default[disabled] {
        background-color: var(--color-tag-gray);
        color: var(--color-white);
    }

/* Primary Transparent Button - Small */
/* When .btn-primary-transparent-small is on a wrapper (e.g. .sf-fieldWrp), styles apply to the inner button only */
.btn-primary-transparent-small {
    min-height: 32px;
    padding: 7px 20px;
    background-color: transparent;
    border: 1px solid var(--color-white);
    color: var(--color-white);
    font-size: 13px;
    letter-spacing: 0.56px;
}

    .btn-primary-transparent-small:hover:not(:disabled):not([disabled]) {
        background-color: var(--color-dark-blue);
        border: 1px solid var(--color-dark-blue);
        color: var(--color-white);
    }

    .btn-primary-transparent-small:disabled,
    .btn-primary-transparent-small[disabled] {
        background-color: transparent;
        border: 1px solid var(--color-tag-gray);
        color: var(--color-tag-gray);
    }

/* Primary Transparent Button - Small - Black Border */
/* When .btn-primary-transparent-small-black-border is on a wrapper (e.g. .sf-fieldWrp), styles apply to the inner button only */
.btn-primary-transparent-small-black-border {
    min-height: 32px;
    padding: 7px 20px;
    background-color: transparent;
    border: 1px solid var(--color-black);
    color: var(--color-black);
    font-size: 13px;
    letter-spacing: 0.56px;
}

    .btn-primary-transparent-small-black-border:hover:not(:disabled):not([disabled]) {
        background-color: var(--color-dark-blue);
        border: 1px solid var(--color-dark-blue);
        color: var(--color-white);
    }

    .btn-primary-transparent-small-black-border:disabled,
    .btn-primary-transparent-small-black-border[disabled] {
        background-color: transparent;
        border: 1px solid var(--color-tag-gray);
        color: var(--color-tag-gray);
    }

/* Primary Transparent Button - Small - Blue Border */
/* When .btn-primary-transparent-small-blue-border is on a wrapper (e.g. .sf-fieldWrp), styles apply to the inner button only */
.btn-primary-transparent-small-blue-border {
    min-height: 32px;
    padding: 7px 20px;
    background-color: transparent;
    border: 1px solid var(--color-dark-blue);
    color: var(--color-dark-blue);
    font-size: 13px;
    letter-spacing: 0.56px;
}

    .btn-primary-transparent-small-blue-border:hover:not(:disabled):not([disabled]) {
        background-color: var(--color-secondary-blue);
        border: 1px solid var(--color-secondary-blue);
        color: var(--color-white);
    }

    .btn-primary-transparent-small-blue-border:disabled,
    .btn-primary-transparent-small-blue-border[disabled] {
        background-color: transparent;
        border: 1px solid var(--color-tag-gray);
        color: var(--color-tag-gray);
    }

/* Secondary Transparent Button - Small */
/* When .btn-secondary-transparent-small is on a wrapper (e.g. .sf-fieldWrp), styles apply to the inner button only */
.btn-secondary-transparent-small {
    min-height: 32px;
    padding: 7px 20px;
    background-color: transparent;
    border: 1px solid var(--color-white);
    color: var(--color-white);
    font-size: 13px;
    letter-spacing: 0.56px;
}

    .btn-secondary-transparent-small:hover:not(:disabled):not([disabled]) {
        background-color: var(--color-secondary-blue);
        border: 1px solid var(--color-secondary-blue);
        color: var(--color-white);
    }

    .btn-secondary-transparent-small:disabled,
    .btn-secondary-transparent-small[disabled] {
        background-color: transparent;
        border: 1px solid var(--color-tag-gray);
        color: var(--color-tag-gray);
    }

/* Secondary Transparent Button - Small - Black Border */
/* When .btn-secondary-transparent-small-black-border is on a wrapper (e.g. .sf-fieldWrp), styles apply to the inner button only */
.btn-secondary-transparent-small-black-border {
    min-height: 32px;
    padding: 7px 20px;
    background-color: transparent;
    border: 1px solid var(--color-black);
    color: var(--color-black);
    font-size: 13px;
    letter-spacing: 0.56px;
}

    .btn-secondary-transparent-small-black-border:hover:not(:disabled):not([disabled]) {
        background-color: var(--color-secondary-blue);
        border: 1px solid var(--color-secondary-blue);
        color: var(--color-white);
    }

    .btn-secondary-transparent-small-black-border:disabled,
    .btn-secondary-transparent-small-black-border[disabled] {
        background-color: transparent;
        border: 1px solid var(--color-tag-gray);
        color: var(--color-tag-gray);
    }

/* ==========================================================================
      Button Icons - Material Icons Support
========================================================================== */
/* Default size buttons with icons */
.btn-primary .material-symbols-outlined,
.btn-secondary .material-symbols-outlined,
.btn-primary-transparent .material-symbols-outlined,
.btn-primary-transparent-blue-border .material-symbols-outlined,
.btn-secondary-transparent .material-symbols-outlined {
    font-size: 15px;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
}

/* Small size buttons with icons */
.btn-primary-small .material-symbols-outlined,
.btn-secondary-small .material-symbols-outlined,
.applyBtn.btn.btn-sm.btn-primary .material-symbols-outlined,
.cancelBtn.btn.btn-sm.btn-default .material-symbols-outlined,
.btn-primary-transparent-small .material-symbols-outlined,
.btn-primary-transparent-small-black-border .material-symbols-outlined,
.btn-primary-transparent-small-blue-border .material-symbols-outlined,
.btn-secondary-transparent-small .material-symbols-outlined,
.btn-secondary-transparent-small-black-border .material-symbols-outlined {
    font-size: 13px;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
}

/* Icon color inheritance - icons inherit button text color */
[class*="btn-"] .material-symbols-outlined {
    color: inherit;
}

/* Disabled state icon color */
[class*="btn-"]:disabled .material-symbols-outlined,
[class*="btn-"][disabled] .material-symbols-outlined {
    color: inherit;
}

.gh-icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.gh-icon-add-circle {
    background-image: url("/Content/img/icons/iconography/icon-add-circle.svg");
}

.gh-icon-add-square {
    background-image: url("/Content/img/icons/iconography/icon-add-square.svg");
}

.gh-icon-align-left {
    background-image: url("/Content/img/icons/iconography/icon-align-left.svg");
}

.gh-icon-arrow-down {
    background-image: url("/Content/img/icons/iconography/icon-arrow-down.svg");
}

.gh-icon-arrow-left {
    background-image: url("/Content/img/icons/iconography/icon-arrow-left.svg");
}

.gh-icon-arrow-right {
    background-image: url("/Content/img/icons/iconography/icon-arrow-right.svg");
}

.gh-icon-arrow-right-small {
    background-image: url("/Content/img/icons/iconography/icon-arrow-right-small.svg");
}

.gh-icon-arrow-up {
    background-image: url("/Content/img/icons/iconography/icon-arrow-up.svg");
}

.gh-icon-bookmark {
    background-image: url("/Content/img/icons/iconography/icon-bookmark.svg");
}

.gh-icon-check {
    background-image: url("/Content/img/icons/iconography/icon-check.svg");
}

.gh-icon-check-circle {
    background-image: url("/Content/img/icons/iconography/icon-check-circle.svg");
}

.gh-icon-chevron-down {
    background-image: url("/Content/img/icons/iconography/icon-chevron-down.svg");
}

.gh-icon-chevron-left {
    background-image: url("/Content/img/icons/iconography/icon-chevron-left.svg");
}

.gh-icon-chevron-right {
    background-image: url("/Content/img/icons/iconography/icon-chevron-right.svg");
}

.gh-icon-chevron-right-small {
    background-image: url("/Content/img/icons/iconography/icon-chevron-right-small.svg");
}

.gh-icon-chevrons-left {
    background-image: url("/Content/img/icons/iconography/icon-chevrons-left.svg");
}

.gh-icon-chevrons-right {
    background-image: url("/Content/img/icons/iconography/icon-chevron-double-right-small.svg");
}

.gh-icon-close {
    background-image: url("/Content/img/icons/iconography/icon-close.svg");
}

.gh-icon-close-circle {
    background-image: url("/Content/img/icons/iconography/icon-close-circle.svg");
}

.gh-icon-delete {
    background-image: url("/Content/img/icons/iconography/icon-delete.svg");
}

.gh-icon-download {
    background-image: url("/Content/img/icons/iconography/icon-download.svg");
}

.gh-icon-filter {
    background-image: url("/Content/img/icons/iconography/icon-filter.svg");
}

.gh-icon-heart {
    background-image: url("/Content/img/icons/iconography/icon-heart.svg");
}

.gh-icon-menu {
    background-image: url("/Content/img/icons/iconography/icon-menu.svg");
}

.gh-icon-minus {
    background-image: url("/Content/img/icons/iconography/icon-minus.svg");
}

.gh-icon-more-horizontal {
    background-image: url("/Content/img/icons/iconography/icon-more-horizontal.svg");
}

.gh-icon-more-vertical {
    background-image: url("/Content/img/icons/iconography/icon-more-vertical.svg");
}

.gh-icon-plus {
    background-image: url("/Content/img/icons/iconography/icon-plus.svg");
}

.gh-icon-refresh {
    background-image: url("/Content/img/icons/iconography/icon-refresh.svg");
}

.gh-icon-search {
    background-image: url("/Content/img/icons/iconography/icon-search.svg");
}

.gh-icon-settings {
    background-image: url("/Content/img/icons/iconography/icon-settings.svg");
}

.gh-icon-sort {
    background-image: url("/Content/img/icons/iconography/icon-sort.svg");
}

.gh-icon-star {
    background-image: url("/Content/img/icons/iconography/icon-star.svg");
}

.gh-icon-toggle-off {
    background-image: url("/Content/img/icons/iconography/icon-toggle-off.svg");
}

.gh-icon-toggle-on {
    background-image: url("/Content/img/icons/iconography/icon-toggle-on.svg");
}

.gh-icon-user-circle {
    background-image: url("/Content/img/icons/iconography/icon-user-circle.svg");
}

.gh-icon-user-settings {
    background-image: url("/Content/img/icons/iconography/icon-user-settings.svg");
}

/* ==========================================================================
     HawkSearch — controls inside `.hs-layout`
--------------------------------------------------------------------------
     Toolbar selects, facet “search within” field, submit control, and date
     facets. Hawk view CSS keeps layout and non-form components only.
========================================================================== */

.hs-layout .hawk-sortWrapper .sortList label {
    display: inline;
    margin: 0 5px 0 0;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-family-semi-bold);
    color: var(--color-dark-gray);
}

.hawk-sortWrapper .sortList select,
.hawk-pagination select {
    margin-right: 0 !important;
}

.hs-layout .hawk-guidedNavWrapper .hawk-navGroup .hawk-resultsSearch label {
    font-size: 16px;
    text-align: left;
    font-weight: 400;
    font-family: var(--font-family-medium);
    color: var(--color-dark-gray);
}

.hs-layout .hawk-guidedNavWrapper .hawk-navGroup .hawk-resultsSearch .hawk-searchWithinButton {
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 9px;
    background-color: var(--color-dark-blue);
    color: var(--color-white);
    border: none;
    font-family: var(--font-family-medium);
    font-size: 14px;
    transition: var(--transition-base);
}

    .hs-layout .hawk-guidedNavWrapper .hawk-navGroup .hawk-resultsSearch .hawk-searchWithinButton:hover,
    .hs-layout .hawk-guidedNavWrapper .hawk-navGroup .hawk-resultsSearch .hawk-searchWithinButton:focus {
        background-color: var(--color-sky-blue);
        outline: 2px solid var(--color-black);
        outline-offset: 2px;
    }

.hawk-navGroupContent li {
    padding-left: 10px !important;
}

.hs-layout .smartbug-datepicker-wrapper input {
    border-radius: 4px 0 0 4px;
    display: table-cell;
    position: relative;
    z-index: 2;
    float: left;
    margin-bottom: 0;
    height: 24px;
    font-size: 14px;
    line-height: 1.42857143;
    color: var(--color-near-black);
    background-color: var(--color-white);
    background-image: none;
    border: 1px solid var(--color-border-gray);
    box-shadow: inset 0 1px 1px color-mix(in srgb, var(--color-black) 7.5%, transparent);
    padding: 1px 5px;
    font-family: var(--font-family-medium);
    transition: var(--transition-base);
}

    .hs-layout .smartbug-datepicker-wrapper input:focus {
        border-color: var(--color-dark-blue);
        outline: 2px solid var(--color-black);
        outline-offset: 2px;
    }

.hs-layout .smartbug-datepicker-wrapper .input-group-addon,
.hs-layout .smartbug-datepicker-wrapper .input-go {
    cursor: pointer;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: var(--color-near-black);
    text-align: center;
    background-color: var(--color-light-gray);
    border: 1px solid var(--color-border-gray);
    border-radius: 0 4px 4px 0;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
    display: table-cell;
    border-collapse: separate;
    border-left-width: 0;
    font-family: var(--font-family-medium);
    transition: var(--transition-base);
}

    .hs-layout .smartbug-datepicker-wrapper .input-group-addon:hover,
    .hs-layout .smartbug-datepicker-wrapper .input-go:hover {
        background-color: var(--color-border-gray);
    }

.hs-layout .smartbug-datepicker-wrapper .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: var(--color-white);
    background-clip: padding-box;
    border: 1px solid var(--color-border-gray);
    border-radius: 4px;
    box-shadow: 0 6px 12px color-mix(in srgb, var(--color-black) 17.5%, transparent);
    border-collapse: separate;
}

/* Popup is often portaled to body; class is HawkSearch-only in this project */
.bootstrap-datetimepicker-widget {
    background-color: var(--color-white);
    position: fixed;
    z-index: 99999;
    border: 1px solid var(--color-border-gray);
    border-radius: 4px;
    box-shadow: var(--box-shadow-dropdown);
    font-family: var(--font-family-medium);
}
.max-width-288{
    max-width: 288px !important;
    width: 100% !important;
}
.sfPageContainer header.site-header {
    position: relative;
}
.hawk-search-page__facet-sublist {
    margin: 8px 0 2px 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px !important;
}
.hawk-search-page__facet-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

.hawk-search-page__facet-item input[type="checkbox"] {
    flex: 0 0 20px !important;
    min-width: 20px !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
}

.hawk-search-page__facet-item span {
    flex: 1 1 auto !important;
    line-height: 20px !important;
}
.search-item-caption {
    word-break: break-word !important;
}
@media (max-width: 877px) {
    .hs-layout .hawk-mainControls .hawksortby,
    .hs-layout .hawk-mainControls .hawkmpp {
        font-size: 14px !important;
        padding: 6px 24px 6px 12px;
    }

    .hs-layout .hawk-sortWrapper .sortList label,
    .hs-layout .hawk-listingControls .hawk-pagination .hawk-viewNumber {
        font-size: 13px;
    }
    .max-width-288, .max-width-288 .card-with-icon{
        max-width: 332px !important;
        width: 100% !important;
    }
}
/* ==========================================================================
      Dropdown list field (select with toggle icon)
--------------------------------------------------------------------------
      Shared styles for select[data-sf-role="dropdown-list-field-select"].
      Wrap: .ghc-dropdown-wrap; icon: .ghc-dropdown-icon; select: .ghc-dropdown-select.
      When wrap uses flex-col (label above), use .ghc-dropdown-select-row around select + icon
      so the icon positions relative to the select row, not the whole column.
========================================================================== */
.ghc-dropdown-wrap {
    position: relative;
    display: inline-flex;
    max-width: none;
    width: 100%;
}

/* Inner row for select + icon; use inside .ghc-dropdown-wrap.flex-col so icon aligns to select */
.ghc-dropdown-select-row {
    position: relative;
    display: inline-flex;
    width: 100%;
}

    .ghc-dropdown-select-row .ghc-dropdown-select {
        flex: 1;
        min-width: 0;
    }

.ghc-dropdown-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Material Symbols Outlined", sans-serif;
    font-size: 24px;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    color: rgba(51, 51, 51, 1);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ghc-dropdown-select, .hawk-sortWrapper .sortList select {
    appearance: none;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(151, 151, 151, 1);
    box-sizing: border-box;
    color: rgba(51, 51, 51, 1);
    cursor: pointer;
    font-family: SharpSans-SemiBold, var(--font-family-semi-bold);
    font-size: 13px;
    font-weight: 600;
    height: 42px;
    min-width: 150px;
    padding-left: 18px;
    padding-right: 36px !important;
    transition: var(--transition-base);
    -webkit-appearance: none;
    -moz-appearance: none;
}

    .ghc-dropdown-select:hover {
        border-color: var(--color-sky-blue);
    }

    .ghc-dropdown-select:focus {
        border-color: var(--color-sky-blue);
        outline: 2px solid var(--color-black);
        outline-offset: 2px;
    }

/* ==========================================================================
      Checkbox Field Input
--------------------------------------------------------------------------
      Custom checkbox visuals scoped primarily to `.gh-form` / `.hs-layout` to avoid leaking
      into third-party components.
      - 20px square, 4px radius.
      - Uses pseudo-element `::before` to render the checked state.
      - Disabled variants reuse the same structure with muted colors.
========================================================================== */
/* Scope styles to gh-form class only */
/* Enabled (default state) */
.checkbox-field-input,
.gh-form input[type="checkbox"], .hs-layout input[type="checkbox"],
[data-sf-role="form-container"] input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-medium-gray);
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Selected state */
    .checkbox-field-input:checked::before,
    .gh-form input[type="checkbox"]:checked::before, .hs-layout input[type="checkbox"]:checked::before,
    [data-sf-role="form-container"] input[type="checkbox"]:checked::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--color-medium-gray);
        border-radius: 3px;
    }

    /* Disabled state */
    .checkbox-field-input:disabled,
    .gh-form input[type="checkbox"]:disabled, .hs-layout input[type="checkbox"]:disabled,
    [data-sf-role="form-container"] input[type="checkbox"]:disabled {
        border: 1px solid var(--color-medium-gray);
        background-color: var(--color-light-gray);
    }

        /* Disabled Selected state */
        .checkbox-field-input:disabled:checked,
        .gh-form input[type="checkbox"]:disabled:checked, .hs-layout input[type="checkbox"]:disabled:checked,
        [data-sf-role="form-container"] input[type="checkbox"]:disabled:checked {
            border: 1px solid var(--color-medium-gray);
        }

            .checkbox-field-input:disabled:checked::before,
            .gh-form input[type="checkbox"]:disabled:checked::before, .hs-layout input[type="checkbox"]:disabled:checked::before,
            [data-sf-role="form-container"] input[type="checkbox"]:disabled:checked::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: var(--color-medium-gray);
                border-radius: 3px;
            }

/* ==========================================================================
      Radio Field Input
--------------------------------------------------------------------------
      Custom radio visuals, mirroring the checkbox API but with circular shape.
      - 20px outer circle, 10px inner dot for checked state.
      - Disabled variants maintain structure with softer colors.
========================================================================== */
/* Scope styles to gh-form class only */
/* Enabled (default state) */
.radio-field-input,
.gh-form input[type="radio"], .hs-layout input[type="radio"],
[data-sf-role="form-container"] input[type="radio"] {
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-medium-gray);
    border-radius: 50%;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Selected state - Inner circle */
    .radio-field-input:checked::before,
    .gh-form input[type="radio"]:checked::before, .hs-layout input[type="radio"]:checked::before,
    [data-sf-role="form-container"] input[type="radio"]:checked::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10px;
        height: 10px;
        background-color: var(--color-medium-gray);
        border-radius: 50%;
    }

    /* Disabled state */
    .radio-field-input:disabled,
    .gh-form input[type="radio"]:disabled, .hs-layout input[type="radio"]:disabled,
    [data-sf-role="form-container"] input[type="radio"]:disabled {
        border: 1px solid var(--color-medium-gray);
        background-color: var(--color-light-gray);
    }

        /* Disabled Selected state - Inner circle */
        .radio-field-input:disabled:checked,
        .gh-form input[type="radio"]:disabled:checked, .hs-layout input[type="radio"]:disabled:checked,
        [data-sf-role="form-container"] input[type="radio"]:disabled:checked {
            border: 1px solid var(--color-medium-gray);
            background-color: var(--color-light-gray);
        }

            .radio-field-input:disabled:checked::before,
            .gh-form input[type="radio"]:disabled:checked::before, .hs-layout input[type="radio"]:disabled:checked::before,
            [data-sf-role="form-container"] input[type="radio"]:disabled:checked::before {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 10px;
                height: 10px;
                background-color: var(--color-medium-gray);
                border-radius: 50%;
            }

.sf-Checkboxes label,
.sf-RadioButtons label {
    display: flex;
    align-items: center;
    gap: 7px;
}

.gh-form-radio-option {
    margin-bottom: var(--spacing-md);
}

    .gh-form-radio-option:last-child {
        margin-bottom: 0;
    }

/* ==========================================================================
      Text Field Input
--------------------------------------------------------------------------
      Base text inputs, selects, and textareas scoped to `.gh-form` / `.hs-layout`.
      - 42px height for single-line fields.
      - 16px font-size with slight letter-spacing for readability.
      - Focus state darkens border while preserving background.
      Readonly/disabled states use neutral backgrounds to signal non-editable
      fields without sacrificing legibility.
========================================================================== */
/* Scope styles to gh-form class only */
/* Default state */
.text-field-input,
.gh-form input[type="text"], .hs-layout input[type="text"],
.gh-form input[type="email"], .hs-layout input[type="email"],
.gh-form input[type="password"], .hs-layout input[type="password"],
.gh-form input[type="number"], .hs-layout input[type="number"],
.gh-form input[type="tel"], .hs-layout input[type="tel"],
.gh-form input[type="url"], .hs-layout input[type="url"],
.gh-form input[type="date"], .hs-layout input[type="date"],
.gh-form input[type="datetime-local"], .hs-layout input[type="datetime-local"],
.gh-form input[type="month"], .hs-layout input[type="month"],
.gh-form input[type="time"], .hs-layout input[type="time"],
.gh-form input[type="week"], .hs-layout input[type="week"],
.gh-form input[type="search"], .hs-layout input[type="search"],
.gh-form select, .hs-layout select,
.gh-form textarea, .hs-layout textarea,
[data-sf-role="form-container"] input[type="text"],
[data-sf-role="form-container"] input[type="email"],
[data-sf-role="form-container"] input[type="password"],
[data-sf-role="form-container"] input[type="number"],
[data-sf-role="form-container"] input[type="tel"],
[data-sf-role="form-container"] input[type="url"],
[data-sf-role="form-container"] input[type="date"],
[data-sf-role="form-container"] input[type="datetime-local"],
[data-sf-role="form-container"] input[type="month"],
[data-sf-role="form-container"] input[type="time"],
[data-sf-role="form-container"] input[type="week"],
[data-sf-role="form-container"] input[type="search"],
[data-sf-role="form-container"] select,
[data-sf-role="form-container"] textarea {
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--color-medium-gray);
    border-radius: 4px;
    background-color: var(--color-white);
    color: var(--color-near-black);
    font-family: var(--font-family-medium);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 19px;
    box-sizing: border-box;
    width: 100%;
}

/* Textarea specific - allow height to be flexible */
.gh-form textarea, .hs-layout textarea,
[data-sf-role="form-container"] textarea {
    min-height: 126px;
    height: auto;
    resize: vertical;
    padding: 11px 15px;
}

    /* Focused state */
    .text-field-input:focus,
    .gh-form input[type="text"]:focus, .hs-layout input[type="text"]:focus,
    .gh-form input[type="email"]:focus, .hs-layout input[type="email"]:focus,
    .gh-form input[type="password"]:focus, .hs-layout input[type="password"]:focus,
    .gh-form input[type="number"]:focus, .hs-layout input[type="number"]:focus,
    .gh-form input[type="tel"]:focus, .hs-layout input[type="tel"]:focus,
    .gh-form input[type="url"]:focus, .hs-layout input[type="url"]:focus,
    .gh-form input[type="date"]:focus, .hs-layout input[type="date"]:focus,
    .gh-form input[type="datetime-local"]:focus, .hs-layout input[type="datetime-local"]:focus,
    .gh-form input[type="month"]:focus, .hs-layout input[type="month"]:focus,
    .gh-form input[type="time"]:focus, .hs-layout input[type="time"]:focus,
    .gh-form input[type="week"]:focus, .hs-layout input[type="week"]:focus,
    .gh-form input[type="search"]:focus, .hs-layout input[type="search"]:focus,
    .gh-form select:focus, .hs-layout select:focus,
    .gh-form textarea:focus, .hs-layout textarea:focus,
    [data-sf-role="form-container"] input[type="text"]:focus,
    [data-sf-role="form-container"] input[type="email"]:focus,
    [data-sf-role="form-container"] input[type="password"]:focus,
    [data-sf-role="form-container"] input[type="number"]:focus,
    [data-sf-role="form-container"] input[type="tel"]:focus,
    [data-sf-role="form-container"] input[type="url"]:focus,
    [data-sf-role="form-container"] input[type="date"]:focus,
    [data-sf-role="form-container"] input[type="datetime-local"]:focus,
    [data-sf-role="form-container"] input[type="month"]:focus,
    [data-sf-role="form-container"] input[type="time"]:focus,
    [data-sf-role="form-container"] input[type="week"]:focus,
    [data-sf-role="form-container"] input[type="search"]:focus,
    [data-sf-role="form-container"] select:focus,
    [data-sf-role="form-container"] textarea:focus {
        border: 1px solid var(--color-near-black);
        border-radius: 4px;
        background-color: var(--color-white);
    }

    /* Textarea focused - maintain auto height */
    .gh-form textarea:focus, .hs-layout textarea:focus,
    [data-sf-role="form-container"] textarea:focus {
        height: auto;
        min-height: 42px;
    }

    /* Disabled state */
    .text-field-input:disabled,
    .gh-form input[type="text"]:disabled, .hs-layout input[type="text"]:disabled,
    .gh-form input[type="email"]:disabled, .hs-layout input[type="email"]:disabled,
    .gh-form input[type="password"]:disabled, .hs-layout input[type="password"]:disabled,
    .gh-form input[type="number"]:disabled, .hs-layout input[type="number"]:disabled,
    .gh-form input[type="tel"]:disabled, .hs-layout input[type="tel"]:disabled,
    .gh-form input[type="url"]:disabled, .hs-layout input[type="url"]:disabled,
    .gh-form input[type="date"]:disabled, .hs-layout input[type="date"]:disabled,
    .gh-form input[type="datetime-local"]:disabled, .hs-layout input[type="datetime-local"]:disabled,
    .gh-form input[type="month"]:disabled, .hs-layout input[type="month"]:disabled,
    .gh-form input[type="time"]:disabled, .hs-layout input[type="time"]:disabled,
    .gh-form input[type="week"]:disabled, .hs-layout input[type="week"]:disabled,
    .gh-form input[type="search"]:disabled, .hs-layout input[type="search"]:disabled,
    .gh-form select:disabled, .hs-layout select:disabled,
    .gh-form textarea:disabled, .hs-layout textarea:disabled,
    [data-sf-role="form-container"] input[type="text"]:disabled,
    [data-sf-role="form-container"] input[type="email"]:disabled,
    [data-sf-role="form-container"] input[type="password"]:disabled,
    [data-sf-role="form-container"] input[type="number"]:disabled,
    [data-sf-role="form-container"] input[type="tel"]:disabled,
    [data-sf-role="form-container"] input[type="url"]:disabled,
    [data-sf-role="form-container"] input[type="date"]:disabled,
    [data-sf-role="form-container"] input[type="datetime-local"]:disabled,
    [data-sf-role="form-container"] input[type="month"]:disabled,
    [data-sf-role="form-container"] input[type="time"]:disabled,
    [data-sf-role="form-container"] input[type="week"]:disabled,
    [data-sf-role="form-container"] input[type="search"]:disabled,
    [data-sf-role="form-container"] select:disabled,
    [data-sf-role="form-container"] textarea:disabled {
        height: 42px;
        border: 1px solid var(--color-medium-gray);
        border-radius: 4px;
        background-color: var(--color-white);
        cursor: not-allowed;
    }

    /* Textarea disabled - maintain auto height */
    .gh-form textarea:disabled, .hs-layout textarea:disabled,
    [data-sf-role="form-container"] textarea:disabled {
        height: auto;
        min-height: 42px;
    }

    /* Readonly state */
    .text-field-input[readonly],
    .gh-form input[type="text"][readonly], .hs-layout input[type="text"][readonly],
    .gh-form input[type="email"][readonly], .hs-layout input[type="email"][readonly],
    .gh-form input[type="password"][readonly], .hs-layout input[type="password"][readonly],
    .gh-form input[type="number"][readonly], .hs-layout input[type="number"][readonly],
    .gh-form input[type="tel"][readonly], .hs-layout input[type="tel"][readonly],
    .gh-form input[type="url"][readonly], .hs-layout input[type="url"][readonly],
    .gh-form input[type="date"][readonly], .hs-layout input[type="date"][readonly],
    .gh-form input[type="datetime-local"][readonly], .hs-layout input[type="datetime-local"][readonly],
    .gh-form input[type="month"][readonly], .hs-layout input[type="month"][readonly],
    .gh-form input[type="time"][readonly], .hs-layout input[type="time"][readonly],
    .gh-form input[type="week"][readonly], .hs-layout input[type="week"][readonly],
    .gh-form input[type="search"][readonly], .hs-layout input[type="search"][readonly],
    .gh-form select[readonly], .hs-layout select[readonly],
    .gh-form textarea[readonly], .hs-layout textarea[readonly],
    [data-sf-role="form-container"] input[type="text"][readonly],
    [data-sf-role="form-container"] input[type="email"][readonly],
    [data-sf-role="form-container"] input[type="password"][readonly],
    [data-sf-role="form-container"] input[type="number"][readonly],
    [data-sf-role="form-container"] input[type="tel"][readonly],
    [data-sf-role="form-container"] input[type="url"][readonly],
    [data-sf-role="form-container"] input[type="date"][readonly],
    [data-sf-role="form-container"] input[type="datetime-local"][readonly],
    [data-sf-role="form-container"] input[type="month"][readonly],
    [data-sf-role="form-container"] input[type="time"][readonly],
    [data-sf-role="form-container"] input[type="week"][readonly],
    [data-sf-role="form-container"] input[type="search"][readonly],
    [data-sf-role="form-container"] select[readonly],
    [data-sf-role="form-container"] textarea[readonly] {
        height: 42px;
        border-radius: 4px;
        background-color: var(--color-light-gray);
        border: none;
        color: var(--color-near-black);
    }

    /* Textarea readonly - maintain auto height */
    .gh-form textarea[readonly], .hs-layout textarea[readonly],
    [data-sf-role="form-container"] textarea[readonly] {
        height: auto;
        min-height: 126px;
    }

sup {
    /*vertical-align: top !important;*/
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

/* Text input disabled or readonly - specific styling */
input[type="text"]:disabled,
input[type="text"][readonly],
.gh-form input[type="text"]:disabled, .hs-layout input[type="text"]:disabled,
.gh-form input[type="text"][readonly], .hs-layout input[type="text"][readonly],
[data-sf-role="form-container"] input[type="text"]:disabled,
[data-sf-role="form-container"] input[type="text"][readonly] {
    color: var(--color-near-black);
    font-family: var(--font-family-medium);
    font-size: 16px;
    font-weight: 500;
    height: 42px;
    border-radius: 4px;
    background-color: var(--color-light-gray);
}

/* ==========================================================================
      File Input Field
--------------------------------------------------------------------------
      File input styling with btn-secondary-small appearance for the upload button.
      - Applies btn-secondary-small styles to the webkit file upload button.
      - Maintains consistent form field appearance.
========================================================================== */
/* File input container */
.gh-form input[type="file"], .hs-layout input[type="file"],
[data-sf-role="form-container"] input[type="file"] {
    height: 34px;
    padding: 0;
    border: 1px solid var(--color-medium-gray);
    border-radius: 8px;
    background-color: var(--color-white);
    color: var(--color-near-black);
    font-family: var(--font-family-medium);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 19px;
    box-sizing: border-box;
    cursor: pointer;
}

    /* Webkit file upload button - styled as btn-secondary-small */
    .gh-form input[type="file"]::-webkit-file-upload-button, .hs-layout input[type="file"]::-webkit-file-upload-button,
    [data-sf-role="form-container"] input[type="file"]::-webkit-file-upload-button {
        min-height: 32px;
        padding: 7px 20px;
        margin-right: 12px;
        border: 0;
        border-radius: 6px;
        background-color: var(--color-secondary-blue);
        color: var(--color-white);
        font-family: var(--font-family-bold);
        font-size: 13px;
        font-weight: 700;
        font-style: normal;
        /* text-transform: uppercase; */
        text-align: center;
        letter-spacing: 0.56px;
        cursor: pointer;
        user-select: none;
        transition: var(--transition-base);
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        -webkit-tap-highlight-color: transparent;
    }

        .gh-form input[type="file"]::-webkit-file-upload-button:hover, .hs-layout input[type="file"]::-webkit-file-upload-button:hover,
        [data-sf-role="form-container"] input[type="file"]::-webkit-file-upload-button:hover {
            background-color: var(--color-dark-blue);
            color: var(--color-white);
        }

    .gh-form input[type="file"]:disabled::-webkit-file-upload-button, .hs-layout input[type="file"]:disabled::-webkit-file-upload-button,
    [data-sf-role="form-container"] input[type="file"]:disabled::-webkit-file-upload-button,
    .gh-form input[type="file"][disabled]::-webkit-file-upload-button, .hs-layout input[type="file"][disabled]::-webkit-file-upload-button,
    [data-sf-role="form-container"] input[type="file"][disabled]::-webkit-file-upload-button {
        background-color: var(--color-tag-gray);
        color: var(--color-white);
        cursor: not-allowed;
        opacity: 1;
    }

    /* File input focus state */
    .gh-form input[type="file"]:focus, .hs-layout input[type="file"]:focus,
    [data-sf-role="form-container"] input[type="file"]:focus {
        border: 1px solid var(--color-near-black);
        border-radius: 4px;
        background-color: var(--color-white);
    }

    /* File input disabled state */
    .gh-form input[type="file"]:disabled, .hs-layout input[type="file"]:disabled,
    [data-sf-role="form-container"] input[type="file"]:disabled,
    .gh-form input[type="file"][disabled], .hs-layout input[type="file"][disabled],
    [data-sf-role="form-container"] input[type="file"][disabled] {
        border: 1px solid var(--color-medium-gray);
        border-radius: 4px;
        background-color: var(--color-white);
        cursor: not-allowed;
    }

/* ==========================================================================
      Error Message
--------------------------------------------------------------------------
      Inline validation message styling, tuned for clarity and readability
      below form fields (`[data-sf-role="error-message"]`).
========================================================================== */
[data-sf-role="error-message"] {
    display: block !important;
    width: auto;
    min-height: 16px;
    color: rgb(235, 6, 0);
    font-family: var(--font-family-medium);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 16px;
    margin-top: 8px;
}

/* ==========================================================================
      Field Wrapper
--------------------------------------------------------------------------
      `.sf-fieldWrp` wraps individual fields + labels within `.gh-form` / `.hs-layout`.
      Provides consistent vertical rhythm and width handling for inputs.
========================================================================== */
/* Scope styles to gh-form class only */
.gh-form .sf-fieldWrp, .hs-layout .sf-fieldWrp,
[data-sf-role="form-container"] .sf-fieldWrp {
    margin-bottom: 20px;
    font-family: var(--font-family-medium);
    font-size: 14px;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

    /* ==========================================================================
      Field Label
--------------------------------------------------------------------------
      Label treatment for all `.gh-form` / `.hs-layout` fields:
      - Medium weight `HelveticaNeue` for emphasis.
      - Fixed minimum width to avoid jitter between labels.
========================================================================== */
    .gh-form .sf-fieldWrp label, .hs-layout .sf-fieldWrp label,
    [data-sf-role="form-container"] .sf-fieldWrp label {
        width: auto;
        min-width: 80px;
        height: 17px;
        color: var(--color-near-black);
        font-family: var(--font-family-medium);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.3px;
        line-height: 17px;
        margin-bottom: 8px;
    }

    .gh-form .sf-fieldWrp p, .hs-layout .sf-fieldWrp p,
    [data-sf-role="form-container"] .sf-fieldWrp p {
        font-size: 14px;
    }


/* ==========================================================================
      Text Field Label Right Layout
--------------------------------------------------------------------------
      Layout for text fields with labels positioned on the right side.
      Uses flexbox for proper alignment and spacing.
========================================================================== */
[data-sf-role="text-field-container"] .text-field-label-right-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

    [data-sf-role="text-field-container"] .text-field-label-right-wrapper .text-field-input-wrapper {
        flex: 1;
    }

/* ==========================================================================
      Field Div
--------------------------------------------------------------------------
      Specialized layout for captcha field container to keep audio + image
      controls grouped and aligned.
========================================================================== */
[data-sf-role="field-captcha-container"] div {
    display: flex;
    flex-direction: column;
    width: fit-content;
}

/* ==========================================================================
      File Field Container
--------------------------------------------------------------------------
      Spacing for file field container to provide consistent bottom padding.
========================================================================== */
[data-sf-role="file-field-container"] {
    padding-bottom: 24px;
}

/* ==========================================================================
      Grid System (Bootstrap-inspired)
--------------------------------------------------------------------------
      - `.row` / `.sf_cols.row` act as flex row containers with negative gutters.
      - `.col-{breakpoint}-{n}` provide 12-column responsive sizing.
      - Custom 2-column helpers (`.sf_2cols_*`) create fixed/relative width
        sidebar + content layouts (e.g., 288px sidebar with flexible content).
      This mirrors familiar grid systems while remaining compatible with the
      rest of the design tokens defined above.
========================================================================== */
/* Row Container */
.sf_cols.row,
.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

/* Column Base */
.sf_colsIn {
    position: relative;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

/* Custom 2-Column Grid Classes */
/* Based on 4-unit grid system */
.sf_2cols_1_25 {
    flex: 0 0 288px;
    max-width: 288px;
}

.sf_2cols_2_75 {
    flex: 0 0 calc(100% - 288px);
    max-width: calc(100% - 288px);
}

.sf_2cols_2in_75 {
    flex: 0 0 calc(100% - 288px);
    max-width: calc(100% - 288px);
}

/* Additional 2-column variations */
.sf_2cols_1 {
    flex: 0 0 288px;
    max-width: 288px;
}

.sf_2cols_3 {
    flex: 0 0 calc(100% - 288px);
    max-width: calc(100% - 288px);
}

.sf_2cols_1_5 {
    flex: 0 0 calc(50% - 144px);
    max-width: calc(50% - 144px);
}

.sf_2cols_2_5 {
    flex: 0 0 calc(50% - 144px);
    max-width: calc(50% - 144px);
}

/* Bootstrap-style Responsive Column Classes */
/* Extra Small (xs) - default mobile */
.col-xs-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}

.col-xs-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.col-xs-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

.col-xs-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.col-xs-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

.col-xs-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.col-xs-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

.col-xs-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.col-xs-9 {
    flex: 0 0 75%;
    max-width: 75%;
}

.col-xs-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}

.col-xs-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}

.col-xs-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

.two-col-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 32px;
}

.gh-3-column {
    width: 288px;
    flex-shrink: 0;
}

.gh-9-column {
    min-width: 0px;
    flex: 1 1 0%;
}

.grid-d3-t2-m1-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: flex-start;
    gap: 32px;
    justify-items: center;
}

    .grid-d3-t2-m1-cols > * {
        max-width: 394px;
        width: 100%;
        flex: 0 0 auto;
    }

.grid-d2-t1-m1-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

    .grid-d2-t1-m1-cols > * {
        max-width: 608px;
        width: 100%;
        flex: 0 0 auto;
    }

.grid-d4-t2-m1-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: flex-start;
    gap: 32px;
}

    .grid-d4-t2-m1-cols > * {
        max-width: 288px;
        width: 100%;
        flex: 0 0 auto;
    }

/* Fractional 12-unit grid layouts (design system) */
.grid-d-2-3-2-3-2,
.grid-d-3-6-3,
.grid-d-3-9,
.grid-d-4-8,
.grid-d-8-4,
.grid-d-9-3 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 32px;
}

    .grid-d-2-3-2-3-2 > *,
    .grid-d-3-6-3 > *,
    .grid-d-3-9 > *,
    .grid-d-4-8 > *,
    .grid-d-8-4 > *,
    .grid-d-9-3 > * {
        width: 100%;
        min-width: 0;
    }

    .grid-d-2-3-2-3-2 > :nth-child(1) {
        grid-column: span 2;
    }

    .grid-d-2-3-2-3-2 > :nth-child(2) {
        grid-column: span 3;
    }

    .grid-d-2-3-2-3-2 > :nth-child(3) {
        grid-column: span 2;
    }

    .grid-d-2-3-2-3-2 > :nth-child(4) {
        grid-column: span 3;
    }

    .grid-d-2-3-2-3-2 > :nth-child(5) {
        grid-column: span 2;
    }

    .grid-d-3-6-3 > :nth-child(1) {
        grid-column: span 3;
    }

    .grid-d-3-6-3 > :nth-child(2) {
        grid-column: span 6;
    }

    .grid-d-3-6-3 > :nth-child(3) {
        grid-column: span 3;
    }

    .grid-d-3-9 > :nth-child(1) {
        grid-column: span 3;
    }

    .grid-d-3-9 > :nth-child(2) {
        grid-column: span 9;
    }

    .grid-d-4-8 > :nth-child(1) {
        grid-column: span 4;
    }

    .grid-d-4-8 > :nth-child(2) {
        grid-column: span 8;
    }

    .grid-d-8-4 > :nth-child(1) {
        grid-column: span 8;
    }

    .grid-d-8-4 > :nth-child(2) {
        grid-column: span 4;
    }

    .grid-d-9-3 > :nth-child(1) {
        grid-column: span 9;
    }

    .grid-d-9-3 > :nth-child(2) {
        grid-column: span 3;
    }

.iframe-grid-d-8-4 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 30px;
}

    .iframe-grid-d-8-4 > * {
        width: 100%;
        min-width: 0;
    }

    .iframe-grid-d-8-4 > :nth-child(1) {
        grid-column: span 8;
    }

    .iframe-grid-d-8-4 > :nth-child(2) {
        grid-column: span 4;
    }

.grid-2-3-rows-container {
    width: 100%;
    background-color: #f8f8f8;
    padding-top: 96px;
    padding-bottom: 96px;
}

.feature-carousel-container {
    padding-top: 96px;
    padding-bottom: 96px;
}

.grid-row-2-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 1024px;
    margin: 0 auto;
}

.grid-row-3-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1024px;
    margin: 0 auto;
}

.grid-6-6_6-6-container {
    width: 100%;
    background-color: rgba(244, 244, 244, 1);
    padding-top: 64px;
    padding-bottom: 64px;
}

.grid-6-6_6-6-content {
    max-width: 1248px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.grid-12_12_12_6-6-container {
    padding: 64px 0;
}

.grid-12_12_12_6-6-content {
    max-width: 1248px;
    width: 100%;
    margin: 0 auto;
}

.description-column {
    padding-bottom: 40px;
}

.grid-background-color-grey {
    padding: 70px 0;
    background-color: rgba(244, 244, 244, 1);
}

.margin-top-70 {
    margin-top: 70px;
}

.margin-bottom-70 {
    margin-bottom: 70px;
}

.padding-top-70 {
    padding-top: 70px;
}

.padding-bottom-70 {
    padding-bottom: 70px;
}

.grid-12_12_4-4-4-container {
    width: 100%;
    background-color: rgba(244, 244, 244, 1);
    padding-top: 80px;
    padding-bottom: 80px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.grid-12_12_4-4-4-content {
    max-width: 1248px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Utility class for responsive flex layout with max-width 288px items and 24px gap */
.flex-wrap-mw288-g24-cols {
    display: flex !important;
    flex-wrap: wrap;
    column-gap: 32px;
}

    .flex-wrap-mw288-g24-cols > * {
        max-width: 288px;
        width: 100%;
    }

.contact {
    margin-bottom: 32px;
}

/* Grid system media queries moved to Media Queries section at end of file */
/* ==========================================================================
      3-9 Column Layout - Account Sidebar
--------------------------------------------------------------------------
      Layout pattern for account pages:
      - `.account-sidebar`  : fixed-width navigation column.
      - `.account-main-content`: flexible main content area.
      This composes with the grid system above to create a 3-9 style layout.
========================================================================== */
.m-0-i {
    margin: 0 !important;
}
.account-sidebar {
    margin-top: 7px;
}

    .account-sidebar h3 {
        color: var(--color-near-black);
        font-family: var(--font-family-semi-bold);
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 0;
    }

    .account-sidebar ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .account-sidebar li {
        border-bottom: 1px solid var(--color-light-gray);
    }

        .account-sidebar li:last-child {
            border-bottom: none;
        }

    .account-sidebar a {
        color: var(--color-near-black);
        font-family: var(--font-family-semi-bold);
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        padding: 12px 0;
        display: block;
        transition: var(--transition);
    }

        .account-sidebar a:hover,
        .account-sidebar a:focus,
        .account-sidebar a.active {
            color: var(--color-dark-blue);
        }

.account-main-content {
    flex: 1;
    min-width: 0;
}

/* Account sidebar: desktop = heading + list; mobile only = collapsible box with + icon */
.account-sidebar__heading {
    display: block;
}

.account-sidebar__toggle {
    display: none;
}

.account-sidebar__panel {
    display: block;
}

.modal.fade {
    display: none;
}

.modal.show {
    display: block;
}

.request-drawing-modal {
    width: 860px !important;
    max-width: 860px !important;
    height: 500px !important;
}

/*FEI*/
/* .cj-main-content,
.cj-main-content li {
  font-family: var(--font-family-medium);
  font-size: 15px;
  font-weight: 500;
  color: rgb(var(--color-near-black));
  margin-bottom: 5px;
  text-align: left;
}

.text-medium-round {
  font-family: var(--font-family-medium);
  font-size: 15px;
  font-weight: 500;
  color: rgb(var(--color-near-black));
  margin-bottom: 5px;
  text-align: left;
}

.fei-tabs-section-title {
  font-family: var(--font-family-bold);
  font-size: 22px;
  font-weight: 700;
  color: rgb(var(--color-near-black));
}

.fei-tabs-body-content,
.fei-tabs-body-content p,
.fei-tabs-body-content li {
  font-family: var(--font-family-medium);
  font-size: 15px;
  font-weight: 500;
  color: rgb(var(--color-near-black));
  margin-bottom: 5px;
  text-align: left;
} */
.text-content.medium-p1 + section.text-content.bold-st1,
.text-content.medium-p1 + article.card-right-img-para-v2 {
    margin-top: 30px;
}

/* ==========================================================================
    Breadcrumb Navigation (site-breadcrumb: avoids Bootstrap .breadcrumb conflict)
========================================================================== */
.site-breadcrumb {
    margin-bottom: 22px;
}

.site-breadcrumb__list {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-dark-gray);
}

.site-breadcrumb__item {
    display: flex;
    align-items: center;
    font-family: var(--font-family-semi-bold);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-near-black);
}

.site-breadcrumb__arrow {
    font-size: 14px !important;
    color: #999999 !important;
    margin: 0;
    vertical-align: middle;
    vertical-align: middle;
}

.site-breadcrumb__link {
    color: var(--color-near-black);
    text-decoration: none;
    transition: var(--transition);
}

    .site-breadcrumb__link:hover,
    .site-breadcrumb__link:focus {
        color: var(--color-dark-blue);
    }

.site-breadcrumb__current {
    color: var(--color-medium-gray);
    font-weight: 500;
}

.site-breadcrumb-overflow {
    position: relative;
}

.site-breadcrumb-overflow-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background-color: #fff;
    color: var(--color-near-black);
    font-family: var(--font-family-semi-bold);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

    .site-breadcrumb-overflow-trigger:hover .material-symbols-outlined {
        color: var(--color-dark-blue);
    }

    .site-breadcrumb-overflow-trigger:focus {
        outline: 2px solid var(--color-dark-blue);
        outline-offset: 1px;
    }

.site-breadcrumb-overflow-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 180px;
    padding: 8px 12px;
    border: 1px solid rgb(167 168 171);
    background-color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .site-breadcrumb-overflow-menu.hide {
        display: none;
    }

.site-breadcrumb-overflow-link {
    color: var(--color-near-black);
    font-family: var(--font-family-semi-bold);
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    padding: 2px 0;
}

    .site-breadcrumb-overflow-link:hover,
    .site-breadcrumb-overflow-link:focus {
        color: var(--color-dark-blue);
        outline: none;
    }

/* ==========================================================================
    Breadcrumb (product pages: .breadcrumb / .breadcrumb-*)
========================================================================== */
.breadcrumb {
    margin: 2px auto 30px;
    max-width: var(--max-width-container);
    width: 100%;
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 13px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-dark-gray);
    flex-wrap: wrap;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    font-family: var(--font-family-semi-bold);
    font-size: 11px;
    font-weight: 400;
    color: var(--color-near-black);
}

.breadcrumb-arrow {
    font-size: 14px;
    color: var(--color-dark-gray);
    margin: 0;
    vertical-align: middle;
}

.breadcrumb-link {
    color: var(--color-near-black);
    text-decoration: none;
    transition: var(--transition);
}

    .breadcrumb-link:hover,
    .breadcrumb-link:focus {
        color: var(--color-dark-blue);
        outline: none;
    }

.breadcrumb-current,
.breadcrumb-overflow-link.breadcrumb-current {
    color: var(--color-medium-gray) !important;
    font-weight: 500;
}

.breadcrumb-overflow {
    position: relative;
}

.breadcrumb-overflow-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 24px;
    padding: 0 0;
    border: 0;
    border-radius: 4px;
    background-color: #fff;
    color: var(--color-near-black);
    font-family: var(--font-family-semi-bold);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

    .breadcrumb-overflow-trigger:focus {
        outline: 2px solid var(--color-dark-blue);
        outline-offset: 1px;
    }

.breadcrumb-overflow-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 210px;
    padding: 10px 14px;
    border: 1px solid var(--color-light-gray);
    background-color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .breadcrumb-overflow-menu.hide {
        display: none;
    }

.breadcrumb-overflow-link {
    color: var(--color-near-black);
    font-family: var(--font-family-semi-bold);
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
}

    .breadcrumb-overflow-link:hover,
    .breadcrumb-overflow-link:focus {
        color: var(--color-dark-blue);
        outline: none;
    }

.gh-modal-header h2.text-content.bold-h2 {
    margin-bottom: 0 !important;
    padding: 0 0px 0px 0px;
}

.right-nav-title {
    border-bottom: 1px solid rgba(151, 151, 151, 1) !important;
    padding-bottom: 4px;
    margin-bottom: 6px;
    margin-top: 21px;
}

.icon-text-link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}

    .icon-text-link .material-symbols-outlined {
        font-size: 20px;
        color: var(--color-dark-blue);
    }

.modal-copy-container p {
    line-height: 20px;
    margin-bottom: 22px;
}

.modal-copy-contact-group p {
    margin-bottom: 0;
    line-height: 22px;
}

.p-0.text-content.semi-bold.font-18 {
    margin-left: 42px !important;
}

.mt-25 {
    margin-top: 25px;
}

.iframe-grid-d-8-4 .my-3 {
    margin-top: 0px !important;
    margin-bottom: 14px !important;
}

.iframe-grid-d-8-4 .form-label {
    margin-bottom: 0px;
}

.iframe-grid-d-8-4 .invalid-feedback {
    margin-top: 0px;
}

.iframe-grid-d-8-4 [data-sf-role="error-message"] {
    margin-top: 0px;
}

.iframe-grid-d-8-4 .my-3.mb-36 {
    margin-bottom: 36px !important;
}

.iframe-grid-d-8-4 [data-sf-role="field-captcha-container"] {
    margin-bottom: 26px !important;
}

p.icon-text-link a {
    color: var(--color-near-black);
}

.child-table-c1-header {
    font-family: var(--font-family-bold) !important;
}

.margin-top-48 {
    margin-top: 48px !important;
}

.margin-bottom-45 {
    margin-bottom: 45px !important;
}

.gh-dt-12 {
    display: flex !important;
    flex-direction: column !important;
}

.gh-dt-1-5 {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    max-width: 150px !important;
}

.dataTable,
.panel-title {
    font-size: 14px !important;
}

    .child-table-c1-header,
    .dataTable th {
        font-family: var(--font-family-bold) !important;
    }

    .dataTable td {
        font-family: var(--font-family-medium) !important;
    }

.align-start {
    align-items: flex-start;
}

/* ==========================================================================
    Three Column Layout (3-6-3)
--------------------------------------------------------------------------
    Left Sidebar (288px) + Main Content (flex) + Right Sidebar (288px).
    - `.three-column-layout-container`: outer flex shell with gap.
    - `.three-col-left-sidebar` / `.three-col-right-sidebar`: fixed-width rails.
    - `.three-col-main-content`: flexible middle column.
    At <= 1200px the layout collapses into a vertical stack to preserve
    readability on smaller viewports.
========================================================================== */
.three-column-layout-container {
    display: flex;
    width: 100%;
    gap: 24px;
    flex-wrap: wrap;
}

.three-col-left-sidebar {
    width: 288px;
    flex-shrink: 0;
}

.three-col-main-content {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.three-col-header {
    width: 100%;
    margin-bottom: 0;
}

.three-col-content-row {
    display: flex;
    width: 100%;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 0;
}

.three-col-content-main {
    flex: 1 1 0%;
    min-width: 0;
}

.three-col-right-sidebar {
    width: 288px;
    flex-shrink: 0;
}

.grid-6-6_6-6-content,
.grid-12_12_12_6-6-content,
.grid-12_12_4-4-4-content,
.site-breadcrumb,
.two-col-row,
.resource-wrapper {
    max-width: var(--max-width-container);
    width: 100%;
    margin: 0 auto;
}

.iframe-video-embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.blue-link.text-content.medium-p1 {
    color: var(--color-dark-blue) !important;
}

.img-fullwidth {
    width: 100%;
    margin-bottom: 30px;
}

.width-70percent-img {
    width: 70%;
    margin-bottom: 30px;
}

/* ==========================================================================
    Cookie Consent Banner - Floating Toast
--------------------------------------------------------------------------
    Fixed position floating toast at the top of the page for GDPR cookie consent.
    Positioned below the header as a centered, rounded notification.
    Uses design system tokens for colors, typography, and spacing.
========================================================================== */
.gdpr-container.cookiebanner {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 90%;
    min-width: 320px;
    background-color: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-black) 15%, transparent);
    z-index: 10000;
    padding: 0;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

    .gdpr-container.cookiebanner .container-fluid {
        width: 100%;
        padding: 0;
    }

    .gdpr-container.cookiebanner .cookie-container {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14px 20px;
        gap: 16px;
        position: relative;
    }

    .gdpr-container.cookiebanner .cookie-text {
        font-family: var(--font-family-medium);
        font-size: var(--font-size-base);
        line-height: var(--line-height-relaxed);
        color: var(--color-near-black);
        margin: 0;
    }

        .gdpr-container.cookiebanner .cookie-text a {
            color: var(--color-dark-blue);
            text-decoration: underline;
            transition: color var(--transition-fast);
        }

            .gdpr-container.cookiebanner .cookie-text a:hover,
            .gdpr-container.cookiebanner .cookie-text a:focus {
                color: var(--color-sky-blue);
                text-decoration: underline;
            }

            .gdpr-container.cookiebanner .cookie-text a:focus {
                outline: 2px solid var(--color-dark-blue);
                outline-offset: 2px;
                border-radius: 2px;
            }

    .gdpr-container.cookiebanner .acceptcookies {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        min-height: 32px;
        min-width: 32px;
        background: none;
        border: none;
        color: var(--color-medium-gray);
        cursor: pointer;
        border-radius: 50%;
        transition: background-color var(--transition-fast), color var(--transition-fast);
        flex-shrink: 0;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

        .gdpr-container.cookiebanner .acceptcookies .fa,
        .gdpr-container.cookiebanner .acceptcookies .fa-times {
            font-size: 18px;
            line-height: 1;
        }

        .gdpr-container.cookiebanner .acceptcookies:hover,
        .gdpr-container.cookiebanner .acceptcookies:focus {
            background-color: var(--color-light-gray);
            color: var(--color-near-black);
        }

        .gdpr-container.cookiebanner .acceptcookies:focus {
            outline: 2px solid var(--color-dark-blue);
            outline-offset: 2px;
        }

/* ==========================================================================
      Search Input Group
--------------------------------------------------------------------------
      Input group with integrated search icon following design system:
      - 2px border with design system colors
      - Integrated icon that appears as part of the input
      - Maintains all existing class names for JS compatibility
========================================================================== */
.search-container.input-group {
    display: flex;
    align-items: stretch;
    max-width: 160px;
    border: 2px solid var(--color-medium-gray);
    border-radius: 4px;
    background-color: var(--color-white);
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

    .search-container.input-group:focus-within {
        border: 2px solid var(--color-near-black);
    }

    .search-container.input-group .site-search-input,
    .search-container.input-group .txtSiteSearch {
        flex: 1;
        min-height: 32px;
        padding: 4px 12px;
        border: none;
        border-radius: 0;
        background-color: transparent;
        color: var(--color-near-black);
        font-family: var(--font-family-medium);
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0.3px;
        line-height: 19px;
        box-sizing: border-box;
        width: 156px;
    }

        /* Style the cancel/clear icon in search inputs */
        .search-container.input-group .site-search-input::-webkit-search-cancel-button,
        .search-container.input-group .txtSiteSearch::-webkit-search-cancel-button {
            -webkit-appearance: none;
            appearance: none;
            cursor: pointer;
            /* Add custom styling for the cancel icon if needed */
        }

        /* Adjust decoration container width if needed for spacing */
        .search-container.input-group .site-search-input::-webkit-textfield-decoration-container,
        .search-container.input-group .txtSiteSearch::-webkit-textfield-decoration-container {
            width: 100% !important;
        }

        .search-container.input-group .site-search-input:focus,
        .search-container.input-group .txtSiteSearch:focus {
            border: none;
            background-color: transparent;
        }

    .search-container.input-group .input-group-addon {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        background-color: transparent;
        border: none;
        border-left: none;
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 8px;
    }

        .search-container.input-group .input-group-addon .fa-search,
        .search-container.input-group .input-group-addon .btnSiteSearch {
            color: var(--color-dark-gray);
            font-size: 18px;
            line-height: 1;
        }

        .search-container.input-group .input-group-addon:hover .fa-search,
        .search-container.input-group .input-group-addon:hover .btnSiteSearch {
            color: var(--color-near-black);
        }

.p-0 {
    padding: 0 !important;
}

.b-0 {
    border-width: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.w-full {
    width: 100% !important;
}

.w-100 {
    width: 100% !important;
}

.flex {
    display: flex !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.tab-item.grey-bottom-border {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.ck-accordion-tab-title {
    margin: 12px 0 0 0 !important;
}

    .ck-accordion-tab-title section.text-content.bold-h3 {
        margin: 0 !important;
    }

.sf-list-item {
    margin-top: 12px;
}

/* Grid template accordion (header.js initAccordionLayout): .in toggles visibility (Bootstrap 3 collapse pattern) */
.accordian-tab-content.collapse:not(.in),
.accordion-tab-content.collapse:not(.in),
.ck-accordion-tab-content.collapse:not(.in) {
    display: none;
}

.accordian-tab-content.collapse.in,
.accordion-tab-content.collapse.in,
.ck-accordion-tab-content.collapse.in {
    display: block;
}

/* Header toggle icon (+ / -) for GridSystem accordion layout */
a.accordian-tab-title,
a.accordion-tab-title,
a.ck-accordion-tab-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-decoration: none;
}

    /* Ligature names in content: — same pattern as .dpg-accordion__icon (Material Symbols Outlined) */
    a.accordian-tab-title::after,
    a.accordion-tab-title::after,
    a.ck-accordion-tab-title::after {
        content: "add_2";
        display: inline-block;
        margin-left: var(--spacing-md);
        font-family: "Material Symbols Outlined", sans-serif;
        font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
        font-size: 24px;
        line-height: 1;
        color: var(--color-dark-blue);
        font-style: normal;
        font-weight: normal;
        letter-spacing: normal;
        text-transform: none;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-smoothing: antialiased;
    }

    a.accordian-tab-title[aria-expanded="true"]::after,
    a.accordion-tab-title[aria-expanded="true"]::after,
    a.ck-accordion-tab-title[aria-expanded="true"]::after {
        content: "remove";
    }

.sf-list-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 8px;
}

section.text-content.bold-h3 + .ck-show-hide-btn-container {
    margin-top: -47.5px !important;
}

ul {
    list-style-position: inside;
}

.text-content table {
    width: 100%;
    border-collapse: collapse;
}

    .text-content table tr {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .text-content table td {
        width: auto !important;
        display: block;
        vertical-align: top;
    }

.mt-30 {
    margin-top: 30px;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.text-justify {
    text-align: justify !important;
}
.form-check-input:checked{
    background-color:transparent !important;
}
.form-check{
    margin-bottom: 8px !important;
}
.form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: transparent;
}
.form-check {
    display: flex;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: 6px;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}
.form-check label{
    height: 20px;
}
@media (min-width: 1024px) and (max-width: 1296px) {
    .max-width-1248.m-auto {
        /* padding-left: var(--container-padding-desktop);
        padding-right: var(--container-padding-desktop); */
    }
}
/* 2 columns: 878px to 1023px */
@media (min-width: 878px) and (max-width: 1023px) {
    .text-content table tr {
        grid-template-columns: repeat(2, 1fr);
    }

    .max-width-1248 {
        max-width: 736px !important;
    }
}

/* 1 column: 877px and below */
@media (max-width: 877px) {
    .text-content table tr {
        grid-template-columns: 1fr;
    }

    .max-width-1248 {
        max-width: 332px !important;
    }
    .breadcrumb{
        margin-top: -3px;
    }
    .breadcrumb-list{
        gap: 7px;
    }
}
/* ==========================================================================
    Media Queries
--------------------------------------------------------------------------
    Three breakpoint system:
    1. Desktop: >=1024px (default/base styles, no media query needed)
    2. Tablet: >=878px and <=1023px
    3. Mobile: <=877px
========================================================================== */
/* --------------------------------------------------------------------------
    Accessibility Queries
-------------------------------------------------------------------------- */
/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        /* Colour-format tokens, like their :root declarations. A bare RGB
           triple here would make every consuming declaration invalid at
           computed-value time and strip the colour from all of them. */
        --color-near-black: #000;
        --color-dark-gray: #333;
        --color-light-gray: #000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
    Print Styles
-------------------------------------------------------------------------- */
@media print {
    main {
        max-width: none;
        padding: 0;
        margin: 0;
        margin-bottom: 40px !important;
    }

    .page-title,
    .page-header p {
        color: var(--color-black);
    }

    .scroll-to-top,
    .skip-link {
        display: none;
    }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 812px) and (orientation: landscape) {
    .iframe-video-embed {
        border: 0;
        overflow: hidden;
    }
}

@media (min-width: 878px) {

    .site-breadcrumb-overflow-menu,
    .breadcrumb-overflow-menu {
        display: none;
    }
}

@media (max-width: 640px) {
    .request-drawing-modal {
        width: 600px !important;
        max-width: 600px !important;
        height: 100% !important;
    }
}

@media (max-width: 1023px) {
    .grid-background-color-grey {
        padding: 60px 0 49px 0;
    }

    .card-bordered-top-container {
        padding: 32px 30px;
    }

    .account-sidebar__heading {
        display: none;
    }

    .account-sidebar__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 14px 16px;
        margin: 0 0 16px 0;
        font: inherit;
        color: var(--color-near-black);
        font-family: var(--font-family-semi-bold);
        font-size: 22px;
        font-weight: 700;
        text-align: left;
        background-color: var(--color-white);
        border: 1px solid var(--color-border-gray);
        border-radius: 0;
        cursor: pointer;
        transition: var(--transition);
        height: 54px;
    }

        .account-sidebar__toggle:hover,
        .account-sidebar__toggle:focus {
            background-color: color-mix(in srgb, var(--color-border-gray) 20%, transparent);
            outline: 2px solid var(--color-dark-blue);
            outline-offset: 2px;
        }

    .account-sidebar__toggle-icon {
        flex-shrink: 0;
        margin-left: 8px;
        font-size: 28px;
        color: var(--color-near-black);
    }

    .account-sidebar__panel {
        display: none !important;
        padding-top: 4px;
    }

    .account-sidebar--open .account-sidebar__panel {
        display: block !important;
    }

    .d-flex-product {
        display: flex;
        flex-wrap: nowrap;
        gap: 20px !important;
    }
}

@media (min-width: 1024px) {
    .account-sidebar__toggle {
        display: none !important;
    }

    .account-sidebar__panel {
        display: block !important;
    }

    /* Reserve vertical space for the fixed desktop site-header so content
     never overlaps or shifts when the header compacts on scroll. Uses the
     DEFAULT (expanded) header height; when the header shrinks on scroll
     the extra ~45px of reserved space sits above the fold and is invisible
     — critical for a smooth scroll-up transition back to full nav.
     Transparent-header hero pages are excluded because they intentionally
     render their hero image under the header.
     Greenheck (first selector) keeps the original opt-out on the per-slide
     `.header-gradient-mode`. Valent (second selector) opts out on the
     page-level `.header-overlay-hero` instead, because `.header-gradient-mode`
     is toggled per hero slide and must only ever change colour, never spacing
     — gating 195px of padding on it shifted the whole page mid-carousel. */
    body:not(.valentair):not(.header-gradient-mode) > main,
    body.valentair:not(.header-overlay-hero) > main {
        padding-top: var(--site-header-height-default);
    }
}

/* Desktop styles (>=1024px) - Base styles, no media query needed */
/* --------------------------------------------------------------------------
    Desktop Responsive: >=1024px and <1296px
    When viewport is between 1024px and container max-width (1248px),
    apply horizontal padding to prevent content from touching edges
-------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1296px) {
    body > main {
        padding-left: var(--container-padding-desktop);
        padding-right: var(--container-padding-desktop);
        margin: 0;
        margin-bottom: 0 !important;
    }


    .p-0 {
        padding: 0 !important;
    }

    .b-0 {
        border-width: 0 !important;
    }

    .mb-0 {
        margin-bottom: 0 !important;
    }

    .mb-15 {
        margin-bottom: 15px !important;
    }

    .w-full {
        width: 100% !important;
    }

    .w-100 {
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
    Tablet: >=878px and <=1023px
-------------------------------------------------------------------------- */
@media (min-width: 878px) and (max-width: 1023px) {
    /* Tablet logo is larger than the mobile default. Keep this in sync with
     the `.mobile-header-logo` wrapper; the <img> fills it via `height: 100%`. */
    :root {
        --mobile-logo-height: 40px;
    }

    .text-content {
        margin: 0 auto 18px;
        padding: 0 !important;
        max-width: 736px !important;
    }

        .text-content.bold-h1,
        .text-content.medium-h1,
        .text-content.regular-h1 {
            font-size: 36px;
            margin: 0 auto 8px;
            padding: 0 !important;
        }

        .text-content.bold-h2,
        .text-content.medium-h2,
        .text-content.regular-h2 {
            font-size: 28px;
            margin: 0 auto 8px;
            padding: 0 !important;
        }

        .text-content.bold-h3,
        .text-content.medium-h3,
        .text-content.regular-h3,
        .blog-post-text-container h3 {
            font-size: 28px;
            margin: 0 auto 6px;
            padding: 0 !important;
        }

        .text-content.bold-st1,
        .text-content.medium-st1,
        .text-content.regular-st1 {
            font-size: 17px;
            margin: 0 auto 4px;
            padding: 0 !important;
        }

        .text-content.bold-st2,
        .text-content.medium-st2,
        .text-content.regular-st2 {
            font-size: 15px;
            margin: 0 auto 4px;
            padding: 0 !important;
        }

    /* Apply tablet padding to content containers with max-width: 1248px */


    .three-column-layout-container {
        flex-direction: column;
    }

    .three-col-left-sidebar {
        width: 100%;
    }

    .three-col-main-content {
        width: 100%;
    }

    .three-col-content-row {
        flex-direction: column;
    }

    .three-col-content-main {
        width: 100%;
    }

    .three-col-right-sidebar {
        width: 100%;
    }

    .grid-d3-t2-m1-cols {
        display: flex;
        flex-wrap: wrap;
        gap: 32px;
    }

        .grid-d3-t2-m1-cols > * {
            max-width: calc(100% - 15px);
        }

    .max-width-1248.m-auto {
        max-width: 736px !important;
        width: 100% !important;
    }
    

    .grid-d2-t1-m1-cols {
        gap: 32px;
        grid-template-columns: repeat(1, 1fr);
    }

        .grid-d2-t1-m1-cols > * {
            max-width: 100%;
        }

    .grid-12_12_12_6-6-content section.text-content.bold-h3,
    .grid-12_12_4-4-4-content section.text-content.bold-h3,
    .grid-12_12_12_6-6-content section.text-content.bold-h2,
    .grid-12_12_4-4-4-content section.text-content.bold-h2,
    .grid-12_12_12_6-6-content section.text-content.regular-p1,
    .grid-12_12_4-4-4-content section.text-content.regular-p1,
    .grid-12_12_12_6-6-content section.text-content.medium-p1,
    .grid-12_12_4-4-4-content section.text-content.medium-p1,
    .grid-d3-t2-m1-cols > div {
        max-width: 736px !important;
        margin: auto !important;
    }

    .grid-12_12_12_6-6-content .grid-d2-t1-m1-cols {
        gap: 30px;
        grid-template-columns: repeat(2, 1fr);
        max-width: 736px;
        margin: auto;
    }

        .grid-12_12_12_6-6-content .grid-d2-t1-m1-cols .card-ltrib-right {
            display: none !important;
        }

    .grid-d4-t2-m1-cols {
        gap: 30px;
        grid-template-columns: repeat(2, 1fr);
    }

        .grid-d4-t2-m1-cols > * {
            max-width: 100%;
        }

    .grid-d-2-3-2-3-2 {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

        .grid-d-2-3-2-3-2 > * {
            grid-column: auto;
        }

    .grid-d-3-6-3,
    .grid-d-3-9,
    .grid-d-4-8,
    .grid-d-8-4,
    .grid-d-9-3 {
        gap: 30px;
    }

    .grid-row-2-cols {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .grid-row-3-cols {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .grid-2-3-rows-container {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .feature-carousel-container {
        padding-top: 95px !important;
        padding-bottom: 48px;
    }

        .feature-carousel-container section.text-content.regular-h2.text-right {
            font-size: 34px;
            margin-top: 22px !important;
            line-height: 52px;
        }

    .gh-3-column {
        width: 100%;
        flex-shrink: 0;
    }

    .gdpr-container.cookiebanner {
        top: 75px;
        max-width: 85%;
    }

        .gdpr-container.cookiebanner .cookie-container {
            padding: 14px 20px;
        }

        .gdpr-container.cookiebanner .cookie-text {
            font-size: 15px;
        }

    body > main {
        padding: 0;
        margin: 0 auto;
        margin-top: var(--mobile-header-height);
        margin-bottom: 0 !important;
        max-width: 736px !important;
        width: 100% !important;
    }

    .mobile-header-bar {
        width: 100% !important;
        margin: 0;
        padding: 0;
    }

    .mobile-header-container {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;
        max-width: 736px !important;
        width: 100% !important;
        padding: 25px 0 !important;
    }

    .p-0 {
        padding: 0 !important;
    }

    .b-0 {
        border-width: 0 !important;
    }

    .mb-0 {
        margin-bottom: 0 !important;
    }

    .mb-15 {
        margin-bottom: 15px !important;
    }

    .w-full {
        width: 100% !important;
    }

    .w-100 {
        width: 100% !important;
    }

    .margin-top-48 {
        margin-top: 59px !important;
    }

    .margin-bottom-45 {
        margin-bottom: 29px !important;
    }

    .grid-12_12_4-4-4-container {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .grid-12_12_12_6-6-content section.text-content.bold-h3 {
        margin-bottom: 14px !important;
    }

    .grid-12_12_12_6-6-content section.text-content.regular-p1 {
        line-height: 26px;
    }
}

/* --------------------------------------------------------------------------
    Mobile: <=877px
-------------------------------------------------------------------------- */
@media (max-width: 877px) {
    .carousel-control {
        display: none !important;
    }

    .margin-top-48 {
        margin-top: 24px !important;
    }

    .margin-bottom-45 {
        margin-bottom: 24px !important;
    }

    /* Mobile logo sizing moved to `--mobile-logo-height` on :root (default
     is the mobile value). The <img> fills `.mobile-header-logo` via
     `height: 100%; width: auto`. */

    .text-content {
        margin: 0 auto 16px !important;
        padding: 0 !important;
        max-width: 332px !important;
    }

        .text-content.bold-h1,
        .text-content.medium-h1,
        .text-content.regular-h1 {
            max-width: 332px;
            margin: auto !important;
            font-size: 28px;
            margin: 0 auto 8px !important;
            padding: 0 !important;
        }

        .text-content.bold-h1 {
            font-size: 32px;
        }

        .text-content.bold-h2,
        .text-content.medium-h2,
        .text-content.regular-h2 {
            max-width: 332px;
            margin: auto !important;
            font-size: 22px;
            margin: 0 auto 6px !important;
            padding: 0 !important;
        }

        .text-content.bold-h3,
        .text-content.medium-h3,
        .text-content.regular-h3,
        .blog-post-text-container h3 {
            max-width: 332px;
            margin: auto !important;
            font-size: 22px;
            margin: 0 auto 6px !important;
            padding: 0 !important;
        }

        .text-content.bold-st1,
        .text-content.medium-st1,
        .text-content.regular-st1 {
            font-size: 16px;
            margin: 0 auto 4px !important;
            padding: 0 !important;
        }

        .text-content.bold-st2,
        .text-content.medium-st2,
        .text-content.regular-st2 {
            font-size: 15px;
            margin: 0 auto 4px !important;
            padding: 0 !important;
        }

        .text-content.bold-st3,
        .text-content.medium-st3,
        .text-content.regular-st3 {
            font-size: 14px;
            margin: 0 auto 4px !important;
            padding: 0 !important;
        }

        .text-content.bold-p1,
        .text-content.medium-p1,
        .text-content.regular-p1,
        .blog-post-text-container p,
        .blog-post-text-container ul > li {
            margin: 0 auto 23px !important;
            padding: 0 !important;
            line-height: 26px;
        }

        .text-content.bold-p2,
        .text-content.medium-p2,
        .text-content.regular-p2 {
            font-size: 13px;
            margin: 0 auto 4px !important;
            padding: 0 !important;
        }

        .text-content.bold-p3,
        .text-content.medium-p3,
        .text-content.regular-p3 {
            font-size: 12px;
            margin: 0 auto 4px !important;
            padding: 0 !important;
        }

    body > main {
        /* padding: 0 var(--container-padding-mobile) 24px var(--container-padding-mobile); */
        padding: 0;
        margin: 0 auto;
        margin-top: var(--mobile-header-height) !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
        max-width: 332px !important;
    }

    .text-content {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    /* Apply mobile padding to content containers with max-width: 1248px */


    .page-title {
        font-size: 24px;
    }

    .page-header p {
        font-size: 15px;
    }

    .sf_2cols_1_25,
    .sf_2cols_2_75,
    .sf_2cols_2in_75,
    .sf_2cols_1,
    .sf_2cols_3,
    .sf_2cols_1_5,
    .sf_2cols_2_5 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .grid-d3-t2-m1-cols {
        gap: 30px;
        grid-template-columns: repeat(2, 1fr);
    }

        .grid-d3-t2-m1-cols > * {
            max-width: 100% !important;
        }

    .grid-d2-t1-m1-cols {
        gap: 30px;
        grid-template-columns: repeat(1, 1fr);
    }

        .grid-d2-t1-m1-cols > * {
            max-width: 100%;
        }

    .grid-d4-t2-m1-cols {
        gap: 30px;
        grid-template-columns: repeat(1, 1fr);
    }

        .grid-d4-t2-m1-cols > * {
            max-width: 100%;
        }

    .grid-d-2-3-2-3-2,
    .grid-d-3-6-3,
    .grid-d-3-9,
    .grid-d-4-8,
    .grid-d-8-4,
    .grid-d-9-3 {
        grid-template-columns: 1fr;
        gap: 30px;
    }

        .grid-d-2-3-2-3-2 > *,
        .grid-d-3-6-3 > *,
        .grid-d-3-9 > *,
        .grid-d-4-8 > *,
        .grid-d-8-4 > *,
        .grid-d-9-3 > * {
            grid-column: auto !important;
        }



    .grid-row-2-cols {
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
        padding: 0 32px;
    }

    .grid-row-3-cols {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 30px;
        margin-top: 40px;
        justify-content: center;
    }

        .grid-row-3-cols > * {
            max-width: 288px;
            width: 100%;
        }

    .grid-2-3-rows-container {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .feature-carousel-container {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .gh-3-column {
        width: 100%;
        flex-shrink: 0;
    }

    .three-col-left-sidebar {
        width: 100%;
    }

    .three-col-main-content {
        width: 100%;
    }

    .three-col-content-row {
        flex-direction: column;
    }

    .three-col-content-main {
        width: 100%;
    }

    .three-col-right-sidebar {
        width: 100%;
    }

    .gdpr-container.cookiebanner {
        top: 70px;
        max-width: calc(100% - 32px);
        min-width: auto;
        left: 50%;
        transform: translateX(-50%);
    }

        .gdpr-container.cookiebanner .cookie-container {
            flex-direction: row;
            align-items: center;
            padding: 12px 16px;
            gap: 12px;
        }

        .gdpr-container.cookiebanner .cookie-text {
            font-size: 13px;
            line-height: 1.5;
            padding-right: 32px;
            flex: 1;
        }

        .gdpr-container.cookiebanner .acceptcookies {
            position: absolute;
            top: 12px;
            right: 16px;
        }

    [data-sf-role="form-container"] .grid-d2-t1-m1-cols {
        gap: 0;
    }

    .m-w-full {
        width: 100% !important;
    }

    .mobile-header-bar {
        width: 100% !important;
        margin: 0;
        padding: 0;
    }

    .mobile-header-container {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;
        max-width: 332px !important;
        width: 100% !important;
        padding: 25px 0 !important;
    }

    .text-content.bold-h1,
    .text-content.bold-h2,
    .text-content.bold-h3,
    .text-content.bold-st1,
    .text-content.bold-st2,
    .text-content.bold-st3,
    .text-content.bold-p1,
    .text-content.bold-p2,
    .text-content.bold-p3,
    .year-title,
    .cgh-mc-modal__body .share-form .share-modal-title,
    .share-form .share-modal-title,
    .nr-title,
    .nr-item-title,
    .topic,
    .topic-tag-top,
    .topic-tag,
    .topic-span,
    .author-name,
    .blog-inset-img p,
    .blog-img-caption p,
    .comment-reply-modal-title,
    .author-name-mobile,
    .image-slider-title,
    .caps-cards-container h1,
    .card-ltrib-title,
    .card-carousel-image-title,
    .card-carousel-button,
    .design-narrative-layout h2,
    .design-narrative-text h2,
    .design-narrative-text h3,
    .cgh-mc-modal.cgh-mc-modal--narrative .cgh-mc-modal__title,
    .hero-title,
    .section-title,
    .space-selection-modal-space-name,
    .space-selection-modal-tab,
    .space-selection-modal-share-btn,
    .popover-content h3,
    .detail-text-content h3,
    .view-product-details-btn,
    .hero-btn,
    .overview-overlay-card h2,
    .product-card-header h3,
    .product-info-section p strong,
    .product-info-section p b,
    .mobile-space-item__name,
    .highlight-details__title,
    .highlight-details__term-name,
    .mobile-highlight-details-btn,
    .design-narrative-layout.mobile-stacked .design-narrative-mobile-header h2,
    .filtered-results-count,
    .filter-title,
    .card-ilcr-title,
    .card-ilcr-description table th,
    .card-ilcr-description table td,
    .card-ilcr-button,
    .filter-section h2,
    .product-title,
    .communications-modal-title,
    .news-detail .page-title,
    .feature-scroll-title,
    .feature-scroll-card-title,
    .categorywise-section__title,
    .list-detail-page__title,
    .product-category,
    .product-overview-certifications h4,
    .product-detail-title,
    .product-detail-btn,
    .product-detail-highlights-heading,
    .product-detail-nav-item,
    .product-detail-nav-dropdown-button,
    .product-detail-nav-dropdown-option,
    .product-detail-tab-panel h3,
    .product-detail-feature-heading,
    .product-detail-feature-instructions,
    .product-detail-table th,
    .product-detail-document-list li.document-subheading,
    .product-detail-drawings-table th,
    .product-detail-media-info h4,
    .product-detail-blog-content-text h4,
    .product-detail-blog-action-btn,
    .card-with-icon-2 h3,
    .my-account-menu__title,
    .cgh-docs-content__title,
    .card-with-icon h3,
    .gs-dashboard-name,
    .db-widget-title,
    .gs-widget-library h3 span:first-child,
    .learnupon-promo-card__title,
    .learnupon-modal__title,
    .faq-question-header__label,
    .faq-question-label,
    .faq-question-term,
    .faq-question-mobile-label,
    .fei-video-hero__title,
    .top-thumbnail-video__title h3,
    .page-header h1,
    h1,
    .page-title,
    .font-bold,
    .text-content.bold-h1,
    .text-content.bold-h3,
    .blog-post-text-container h3,
    .text-content.bold-p3,
    .text-content.regular-h2 b,
    [class*="btn-"],
    [data-sf-role="form-container"] button,
    .gh-form input[type="file"]::-webkit-file-upload-button,
    .hs-layout input[type="file"]::-webkit-file-upload-button,
    [data-sf-role="form-container"] input[type="file"]::-webkit-file-upload-button,
    .fei-tabs-section-title,
    .card-right-img-para-v2__heading,
    .blog-section-title,
    .blog-pagination .current,
    .link-bold,
    .section-title,
    .gs-dashboard-name,
    .card-lort-title,
    .card-bordered-top-title,
    .quick-delivery-header__label,
    .quick-delivery-question,
    .quick-delivery-answer-label,
    .hero-issue-date,
    .briefing-section-title,
    .issue-card-text h2,
    .article-container h4,
    .show-all,
    .issue-card-text p b,
    .article-page-title,
    .artical-body-container p b,
    .artical-body-container b,
    .related-articles-title,
    .related-article-card h3,
    .caps-activation-table th,
    .carousel-card-title,
    a.ecaps-header-nav,
    .find-my-rep-button,
    #mobile-login-btn,
    #mobile-find-rep-btn,
    .fei-tabs-section-heading,
    .fei-tabs-header,
    .leadtime-header-title,
    .faq-fei .answer-label,
    .resource-actions__result-count,
    .resource-title,
    .resource-results.products-grid .product-title,
    .resource-wrapper .filter-toggle-btn,
    .resource-filters h4,
    .footer-heading,
    .faq-card__title,
    .dpg-grid__th,
    .dpg-modal__title,
    .dpg-modal__close {
        font-weight: 800 !important;
        font-family: var(--font-family-extra-bold) !important;
    }

    .page-header h1,
    .page-title {
        font-size: 28px;
    }

    .page-header {
        margin-bottom: 18px !important;
    }

    .p-0 {
        padding: 0 !important;
    }

    .b-0 {
        border-width: 0 !important;
    }

    .mb-0 {
        margin-bottom: 0 !important;
    }

    .mb-15 {
        margin-bottom: 15px !important;
    }

    .w-full {
        width: 100% !important;
    }

    .w-100 {
        width: 100% !important;
    }

    .grid-12_12_4-4-4-container {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .grid-12_12_4-4-4-content {
        gap: 8px;
    }

    .grid-12_12_12_6-6-content section.text-content.bold-h3 {
        margin-bottom: 14px !important;
    }

    .grid-12_12_12_6-6-content section.text-content.regular-p1 {
        line-height: 26px;
    }

    .margin-top-70 {
        margin-top: 42px;
    }

    .margin-bottom-70 {
        margin-bottom: 42px;
    }

    .padding-top-70 {
        padding-top: 42px;
    }

    .padding-bottom-70 {
        padding-bottom: 42px;
    }

    .grid-12_12_12_6-6-content .grid-d2-t1-m1-cols .card-ltrib-right {
        display: none !important;
    }

    .grid-d3-t2-m1-cols {
        gap: 30px;
        grid-template-columns: repeat(1, 1fr);
    }

        .grid-d3-t2-m1-cols > * {
            max-width: 100% !important;
        }

        .grid-12_12_12_6-6-content section.text-content.bold-h3,
        .grid-12_12_4-4-4-content section.text-content.bold-h3,
        .grid-12_12_12_6-6-content section.text-content.bold-h2,
        .grid-12_12_4-4-4-content section.text-content.bold-h2,
        .grid-12_12_12_6-6-content section.text-content.regular-p1,
        .grid-12_12_4-4-4-content section.text-content.regular-p1,
        .grid-12_12_12_6-6-content section.text-content.medium-p1,
        .grid-12_12_4-4-4-content section.text-content.medium-p1,
        .grid-d3-t2-m1-cols > div {
            max-width: 332px !important;
            margin: 0 auto 12px !important;
        }
    /* Stack row/grid shells vertically on mobile (e.g. ad-vehicle reorder to last) */
    .two-col-row,
    .grid-d-2-3-2-3-2,
    .grid-d4-t2-m1-cols,
    .grid-d-3-6-3,
    .grid-d-3-9,
    .three-column-layout-container,
    .grid-d3-t2-m1-cols,
    .grid-d-4-8,
    .grid-d2-t1-m1-cols,
    .grid-d-8-4,
    .grid-d-9-3 {
        display: flex;
        flex-direction: column;
    }

    .two-col-row {
        gap: 8px;
    }

    .grid-d3-t2-m1-cols {
        gap: 20px;
    }

    ul {
        margin-left: 0 !important;
    }

    ::marker {
        margin-right: 6px !important;
    }

    .account-sidebar__toggle {
    }
}

@media (max-width: 640px) {
    .iframe-grid-d-8-4 {
        grid-template-columns: 1fr;
    }

    iframe.sitefinity-form-container.request-drawing-modal {
        width: 100% !important;
        max-width: 100%;
    }

    .iframe-grid-d-8-4 > :nth-child(1),
    .iframe-grid-d-8-4 > :nth-child(2) {
        grid-column: span 12 !important;
    }

    .p-0.text-content.semi-bold.font-18 {
        margin-left: 0 !important;
    }

    iframe.sitefinity-form-container.request-drawing-modal .iframe-grid-d-8-4,
    .gh-form .iframe-grid-d-8-4,
    .hs-layout .iframe-grid-d-8-4 {
        display: flex;
        flex-direction: column-reverse;
        gap: 16px;
        padding-bottom: 40px !important;
    }

    .iframe-grid-d-8-4 > :nth-child(1) {
        margin-top: 0 !important;
    }

    .iframe-grid-d-8-4 .form-label {
        margin-bottom: 3px;
    }

    .iframe-grid-d-8-4 .my-3 {
        margin-bottom: 11px !important;
    }

    .modal-copy-container p {
        line-height: 19px;
        margin-bottom: 19px;
        font-size: 13px;
        font-weight: 500;
    }
}