/* ==========================================================================
   POLY Cleaning — site header
   Sits in the document flow and scrolls away with the page.
   ========================================================================== */

:root {
    --poly-header-h: 88px;
}

.poly-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 14px 22px;
    background: #39439B;
    color: #fff;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}

.poly-skip-link:focus {
    left: 16px;
    top: 16px;
}

/* The header scrolls away with the page. Persistent contact actions live in
   the global sticky CTA bar, which takes over once the hero is out of view. */
.poly-header {
    position: relative;
    /* Positioning context for the full width mega panels. */
    z-index: 900;
    font-family: "DM Sans", system-ui, -apple-system, sans-serif;
    background: #fff;
}

.poly-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 44px);
    width: 100%;
    max-width: 1290px;
    margin-inline: auto;
    padding-inline: clamp(20px, 5.2vw, 72px);
    min-height: var(--poly-header-h);
}

/* ----------------------------------------------------------------- brand */

.poly-header__brand {
    display: inline-flex;
    align-items: center;
    flex: none;
    text-decoration: none;
}

.poly-header__logo {
    width: auto;
    height: clamp(42px, 4.2vw, 58px);
    object-fit: contain;
}

.poly-header__wordmark {
    font-family: "SUSE", "DM Sans", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #10173A;
}

/* ------------------------------------------------------------------- nav */

/* The mega panel opens at the bottom edge of the header, so the top level
   items have to reach that edge as well. A short item leaves dead space
   between the link and the panel, and the pointer crossing it closes the
   panel before it can be reached. */
.poly-header__nav {
    align-self: stretch;
    display: flex;
    align-items: stretch;
    margin-inline-start: auto;
}

.poly-menu {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.9vw, 30px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.poly-menu > li > a {
    position: relative;
    display: inline-block;
    padding-block: 6px;
    font-size: .9125rem;
    font-weight: 500;
    color: #2A3355;
    text-decoration: none;
    transition: color .28s ease;
}

.poly-menu > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1.5px;
    background: #39439B;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .4s cubic-bezier(.16,1,.3,1);
}

.poly-menu > li > a:hover,
.poly-menu > li.current-menu-item > a { color: #39439B; }

.poly-menu > li > a:hover::after,
.poly-menu > li.current-menu-item > a::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ---------------------------------------------------------------- actions */

.poly-header__actions {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1vw, 14px);
    flex: none;
}

.poly-header__phone {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1.25rem;
    background: transparent;
    border: 1px solid #CBD3E4;
    border-radius: 4px;
    color: #10173A;
    text-decoration: none;
    transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}

.poly-header__phone:hover {
    border-color: #39439B;
    background: #39439B;
    color: #fff;
}

