/* ==========================================================================
   Rich service pages (resources/views/service-page-rich.blade.php)
   Content: config/service_pages_rich.php. Builds on group-pages.css (.gp-* hero,
   headings, "why" band, conversation band) and the .hrc-* FAQ and CTA from
   services.css / common.css. Everything new here is prefixed .sd-
   Colours, fonts, radii and spacing come from the shared tokens in colors.css / global.css;
   each page takes its accent from the group (--ax-tone, set by .gp-tone--*).

   Breakpoints (max-width, desktop-first; the same four values as group-pages.css):
     >= 1200px        desktop      full layouts (3-column grids, 4-step row)
     992px - 1199px   laptop       process steps 2 per row; wide cards keep their row
     768px - 991px    tablet       one-column sections; 2-column card grids
     576px - 767px    large phone  card grids collapse to one column
     <= 575px         phone        vertical timeline, full-width buttons, tighter padding
   The max-width rules are written as 1199.98 / 991.98 / 767.98 / 575.98 so that fractional
   browser zoom cannot land a viewport between two layouts (the same convention as Bootstrap 5).
   ========================================================================== */

.sd-problem,
.sd-covers,
.sd-process,
.sd-calendar,
.sd-scope,
.sd-who { padding: var(--ax-sp-section, 92px) 0; }

/* --- Problem: photo + text ------------------------------------------------------ */

.sd-problem { background: var(--ax-white); }

.sd-problem__grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 64px;
    align-items: center;
}

.sd-problem__fig {
    position: relative;
    margin: 0;
}
/* The supplied artwork already carries its own frame and panels, so show it whole
   (no crop, no second frame) on a soft panel in the accent colour. */
.sd-problem__fig::before {
    content: "";
    position: absolute;
    inset: 12% 2% 2% 6%;
    border-radius: 32px;
    z-index: 0;
}
/* Artwork that brings its own shapes needs no panel behind it */
.sd-problem__fig--bare::before { display: none; }
.sd-problem__fig--bare img { filter: none; }
.sd-problem__fig img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 30px color-mix(in srgb, var(--ax-navy-900) 16%, transparent));
}

/* --- What the officer covers --------------------------------------------------------- */

.sd-covers { background: var(--ax-paper); }

.sd-covers__intro {
    max-width: 780px;
    margin: -22px auto 44px;
    text-align: center;
}

.sd-covers__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.sd-cover {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 26px 26px;
    background: var(--ax-white);
    border: 1px solid var(--ax-line);
    border-radius: 22px;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--ax-navy-900) 7%, transparent);
    transition: transform var(--ax-dur-md) var(--ax-ease),
                border-color var(--ax-dur-md) var(--ax-ease),
                box-shadow var(--ax-dur-md) var(--ax-ease);
}
.sd-cover:hover {
    border-color: var(--ax-tone);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--ax-navy-900) 12%, transparent);
    transform: translateY(-4px);
}

.sd-cover__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    font-size: 21px;
    color: var(--ax-tone);
    background: color-mix(in srgb, var(--ax-tone) 13%, var(--ax-white));
    border-radius: 16px;
}
.sd-cover__body h3 {
    margin: 0 0 8px;
    font-family: var(--ax-font-display);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.015em;
    color: var(--ax-navy-900);
}
.sd-cover__body p {
    margin: 0;
    font-size: .98rem;
    line-height: 1.75;
    color: var(--ax-ink-soft);
}

/* The last card (senior oversight) spans the full row on a navy ground */
.sd-cover--wide {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 30px 34px;
    background: linear-gradient(120deg, var(--ax-navy-900) 0%, var(--ax-navy-800) 55%, var(--ax-navy-600) 100%);
    border-color: transparent;
}
.sd-cover--wide .sd-cover__ico {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    font-size: 24px;
    color: var(--ax-white);
    background: var(--ax-tone);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--ax-tone) 45%, transparent);
}
.sd-cover--wide .sd-cover__body h3 { color: var(--ax-white); }
.sd-cover--wide .sd-cover__body p { color: color-mix(in srgb, var(--ax-white) 84%, transparent); font-size: 1.04rem; }

