/* ===== Project Semicolon Hero 1.19.10 ===== */
.pshero,
.pshero * { box-sizing: border-box; }

.pshero {
    --pshero-blue: #1687e5;
    --pshero-ink: #17182b;
    --pshero-white: #fff;
    width: 100%;
    position: relative;
    font-family: inherit;
}

.pshero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(310px, 33%) minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    min-height: 600px;
}

.pshero__pillar-panel {
    position: relative;
    z-index: 10;
    min-width: 0;
    min-height: 600px;
    padding: clamp(54px, 6vw, 92px) clamp(28px, 4.8vw, 76px) 54px clamp(28px, 4.8vw, 76px);
    background: #fff;
}

.pshero__pillar-words {
    color: var(--pshero-ink);
    font-family: inherit;
    font-size: clamp(48px, 5.15vw, 82px);
    line-height: .93;
    font-weight: 400;
    letter-spacing: -.055em;
    position: relative;
    z-index: 2;
}

.pshero__pillar-words > div { white-space: nowrap; }
.pshero__pillar-words > div:last-child::after {
    content: '';
    display: inline-block;
    width: .095em;
    height: .095em;
    margin-left: .055em;
    margin-bottom: .08em;
    border-radius: 1px;
    background: var(--pshero-blue);
}

.pshero__story-stage {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 600px;
}

.pshero__story-stage > .pssa {
    width: 100%;
    height: 100%;
}

/* The selector is an overlay belonging to the pillar panel. It never changes
 * the accordion's geometry or content. Its width is reduced by JS only when
 * the existing story content would otherwise be covered. */
.pshero-selector {
    position: absolute;
    z-index: 30;
    left: clamp(28px, 4.8vw, 76px);
    bottom: 62px;
    width: 500px;
    height: 80px;
    grid-template-columns: minmax(0, 1fr) 80px;
    background-color: #fff;
    max-width: calc(100vw - 24px);
    display: grid;
    box-shadow: 0 18px 45px rgba(17, 24, 39, .10);
}