.poly-header__phone-icon { width: 18px; height: 18px; flex: none; color: #39439B; transition: color .3s ease; }
.poly-header__phone:hover .poly-header__phone-icon { color: #fff; }

.poly-header__phone-text { display: flex; flex-direction: column; line-height: 1.15; }

.poly-header__phone-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .62;
}

.poly-header__phone-number { font-size: .9125rem; font-weight: 600; letter-spacing: -.005em; }

/* ---------------------------------------------------------------- toggle */

.poly-header__toggle {
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-inline-start: auto;
    padding: 0;
    background: transparent;
    border: 1px solid #CBD3E4;
    border-radius: 4px;
    cursor: pointer;
}

.poly-header__toggle-glyph {
    width: 23px;
    height: 23px;
    color: #10173A;
    transition: transform .34s cubic-bezier(.16,1,.3,1), opacity .22s ease;
}

/* Both glyphs share the same cell; only one is ever shown. */
.poly-header__toggle .poly-header__toggle-glyph + .poly-header__toggle-glyph {
    position: absolute;
    opacity: 0;
    transform: rotate(-90deg) scale(.7);
}

.poly-header__toggle[aria-expanded="true"] .poly-header__toggle-glyph:first-of-type {
    opacity: 0;
    transform: rotate(90deg) scale(.7);
}

.poly-header__toggle[aria-expanded="true"] .poly-header__toggle-glyph + .poly-header__toggle-glyph {
    opacity: 1;
    transform: none;
}

/* ----------------------------------------------------------------- drawer */

/* The mobile navigation is an off-canvas drawer. It used to sit in the
   document flow and shove the page down when opened, which read as a layout
   glitch rather than a menu. */

/* The drawer is a child of the header, so the header's own stacking context
   has to clear the topbar (901) and the sticky CTA bar (950) while it is
   open — otherwise both paint over the drawer. */
.poly-header.is-open { z-index: 970; }

.poly-header__backdrop {
    position: fixed;
    inset: 0;
    z-index: 940;
    background: rgba(9, 13, 38, .5);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .34s ease, visibility .34s;
}

.poly-header.is-open .poly-header__backdrop {
    opacity: 1;
    visibility: visible;
}

.poly-header__panel {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 960;
    display: flex;
    flex-direction: column;
    width: min(92vw, 392px);
    padding: 0;
    background: #fff;
    border-top: 0;
    box-shadow: -30px 0 70px -40px rgba(9, 13, 38, .7);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Visibility keeps the links out of the tab order and the a11y tree while
       the drawer is parked off screen. */
    visibility: hidden;
    transform: translateX(100%);
    transition: transform .42s cubic-bezier(.16,1,.3,1), visibility .42s;
}

.poly-header.is-open .poly-header__panel {
    visibility: visible;
    transform: none;
}

/* ------------------------------------------------------------ drawer head */

.poly-header__panel-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid #EEF1F7;
}

.poly-header__panel-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.poly-header__panel-logo {
    width: auto;
    height: 40px;
    object-fit: contain;
}

.poly-header__panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: none;
    padding: 0;
    background: #F4F6FB;
    border: 0;
    border-radius: 50%;
    color: #10173A;
    cursor: pointer;
    transition: background-color .28s ease;
}