.sd-covers__foot {
    margin-top: 44px;
    text-align: center;
}
.sd-covers__foot p {
    max-width: 720px;
    margin: 0 auto 22px;
    font-size: 1.04rem;
    line-height: 1.75;
    color: var(--ax-ink);
}
.sd-covers__foot .hrc-btn { margin-top: 0; }

/* --- Process: four numbered steps joined by a line --------------------------------------- */

.sd-process { background: var(--ax-white); }

.sd-process__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sd-step { position: relative; padding-top: 28px; }

/* Dashed connector from this step's node to the next one's */
.sd-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 50%;
    width: calc(100% + 22px);
    border-top: 2px dashed color-mix(in srgb, var(--ax-tone) 45%, transparent);
}

.sd-step__node {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    transform: translateX(-50%);
    font-family: var(--ax-font-display);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ax-white);
    background: var(--ax-tone);
    border-radius: 50%;
    box-shadow: 0 0 0 6px var(--ax-white), 0 10px 22px color-mix(in srgb, var(--ax-tone) 40%, transparent);
}

.sd-step__card {
    height: 100%;
    padding: 46px 22px 26px;
    text-align: center;
    background: var(--ax-white);
    border: 1px solid var(--ax-line);
    border-radius: 22px;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--ax-navy-900) 7%, transparent);
}
.sd-step__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    font-size: 18px;
    color: var(--ax-tone);
    background: color-mix(in srgb, var(--ax-tone) 13%, var(--ax-white));
    border-radius: 14px;
}
.sd-step__card h3 {
    margin: 0 0 10px;
    font-family: var(--ax-font-display);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--ax-navy-900);
}
.sd-step__card p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.75;
    color: var(--ax-ink-soft);
}

/* --- Why a firm: three cards in the shared dark band ---------------------------------------- */

.gp-why__grid.gp-why__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- Statutory dates: one card per authority ----------------------------------------------------------- */

.sd-calendar { background: var(--ax-white); }

.sd-calendar__intro,
.sd-process__intro {
    max-width: 780px;
    margin: -22px auto 44px;
    text-align: center;
}

.sd-calendar__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

/* Each authority takes its own accent from the shared --ax-val-* tokens. */
.sd-due:nth-child(6n+1) { --ax-due: var(--ax-val-blue); }
.sd-due:nth-child(6n+2) { --ax-due: var(--ax-val-teal); }
.sd-due:nth-child(6n+3) { --ax-due: var(--ax-val-purple); }
.sd-due:nth-child(6n+4) { --ax-due: var(--ax-val-orange); }
.sd-due:nth-child(6n+5) { --ax-due: var(--ax-val-red); }
.sd-due:nth-child(6n+6) { --ax-due: var(--ax-val-indigo); }

.sd-due {
    padding: 26px 26px 28px;
    background: var(--ax-white);
    border: 1px solid var(--ax-line);
    border-top: 5px solid var(--ax-due);
    border-radius: 22px;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--ax-navy-900) 7%, transparent);
    transition: transform var(--ax-dur-md) var(--ax-ease),
                box-shadow var(--ax-dur-md) var(--ax-ease);
}
.sd-due:hover {
    box-shadow: 0 18px 40px color-mix(in srgb, var(--ax-navy-900) 12%, transparent);
    transform: translateY(-4px);
}
.sd-due__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.sd-due__ico {
    display: inline-flex;
    flex: 0 0 50px;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    font-size: 20px;
    color: var(--ax-due);
    background: color-mix(in srgb, var(--ax-due) 13%, var(--ax-white));
    border-radius: 15px;
}
.sd-due__head h3 {
    margin: 0;
    font-family: var(--ax-font-display);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ax-navy-900);
}
.sd-due p {
    margin: 0;
    font-size: .98rem;
    line-height: 1.75;
    color: var(--ax-ink);
}

.sd-calendar__note,
.sd-sectors__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 760px;
    margin: 32px auto 0;
    padding: 16px 24px;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--ax-navy-900);
    background: color-mix(in srgb, var(--ax-tone) 8%, var(--ax-white));
    border: 1px solid color-mix(in srgb, var(--ax-tone) 22%, var(--ax-line));
    border-radius: 16px;
}
.sd-calendar__note i,
.sd-sectors__note i { flex: 0 0 auto; font-size: 20px; color: var(--ax-tone); }