.pshero-selector__trigger,
.pshero-selector__go,
.pshero-selector__option {
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.pshero-selector__trigger {
    position: relative;
    width: 100%;
    height: 80px;
    padding: 10px 62px 0 28px;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: var(--pshero-ink);
    text-align: left;
    font-size: clamp(17px, 1.35vw, 21px);
    font-weight: 400;
    letter-spacing: -.02em;
    cursor: pointer;
}

.pshero-selector__value { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pshero-selector__chevron {
    position: absolute;
    right: 27px;
    top: 50%;
    width: 11px;
    height: 11px;
    border-right: 2px solid var(--pshero-ink);
    border-bottom: 2px solid var(--pshero-ink);
    transform: translateY(-65%) rotate(45deg);
    transition: transform 180ms ease;
}

.pshero-selector.is-open .pshero-selector__chevron { transform: translateY(-35%) rotate(225deg); }

.pshero-selector__go {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 300;
    border: 0;
    border-radius: 0;
    background: var(--pshero-blue);
    color: #fff;
    font-size: clamp(18px, 1.55vw, 23px);
    cursor: pointer;
    transition: background-color 160ms ease, opacity 160ms ease;
}

.pshero-selector__go[aria-disabled="true"] { opacity: .95; cursor: not-allowed; }
.pshero-selector__go[aria-disabled="false"]:hover,
.pshero-selector__go[aria-disabled="false"]:focus-visible { background: #0879d7; color: #fff; text-decoration: none; }

.pshero-selector__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    bottom: auto;
    z-index: 50;
    padding: 8px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 28px -10px rgba(17, 24, 39, .16);
    max-height: 360px;
    overflow-y: auto;
}

.pshero-selector__option {
    display: block;
    width: 100%;
    min-height: 66px;
    padding: 12px 16px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: var(--pshero-ink);
    text-align: left;
    cursor: pointer;
}
.pshero-selector__option-label {
    display: block;
    font-size: 17px;
    line-height: 1.15;
    font-weight: 600;
}
.pshero-selector__option-subtext {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 400;
    color: #667085;
}
.pshero-selector__value.has-selection {
    white-space: normal;
    overflow: visible;
}
.pshero-selector__value-label {
    display: block;
    font-size: 17px;
    line-height: 1.1;
    font-weight: 600;
}
.pshero-selector__value-subtext {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 400;
    color: #667085;
}
.pshero-selector__option:hover,
.pshero-selector__option:focus-visible,
.pshero-selector__option.is-selected { background: #f1f5f9; }

.pshero-selector__trigger:focus-visible,
.pshero-selector__go:focus-visible,
.pshero-selector__option:focus-visible {
    outline: 3px solid rgba(22,135,229,.32);
    outline-offset: -3px;
}

.pshero-pillar-page { width: 100%; }
.pshero-pillar-nav { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px 0; }
.pshero-pillar-nav__link { color: var(--pshero-ink); text-decoration: none; font-weight: 500; }
.pshero-pillar-nav__link.is-active { color: var(--pshero-blue); }
.pshero-pillar-page__content { width: 100%; }

@media (max-width: 1100px) and (min-width: 681px) {
    .pshero__grid { grid-template-columns: minmax(260px, 32%) minmax(0, 1fr); }
    .pshero__pillar-panel { padding-left: 34px; padding-right: 34px; }
    .pshero__pillar-words { font-size: clamp(42px, 5vw, 62px); }
    .pshero-selector { left: 34px; width: 500px; grid-template-columns: minmax(0, 1fr) 112px; }
    .pshero-selector__menu { right: 0; }
}

@media (max-width: 680px) {
    /* Flatten the pillar wrapper only on mobile so its two children can be
     * ordered around the story stage: words -> stories -> selector. Desktop
     * markup and overlay behavior remain untouched. */
    .pshero__grid {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .pshero__pillar-panel {
        display: contents;
        min-height: 0;
        padding: 0;
    }
    .pshero__pillar-words {
        order: 1;
        padding: 38px 22px 28px;
        background: #fff;
        font-size: clamp(42px, 13vw, 64px);
        line-height: .92;
    }
    .pshero__pillar-words > div { white-space: normal; }
    .pshero__story-stage {
        order: 2;
        min-height: 0;
    }
    .pshero-selector {
        order: 3;
        position: relative;
        left: auto;
        bottom: auto;
        width: auto;
        max-width: none;
        height: 64px;
        margin: 28px 22px 28px;
        grid-template-columns: minmax(0, 1fr) 84px;
        box-shadow: 0 12px 30px rgba(17,24,39,.10);
    }
    .pshero-selector__trigger,
    .pshero-selector__go { height: 64px; }
    .pshero-selector__trigger { padding: 0 44px 0 18px; font-size: 16px; min-width: 0; }
    .pshero-selector__chevron { right: 20px; width: 9px; height: 9px; }
    .pshero-selector__go { font-size: 17px; }
    .pshero-selector__menu { right: 0; top: calc(100% + 8px); bottom: auto; }
}

/* Hero interaction isolation: the selector is interactive; the pillar panel
 * itself must never sit above the story accordion's hit area. */
.pshero__pillar-panel { pointer-events: none; }
.pshero__pillar-words { pointer-events: none; }
.pshero-selector { pointer-events: auto; }

/* v1.19.5 selector refinements */
.pshero-selector__value.has-selection .pshero-selector__value-label {
    color: #0B7AE1;
}
.pshero-selector__option:hover .pshero-selector__option-label,
.pshero-selector__option:focus-visible .pshero-selector__option-label,
.pshero-selector__option.is-selected .pshero-selector__option-label {
    color: #0B7AE1;
}


/* ===== v1.19.7 mobile containment fixes ===== */
@media (max-width: 680px) {
    .pshero__pillar-panel { overflow: visible; }
    .pshero-selector__value { min-width: 0; }
    .pshero-selector__go { min-width: 0; width: 84px; }
}

/* ===== v1.19.8 mobile selector stacking fix =====
 * On mobile the open menu is temporarily portaled to <body> by hero JS.
 * That lets it escape Elementor section/container stacking contexts and
 * overflow clipping, so following sections cannot paint over the dropdown. */
.pshero-selector__menu--portal,
.pshero-selector__menu--portal * {
    box-sizing: border-box;
}

.pshero-selector__menu--portal {
    --pshero-blue: #1687e5;
    --pshero-ink: #17182b;
    --pshero-white: #fff;
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 2147483000 !important;
    font-family: inherit;
}