/*
 * First-screen flow cards.
 * Keep the default view extremely simple, then reveal an outside dropdown-style
 * description on hover/focus without changing the outer card borders.
 */

.boston .bos-wrap {
    width: min(calc(100% - clamp(18px, 3.2vw, 44px)), 1500px) !important;
}

.boston .bos-head {
    transition:
        opacity 210ms ease,
        background-color 210ms ease,
        box-shadow 210ms ease,
        filter 210ms ease,
        backdrop-filter 210ms ease,
        -webkit-backdrop-filter 210ms ease !important;
}

.boston.bos-at-top .bos-head {
    opacity: 1;
    background: rgba(8, 16, 24, 0.72) !important;
    border-color: transparent !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.18) !important;
    filter: none;
}

.boston:not(.bos-at-top) .bos-head {
    opacity: 0.22;
    background: rgba(8, 16, 24, 0.62) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    filter: saturate(0.74);
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.boston:not(.bos-at-top) .bos-head:hover {
    opacity: 1;
    background: rgba(8, 16, 24, 0.72) !important;
    border-color: transparent !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18) !important;
    filter: none;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.boston:not(.bos-at-top) .bos-head:focus-within:not(:hover) {
    opacity: 0.22;
}

.boston:not(.bos-at-top) .bos-head:focus-within:hover {
    opacity: 1;
}

.boston .bos-start-panel {
    overflow: visible;
}

.boston .bos-start-heading {
    margin-bottom: clamp(18px, 2.5svh, 30px) !important;
}

.boston .bos-choice-grid {
    overflow: visible;
}

.boston .bos-start-panel .bos-choice-card {
    min-height: clamp(138px, 18svh, 210px) !important;
    justify-content: center;
    isolation: isolate;
    overflow: visible !important;
    padding: clamp(18px, 2.4vw, 30px) !important;
}

.boston .bos-start-panel .bos-choice-card::before {
    width: clamp(42px, 4vw, 70px) !important;
    height: 6px !important;
    margin-bottom: clamp(14px, 1.8svh, 20px) !important;
}

.boston .bos-start-panel .bos-choice-card > .bos-card-label {
    margin-bottom: clamp(8px, 1svh, 12px) !important;
    font-size: clamp(0.62rem, 0.72vw, 0.78rem) !important;
    opacity: 0.86;
}

.boston .bos-start-panel .bos-choice-card > h3 {
    margin: 0 !important;
    color: color-mix(in srgb, var(--card-accent, #ff8a3d) 46%, #f4f1ea) !important;
    font-size: clamp(1.85rem, 3.2vw, 4.2rem) !important;
    font-weight: 950 !important;
    letter-spacing: -0.08em !important;
    line-height: 0.86 !important;
    text-wrap: balance;
}

.boston .bos-choice-solve > h3 {
    letter-spacing: -0.1em !important;
}

.boston .bos-choice-opportunity > h3 {
    letter-spacing: -0.075em !important;
}

.boston .bos-choice-experience > h3 {
    letter-spacing: -0.085em !important;
}

.boston .bos-choice-not-sure > h3 {
    letter-spacing: -0.09em !important;
}

.boston .bos-start-panel .bos-choice-card:hover > h3,
.boston .bos-start-panel .bos-choice-card:focus-visible > h3,
.boston .bos-start-panel .bos-choice-card:focus-within > h3 {
    color: #f4f1ea !important;
}

.boston .bos-start-panel .bos-choice-card > p,
.boston .bos-start-panel .bos-choice-card > .bos-choice-action {
    display: none !important;
}

.bos-choice-drawer {
    position: fixed;
    top: calc(100% + 10px);
    left: 10px;
    right: auto;
    width: min(300px, calc(100vw - 28px));
    z-index: 1200;
    padding: 13px 13px 12px;
    border: 1px solid color-mix(in srgb, var(--card-accent, #ff8a3d) 28%, rgba(255, 255, 255, 0.12));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--card-accent, #ff8a3d) 12%, transparent), rgba(8, 16, 24, 0.40)),
        rgba(8, 16, 24, 0.82);
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.28);
    color: #d8d1c7;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-5px);
    transition:
        opacity 120ms ease,
        transform 120ms ease,
        border-color 120ms ease,
        background-color 120ms ease;
}

.bos-choice-drawer.is-active {
    opacity: 1;
    transform: translateY(0);
}

.bos-choice-inline {
    display: none;
}

.bos-choice-drawer strong,
.bos-choice-drawer span {
    display: block;
    color: var(--card-accent, #ff8a3d);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.bos-choice-drawer ul {
    display: grid;
    gap: 3px;
    margin: 7px 0 8px;
    padding: 0;
    list-style: none;
}

.bos-choice-drawer li {
    color: rgba(244, 241, 234, 0.84);
    font-size: 0.76rem;
    line-height: 1.25;
}

.bos-choice-drawer li::before {
    content: "→";
    margin-right: 6px;
    color: var(--card-accent, #ff8a3d);
    opacity: 0.8;
}

@media (min-width: 1081px) and (max-height: 900px) {
    .boston .bos-start-panel .bos-choice-card {
        min-height: clamp(118px, 16svh, 174px) !important;
    }

    .boston .bos-start-panel .bos-choice-card > h3 {
        font-size: clamp(1.62rem, 2.7vw, 3.35rem) !important;
    }
}

@media (max-width: 850px) {
    .bos-choice-floating {
        display: none;
    }

    .bos-choice-inline {
        display: block;
        position: static;
        margin-top: 10px;
        width: auto;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
    }

    .boston .bos-start-panel .bos-choice-card {
        min-height: auto !important;
    }
}

@media (max-width: 520px) {
    .bos-choice-drawer {
        display: none;
    }
}