/* --- What a consultant needs: heading + checklist --------------------------------------------- */

.sd-scope { background: var(--ax-paper); }

.sd-scope__grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 28px;
    align-items: stretch;
}

/* Left: branded panel holding the heading */
.sd-scope__copy {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 44px 40px;
    background: linear-gradient(160deg, var(--ax-navy-900) 0%, var(--ax-navy-800) 60%, var(--ax-navy-700) 100%);
    border-radius: 28px;
    box-shadow: 0 20px 44px color-mix(in srgb, var(--ax-navy-900) 22%, transparent);
}
.sd-scope__copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -90px;
    right: -90px;
    width: 300px;
    height: 300px;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--ax-tone) 55%, transparent), transparent);
}
.sd-scope__copy::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(color-mix(in srgb, var(--ax-white) 15%, transparent) 1.2px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(205deg, #000 0%, transparent 55%);
    mask-image: linear-gradient(205deg, #000 0%, transparent 55%);
}
.sd-scope__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 24px;
    font-size: 27px;
    color: var(--ax-white);
    background: var(--ax-tone);
    border-radius: 20px;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--ax-tone) 45%, transparent),
                inset 0 0 0 1px color-mix(in srgb, var(--ax-white) 25%, transparent);
}
.sd-scope__copy .gp-h2 { margin-bottom: 0; }
.sd-scope__intro {
    margin: 16px 0 0;
    font-size: 1.04rem;
    line-height: 1.7;
    color: color-mix(in srgb, var(--ax-white) 84%, transparent);
}

/* Right: one card per item */
.sd-scope__list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sd-scope__list li {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    background: var(--ax-white);
    border: 1px solid var(--ax-line);
    border-left: 4px solid var(--ax-tone);
    border-radius: 18px;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--ax-navy-900) 6%, transparent);
    transition: transform var(--ax-dur-sm) var(--ax-ease),
                box-shadow var(--ax-dur-sm) var(--ax-ease);
}
.sd-scope__list li:hover {
    box-shadow: 0 14px 32px color-mix(in srgb, var(--ax-navy-900) 11%, transparent);
    transform: translateX(4px);
}
.sd-scope__ico {
    display: inline-flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 19px;
    color: var(--ax-tone);
    background: color-mix(in srgb, var(--ax-tone) 13%, var(--ax-white));
    border-radius: 14px;
}
.sd-scope__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--ax-ink);
}
.sd-scope__check {
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--ax-tone);
}

/* --- One record: dark feature card with a three-step flow ------------------------------------------- */

.sd-record { padding: var(--ax-sp-section, 92px) 0; background: var(--ax-paper); }

.sd-record__card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 48px;
    align-items: center;
    padding: 56px 56px;
    background: linear-gradient(135deg, var(--ax-navy-900) 0%, var(--ax-navy-800) 55%, var(--ax-navy-600) 100%);
    border-radius: 32px;
    box-shadow: 0 30px 60px color-mix(in srgb, var(--ax-navy-900) 28%, transparent);
}
.sd-record__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(460px 300px at 92% 10%, color-mix(in srgb, var(--ax-cyan-500) 26%, transparent), transparent 70%),
        radial-gradient(380px 260px at 4% 100%, color-mix(in srgb, var(--ax-blue-500) 30%, transparent), transparent 70%);
}
.sd-record__copy .gp-h2 { margin-bottom: 16px; }
.sd-record__copy p {
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.85;
    color: color-mix(in srgb, var(--ax-white) 86%, transparent);
}

/* Decorative: attendance, pay and filing as three linked nodes (no text) */
.sd-record__flow {
    display: flex;
    align-items: center;
    justify-content: center;
}
.sd-record__node {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    font-size: 28px;
    color: var(--ax-white);
    background: var(--ax-grad-accent);
    border-radius: 24px;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--ax-cyan-500) 35%, transparent),
                inset 0 0 0 1px color-mix(in srgb, var(--ax-white) 25%, transparent);
}
.sd-record__link {
    flex: 1 1 28px;
    min-width: 20px;
    max-width: 52px;
    border-top: 2px dashed color-mix(in srgb, var(--ax-cyan-300) 55%, transparent);
}