.poly-header__panel-close:hover,
.poly-header__panel-close:focus-visible { background: #E4E9F5; }

.poly-header__panel-close .poly-header__toggle-glyph { width: 19px; height: 19px; }

/* ------------------------------------------------------------- drawer nav */

.poly-header__panel-nav {
    flex: 1;
    padding: 8px 20px 4px;
}

.poly-menu--stack {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.poly-menu--stack > li > a,
.poly-menu--stack > li > .poly-menu__row > a {
    display: block;
    padding: 15px 0;
    font-size: 1.05rem;
    font-weight: 500;
    color: #10173A;
    border-bottom: 1px solid #EEF1F7;
}

.poly-menu--stack > li > a::after,
.poly-menu--stack > li > .poly-menu__row > a::after { display: none; }

/* --------------------------------------------------------- drawer actions */

.poly-header__panel-actions {
    position: sticky;
    bottom: 0;
    display: grid;
    gap: 8px;
    margin-top: 18px;
    padding: 16px 20px calc(18px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #EEF1F7;
}

.poly-header__panel-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 15px;
    background: #39439B;
    border-radius: 5px;
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.poly-header__panel-cta:hover,
.poly-header__panel-cta:focus-visible { background: #2D3681; color: #fff; }

.poly-header__panel-phone,
.poly-header__panel-mail {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 13px;
    border: 1px solid #CBD3E4;
    border-radius: 5px;
    color: #10173A;
    font-size: .9rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: border-color .28s ease, color .28s ease;
}

.poly-header__panel-phone:hover,
.poly-header__panel-mail:hover { border-color: #39439B; color: #39439B; }

.poly-header__panel-phone .poly-icon,
.poly-header__panel-mail .poly-icon {
    width: 17px;
    height: 17px;
    flex: none;
    color: #39439B;
}

/* Scroll lock for the page behind the drawer. */
body.poly-drawer-open { overflow: hidden; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
    .poly-header__nav { display: none; }

    /* The phone block folds into the panel, the quote CTA stays reachable. */
    .poly-header__phone { display: none; }

    .poly-header__actions { margin-inline-start: auto; }

    .poly-header__toggle {
        display: inline-flex;
        margin-inline-start: 0;
    }

    .poly-header.is-open { background: #fff; }

    /* The logo is stacked (mark above the wordmark), so it needs more height
       than the desktop clamp gives it to stay legible on small screens. */
    :root { --poly-header-h: 116px; }
    .poly-header__logo { height: 104px; }
    .poly-header__panel-logo { height: 80px; }
}

@media (prefers-reduced-motion: reduce) {
    .poly-menu > li > a::after,
    .poly-header__toggle-glyph,
    .poly-header__panel,
    .poly-header__backdrop,
    .poly-mega { transition-duration: .001ms !important; }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.poly-icon-arrow { width: 17px; height: 17px; flex: none; }
.poly-icon-chevron { width: 15px; height: 15px; flex: none; }

/* ==========================================================================
   Header call to action — sits next to the phone block
   ========================================================================== */

.poly-header__cta {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .78rem 1.35rem;
    background: #39439B;
    border: 1px solid #39439B;
    border-radius: 4px;
    color: #fff;
    font-size: .9125rem;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}

.poly-header__cta:hover,
.poly-header__cta:focus-visible {
    background: #2D3681;
    border-color: #2D3681;
    color: #fff;
}

.poly-header__cta .poly-icon-arrow { transition: transform .32s cubic-bezier(.16,1,.3,1); }
.poly-header__cta:hover .poly-icon-arrow { transform: translateX(3px); }

/* ==========================================================================
   Mega menu
   ========================================================================== */

.poly-menu > li { display: flex; align-items: center; gap: 2px; }

/* Full height hit area for the desktop row only; the mobile panel stacks. */
.poly-menu:not(.poly-menu--stack) { align-items: stretch; }

.poly-menu__sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: transparent;
    border: 0;
    border-radius: 3px;
    color: #2A3355;
    cursor: pointer;
    transition: color .28s ease, transform .32s cubic-bezier(.16,1,.3,1);
}

.poly-menu > li:hover > .poly-menu__sub-toggle,
.poly-menu__item--mega.is-open > .poly-menu__sub-toggle { color: #39439B; }

.poly-menu__item--mega:hover > .poly-menu__sub-toggle .poly-icon-chevron,
.poly-menu__item--mega:focus-within > .poly-menu__sub-toggle .poly-icon-chevron,
.poly-menu__item--mega.is-open > .poly-menu__sub-toggle .poly-icon-chevron { transform: rotate(180deg); }

.poly-menu__item--mega.is-closed > .poly-menu__sub-toggle .poly-icon-chevron { transform: none; }

.poly-menu__sub-toggle .poly-icon-chevron { transition: transform .32s cubic-bezier(.16,1,.3,1); }

/* ------------------------------------------------------------ mega panel */

.poly-mega {
    position: absolute;
    inset: 100% 0 auto;
    z-index: 10;
    background: #fff;
    border-top: 1px solid #E2E7F1;
    box-shadow: 0 34px 64px -44px rgba(11, 17, 48, .6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity .26s ease, transform .34s cubic-bezier(.16,1,.3,1), visibility .34s;
}

/* Hover and focus-within keep the panel usable without JavaScript; the
   is-open class is what the toggle button drives. */
.poly-menu__item--mega:hover > .poly-mega,
.poly-menu__item--mega:focus-within > .poly-mega,
.poly-menu__item--mega.is-open > .poly-mega {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

/* Escape closes the panel while focus is still inside it. */
.poly-menu__item--mega.is-closed > .poly-mega {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
}

.poly-mega__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(258px, .85fr);
    gap: clamp(28px, 3.2vw, 60px);
    width: 100%;
    max-width: 1290px;
    margin-inline: auto;
    padding: clamp(26px, 2.4vw, 40px) clamp(20px, 5.2vw, 72px);
}

.poly-mega__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px clamp(16px, 2vw, 34px);
    align-content: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.poly-mega__list > li { display: block; }

.poly-mega__list > li > a {
    display: block;
    padding: 12px 14px;
    border-radius: 5px;
    color: #2A3355;
    text-decoration: none;
    transition: background-color .26s ease, color .26s ease;
}

.poly-mega__list > li > a:hover,
.poly-mega__list > li > a:focus-visible {
    background: #F4F6FB;
    color: #39439B;
}

.poly-mega__link-title {
    display: block;
    font-size: .975rem;
    font-weight: 600;
    letter-spacing: -.005em;
}

.poly-mega__link-desc {
    display: block;
    margin-top: 3px;
    color: #6A7391;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.45;
}

/* ------------------------------------------------------------ promo card */

.poly-mega__promo {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #F4F6FB;
    border: 1px solid #E2E7F1;
    border-radius: 8px;
}

.poly-mega__promo-media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #E2E7F1;
}

.poly-mega__promo-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.16,1,.3,1);
}

.poly-mega__promo:hover .poly-mega__promo-image { transform: scale(1.04); }

.poly-mega__promo-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding: 20px 22px 22px;
}

.poly-mega__promo-title {
    font-family: "SUSE", "DM Sans", sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.015em;
    color: #10173A;
}

.poly-mega__promo-text {
    color: #5A6382;
    font-size: .85rem;
    line-height: 1.5;
}

.poly-mega__promo-cta {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: .35rem;
    padding: .72rem 1.15rem;
    background: #39439B;
    border-radius: 4px;
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color .3s ease;
}

.poly-mega__promo-cta:hover,
.poly-mega__promo-cta:focus-visible { background: #2D3681; color: #fff; }

.poly-mega__promo-cta .poly-icon-arrow { transition: transform .32s cubic-bezier(.16,1,.3,1); }
.poly-mega__promo-cta:hover .poly-icon-arrow { transform: translateX(3px); }

/* ==========================================================================
   Mobile panel — accordion submenus
   ========================================================================== */

.poly-menu--stack > li { display: block; }

.poly-menu__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #EEF1F7;
}

.poly-menu--stack > li > .poly-menu__row > a { flex: 1; border-bottom: 0; }

.poly-menu__row .poly-menu__sub-toggle {
    width: 40px;
    height: 40px;
    flex: none;
}

.poly-menu__row .poly-menu__sub-toggle[aria-expanded="true"] .poly-icon-chevron { transform: rotate(180deg); }

.poly-submenu {
    margin: 0;
    padding: 4px 0 12px 14px;
    list-style: none;
    border-bottom: 1px solid #EEF1F7;
}

.poly-submenu[hidden] { display: none; }

.poly-submenu > li > a {
    display: block;
    padding: 11px 0;
    color: #4A5372;
    font-size: .95rem;
    text-decoration: none;
}

.poly-submenu > li > a:hover { color: #39439B; }

.poly-submenu__promo { margin-top: 12px; }

.poly-submenu__promo .poly-mega__promo-media { display: none; }

.poly-submenu__promo .poly-mega__promo-body { padding: 16px 18px 18px; }

@media (max-width: 900px) {
    .poly-mega__inner { grid-template-columns: minmax(0, 1fr); }
    .poly-mega__promo { flex-direction: row; align-items: center; }
    .poly-mega__promo-media { width: 40%; aspect-ratio: 4 / 3; }
}

@media (max-width: 560px) {
    .poly-header__cta { display: none; }
}

/* Placeholder shown until an editor picks a mega menu image. */
.poly-mega__promo-media--empty {
    background: linear-gradient(135deg, #39439B 0%, #5A66C4 55%, #8E97DC 100%);
}