.option-card:is(button) {
    width: 100%;
    border: 0;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.service-modal[hidden] { display: none; }
.modal-open { overflow: hidden; }

.service-modal {
    position: fixed;
    z-index: 300;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    display: block;
    background: rgba(3, 11, 25, .86);
    backdrop-filter: blur(10px);
}

.service-modal > section {
    position: relative;
    width: min(980px, 100%);
    max-height: min(900px, calc(100svh - 48px));
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 24px;
    background: #f5f1e7;
    color: var(--ink);
    box-shadow: 0 35px 120px rgba(0, 0, 0, .52);
    scrollbar-gutter: stable;
}

.modal-close {
    position: absolute;
    z-index: 4;
    right: 20px;
    top: 20px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 27px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.modal-close:hover,
.modal-close:focus-visible { background: #ff642d; }

.modal-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(36px, 6vw, 68px);
    padding-right: clamp(80px, 10vw, 120px);
    background: #061830;
    color: #fff;
}

.modal-hero:after {
    position: absolute;
    right: -100px;
    bottom: -160px;
    width: 340px;
    height: 340px;
    border: 68px solid rgba(113, 214, 255, .09);
    border-radius: 50%;
    content: "";
}

.modal-hero .eyebrow {
    position: relative;
    z-index: 1;
    color: #72d8ff;
}

.service-modal .modal-hero h2 {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 18px 0 20px;
    color: #fff;
    font-size: clamp(2.7rem, 6vw, 5.2rem) !important;
    line-height: .92 !important;
    letter-spacing: -.06em;
    text-wrap: balance;
}

.modal-intro {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0;
    color: #c5d2df;
    font-size: 1.05rem;
    line-height: 1.7;
}

.modal-body { padding: clamp(28px, 5vw, 56px); }
.modal-price { display: block; margin: 0 0 25px; color: var(--orange); font-size: 15px; }

.modal-basis {
    display: grid;
    grid-template-columns: minmax(190px, .55fr) minmax(240px, .8fr) minmax(280px, 1.3fr);
    gap: 22px;
    align-items: center;
    margin-bottom: 32px;
    padding: 22px 24px;
    border-left: 6px solid #ff642d;
    border-radius: 0 14px 14px 0;
    background: #fff;
    box-shadow: 0 12px 35px rgba(6, 24, 48, .07);
}

.modal-basis span,
.modal-included > header span,
.modal-steps > span {
    color: #1761dc;
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.modal-basis strong { font-size: 1.15rem; line-height: 1.25; }
.modal-basis p { margin: 0; color: #53677c; font-size: .88rem; line-height: 1.6; }

.modal-context-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 38px;
}

.modal-context-grid > section {
    padding: 24px;
    border: 1px solid #c9d7e4;
    border-radius: 14px;
    background: rgba(255, 255, 255, .55);
}

.modal-context-grid small {
    display: block;
    margin-bottom: 11px;
    color: #ff642d;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.modal-context-grid p { margin: 0; color: #435b72; line-height: 1.65; }

.modal-included {
    overflow: hidden;
    border: 1px solid #c4d2df;
    border-radius: 18px;
    background: #fff;
}

.modal-included > header {
    display: grid;
    grid-template-columns: .65fr 1.35fr;
    gap: 25px;
    align-items: end;
    padding: 28px 30px;
    background: #eef6ff;
}

.modal-included > header h3 {
    margin: 0;
    font-size: clamp(1.65rem, 3.2vw, 2.65rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em;
}

.modal-included-groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.modal-included-groups > section {
    min-width: 0;
    padding: 28px;
    border-top: 1px solid #d3deE8;
}

.modal-included-groups > section + section { border-left: 1px solid #d3dee8; }
.modal-included h4 { margin: 0 0 18px; font-size: 1.03rem; }

.service-modal .modal-included ul,
.service-modal .modal-item-list {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}

.service-modal .modal-included li,
.service-modal .modal-item-list li {
    position: relative;
    padding: 0 0 12px 20px;
    border: 0;
    color: #53677c;
    font-size: .88rem;
    line-height: 1.5;
}

.service-modal .modal-included li:before,
.service-modal .modal-item-list li:before {
    position: absolute;
    left: 0;
    top: .13em;
    color: #1761dc;
    font-weight: 900;
    content: "✓";
}

.service-modal .modal-item-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 30px;
    margin: 30px 0;
    padding: 25px;
    border: 1px solid #c4d2df;
    border-radius: 14px;
    background: #fff;
}

.modal-steps { margin-top: 38px; }
.modal-steps ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.modal-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 21px; border: 1px solid #c8d6e3; border-radius: 13px; background: rgba(255, 255, 255, .56); }
.modal-steps b { color: #ff642d; font-size: .72rem; }
.modal-steps strong { display: block; margin-bottom: 8px; font-size: .94rem; }
.modal-steps p { margin: 0; color: #53677c; font-size: .82rem; line-height: 1.55; }

.modal-growth-note { margin: 34px 0 0; padding: 23px 25px; border-left: 5px solid var(--orange); background: #fff; color: var(--ink); }
.modal-growth-note strong { display: block; font-size: 1rem; }
.modal-growth-note p { margin: 8px 0 0; color: #53677c; line-height: 1.65; }

.service-modal .modal-explanations { margin-top: 34px; border-top: 1px solid var(--line); }
.service-modal .modal-explanations details { margin: 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.service-modal .modal-explanations summary { display: flex; min-height: 0; align-items: center; justify-content: space-between; gap: 22px; padding: 20px 0; color: var(--ink); font-size: .96rem; font-weight: 900; line-height: 1.35; cursor: pointer; list-style: none; }
.service-modal .modal-explanations summary::-webkit-details-marker { display: none; }
.service-modal .modal-explanations summary span { position: relative; flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid #aab8c6; border-radius: 50%; }
.service-modal .modal-explanations summary span:before,
.service-modal .modal-explanations summary span:after { position: absolute; left: 8px; top: 12px; width: 10px; height: 2px; background: var(--ink); content: ""; transition: transform .2s ease; }
.service-modal .modal-explanations summary span:after { transform: rotate(90deg); }
.service-modal .modal-explanations details[open] summary span:after { transform: rotate(0); }
.service-modal .modal-explanations details > p { margin: 0; padding: 0 48px 22px 0; color: #53677c; font-size: .94rem; line-height: 1.7; }

.modal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 34px; padding-top: 25px; border-top: 1px solid #c7d3de; }
.modal-actions a { padding: 14px 18px; border-radius: 99px; background: #061830; color: #fff; font-size: 11px; font-weight: 900; text-decoration: none; }
.modal-actions a:first-child { background: var(--orange); }
.modal-actions button { border: 0; background: none; border-bottom: 1px solid currentColor; padding: 8px 0; font-weight: 900; cursor: pointer; }
.modal-actions .request-add-button { margin: 0; }
.modal-actions .modal-close-link { padding: 8px 0; border-radius: 0; border-bottom: 1px solid currentColor; background: none; color: var(--ink); }

@media (max-width: 760px) {
    .service-modal { padding: 10px; }
    .service-modal > section { max-height: calc(100svh - 20px); border-radius: 17px; }
    .modal-hero { padding: 34px 24px; }
    .service-modal .modal-hero h2 {
        font-size: clamp(2.15rem, 10vw, 3rem) !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
        overflow-wrap: normal;
    }
    .modal-body { padding: 25px 20px 30px; }
    .modal-basis,
    .modal-context-grid,
    .modal-included > header,
    .modal-included-groups,
    .modal-steps ol { grid-template-columns: 1fr; }
    .modal-included-groups > section + section { border-left: 0; }
    .modal-actions { align-items: stretch; flex-direction: column; }
    .modal-actions a,
    .modal-actions .request-add-button { justify-content: center; width: 100%; text-align: center; }
    .modal-actions .modal-close-link { width: max-content; align-self: center; }
    .service-modal .modal-item-list { grid-template-columns: 1fr; }
    .service-modal .modal-explanations details > p { padding-right: 0; }
}