/* --- Who outsources HR --------------------------------------------------------------------------- */

.sd-who { background: var(--ax-white); }
.sd-who__panel {
    max-width: 940px;
    margin: 0 auto;
    padding: 44px 48px;
    background: color-mix(in srgb, var(--ax-tone) 7%, var(--ax-white));
    border: 1px solid color-mix(in srgb, var(--ax-tone) 22%, var(--ax-line));
    border-left: 6px solid var(--ax-tone);
    border-radius: 24px;
}

/* --- Laptop / tablet / phone ----------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    .sd-process__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
    .sd-step:not(:last-child)::before { display: none; }
}

@media (max-width: 991.98px) {
    .sd-problem,
    .sd-covers,
    .sd-process,
    .sd-calendar,
    .sd-scope,
    .sd-who { padding: 56px 0; }

    .sd-problem__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .sd-scope__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .sd-scope__copy { padding: 32px 28px; }
    .sd-problem__fig { max-width: 560px; }

    .sd-covers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-covers__intro,
    .sd-calendar__intro,
    .sd-process__intro { margin-top: -14px; }
    .sd-calendar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .gp-why__grid.gp-why__grid--3 { grid-template-columns: minmax(0, 1fr); }
    .sd-who__panel { padding: 32px 28px; }

    .sd-record { padding: 56px 0; }
    .sd-record__card { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 38px 30px; border-radius: 26px; }
}

@media (max-width: 767.98px) {
    .sd-covers__grid,
    .sd-calendar__grid { grid-template-columns: minmax(0, 1fr); }
    .sd-cover--wide { flex-direction: column; align-items: flex-start; padding: 26px 24px; gap: 16px; }
}

@media (max-width: 575.98px) {
    /* Steps become a vertical timeline */
    .sd-process__list { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
    .sd-step { padding: 0 0 0 72px; }
    .sd-step:not(:last-child)::before {
        display: block;
        top: 56px;
        bottom: -20px;
        left: 27px;
        width: 0;
        border-top: 0;
        border-left: 2px dashed color-mix(in srgb, var(--ax-tone) 45%, transparent);
    }
    .sd-step__node { left: 0; transform: none; }
    .sd-step__card { padding: 22px 20px; text-align: left; }
    .sd-step__ico { margin-bottom: 12px; }

    .sd-scope__copy { padding: 26px 22px; border-radius: 22px; }
    .sd-scope__badge { width: 56px; height: 56px; font-size: 22px; border-radius: 16px; margin-bottom: 18px; }
    .sd-scope__list li { gap: 14px; padding: 14px 16px; }
    .sd-due { padding: 22px 20px 24px; }
    .sd-calendar__note,
    .sd-sectors__note { align-items: flex-start; padding: 14px 16px; }
    .sd-scope__ico { flex-basis: 42px; width: 42px; height: 42px; font-size: 17px; }
    .sd-scope__check { display: none; }
    .sd-who__panel { padding: 26px 20px; border-radius: 20px; }
    .sd-record__card { padding: 28px 20px; border-radius: 22px; }
    .sd-record__node { width: 60px; height: 60px; font-size: 23px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .sd-cover,
    .sd-due,
    .sd-scope__list li { transition: none; }
}

/* ==========================================================================
   Recruitment page additions (optional blocks in service-page-rich.blade.php):
   4-up cover grid, process note, roles panel, brief-only scope panel, sector cards.
   ========================================================================== */

/* --- Cover grid, four across on desktop (8 cards = two even rows) -------------- */
@media (min-width: 1200px) {
    .sd-covers__grid.sd-covers__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sd-covers__grid--4 .sd-cover { padding: 26px 22px 24px; }
}

/* --- Process: closing sentence about the senior consultant ---------------------- */
.sd-process__note {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 880px;
    margin: 40px auto 0;
    padding: 20px 26px;
    font-size: 1.04rem;
    line-height: 1.65;
    color: var(--ax-ink);
    background: color-mix(in srgb, var(--ax-tone) 8%, var(--ax-white));
    border: 1px solid color-mix(in srgb, var(--ax-tone) 22%, var(--ax-line));
    border-left: 5px solid var(--ax-tone);
    border-radius: 18px;
}
.sd-process__note i {
    flex: 0 0 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    font-size: 18px;
    color: var(--ax-white);
    background: var(--ax-tone);
    border-radius: 14px;
}

/* --- Roles and contract types ---------------------------------------------------- */
.sd-roles { padding: var(--ax-sp-section, 92px) 0; background: var(--ax-white); }
.sd-roles__panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 44px;
    background: linear-gradient(120deg, color-mix(in srgb, var(--ax-tone) 9%, var(--ax-white)), var(--ax-white) 70%);
    border: 1px solid color-mix(in srgb, var(--ax-tone) 22%, var(--ax-line));
    border-radius: 26px;
    box-shadow: 0 16px 40px color-mix(in srgb, var(--ax-navy-900) 7%, transparent);
}
.sd-roles__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    font-size: 32px;
    color: var(--ax-white);
    background: linear-gradient(135deg, var(--ax-tone), var(--ax-navy-600));
    border-radius: 24px;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--ax-tone) 38%, transparent);
}
.sd-roles__copy .gp-h2 { margin-bottom: 12px; }
.sd-roles__copy .gp-lead { margin: 0; }

/* --- Scope panel without a checklist (the brief is a single sentence) ------------ */
.sd-scope__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 1000px; margin: 0 auto; }
.sd-scope__grid--solo .sd-scope__copy { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: start; }
.sd-scope__grid--solo .sd-scope__badge { grid-row: 1 / span 2; margin-bottom: 0; }
.sd-scope__grid--solo .sd-scope__intro { max-width: none; margin-top: 12px; font-size: 1.06rem; }

/* --- Sector cards ---------------------------------------------------------------- */
.sd-sectors { padding: 0 0 var(--ax-sp-section, 92px); background: var(--ax-white); }
.sd-sectors__intro { max-width: 760px; margin: 0 auto 30px; text-align: center; font-weight: 700; color: var(--ax-navy-900); }
.sd-sectors__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.sd-sector {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 22px 24px;
    background: var(--ax-white);
    border: 1px solid var(--ax-line);
    border-top: 4px solid var(--ax-tone);
    border-radius: 20px;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--ax-navy-900) 6%, transparent);
    transition: transform var(--ax-dur-md) var(--ax-ease), box-shadow var(--ax-dur-md) var(--ax-ease);
}
.sd-sector:hover { transform: translateY(-4px); box-shadow: 0 18px 38px color-mix(in srgb, var(--ax-navy-900) 11%, transparent); }
.sd-sector:nth-child(even) { --ax-tone: var(--ax-blue-500); }
.sd-sector__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 19px;
    color: var(--ax-tone);
    background: color-mix(in srgb, var(--ax-tone) 13%, var(--ax-white));
    border-radius: 14px;
}
.sd-sector h3 {
    margin: 4px 0 0;
    font-family: var(--ax-font-display);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.015em;
    color: var(--ax-navy-900);
}
.sd-sector p { margin: 0; font-size: .96rem; line-height: 1.65; color: var(--ax-ink-soft); }

@media (max-width: 1199.98px) {
    .sd-sectors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .sd-roles { padding: 56px 0; }
    .sd-sectors { padding-bottom: 56px; }
    .sd-roles__panel { padding: 30px 28px; gap: 24px; }
}
@media (max-width: 767.98px) {
    .sd-roles__panel { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 26px 22px; border-radius: 22px; }
    .sd-roles__badge { width: 64px; height: 64px; font-size: 25px; border-radius: 18px; }
    .sd-scope__grid--solo .sd-scope__copy { grid-template-columns: minmax(0, 1fr); }
    .sd-scope__grid--solo .sd-scope__badge { grid-row: auto; margin-bottom: 18px; }
    .sd-process__note { flex-direction: column; align-items: flex-start; padding: 18px 20px; }
}
@media (max-width: 575.98px) {
    .sd-sectors__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-sector { transition: none; }
}