/* Homepage services accordion. Kept separate from the Services page component. */
.route-home #service.be-services {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 933.6px;
    padding: 96px;
    display: flex;
    flex-direction: column;
    gap: 60px;
    overflow: visible;
    color: #424242;
    background: #fcfcfc;
    font-family: var(--font-family);
}
.be-services__header { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.be-services__eyebrow { margin: 0; display: flex; gap: 5px; color: #f55733; font-size: 18px; font-weight: 300; line-height: 21.6px; }
.be-services__header h2 { width: 100%; margin: 0; font-size: 42px; font-weight: 600; line-height: 42px; letter-spacing: 0; text-transform: uppercase; }
.be-services__list { flex: none; box-shadow: inset 0 1px #d1d1d1; }
.be-service { position: relative; box-shadow: inset 0 -1px #d1d1d1; }
.be-service__toggle {
    width: 100%;
    min-height: 152px;
    padding: 40px 0;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 44px;
    align-items: center;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.be-service__toggle:focus-visible { outline: 2px solid #f55733; outline-offset: -2px; }
.be-service__number { align-self: start; padding-top: 5px; color: #f55733; font-size: 18px; font-weight: 300; line-height: 21.6px; }
.be-service__name { min-width: 0; height: 84px; display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 12px; overflow: visible; }
.be-service__name strong { min-width: 0; max-width: none; flex: 0 1 auto; font-size: clamp(52px, 5.4vw, 80px); font-weight: 800; line-height: 1; letter-spacing: 0; overflow-wrap: normal; white-space: nowrap; text-transform: uppercase; transition: color .25s ease; }
.be-service__name > span { flex: 0 0 auto; padding-bottom: 0; color: #757575; font-size: 18px; font-weight: 300; line-height: 21.6px; white-space: nowrap; }
.be-service__icon { position: relative; width: 44px; height: 44px; border: 1px solid #757575; border-radius: 50%; transition: transform .35s cubic-bezier(.22,1,.36,1), background .25s, border-color .25s; }
.be-service__icon i { position: absolute; top: 50%; left: 50%; width: 18px; height: 1px; background: #757575; transform: translate(-50%, -50%); }
.be-service__icon i:last-child { transform: translate(-50%, -50%) rotate(90deg); }
.be-service:hover .be-service__name strong, .be-service.is-open .be-service__name strong { color: #f55733; }
.be-service.is-open .be-service__icon { transform: rotate(45deg); }
.be-service__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.22,1,.36,1); }
.be-service.is-open .be-service__panel { grid-template-rows: 1fr; }
.be-service__panel-clip { min-height: 0; overflow: hidden; }
.be-service__details { min-height: 148px; padding: 0 30px 40px; display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: 60px; }
.be-service__details > p { margin: 0; font-size: 18px; font-weight: 300; line-height: 27px; }
.be-service__details ul { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(3, 22px); row-gap: 20px; list-style: none; }
.be-service__details li { position: relative; min-width: 0; padding-left: 16px; color: #424242; font-size: 18px; font-weight: 300; line-height: 21.6px; white-space: nowrap; }
.be-service__details li::before { content: ''; position: absolute; top: 8px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #424242; }
.be-service-preview { position: fixed; z-index: 1200; top: 0; left: 0; width: 230px; height: 160px; border-radius: 20px; object-fit: cover; pointer-events: none; opacity: 0; transform: translate3d(calc(var(--preview-x, 0px) - 50%), calc(var(--preview-y, 0px) - 50%), 0) rotate(8deg) scale(.92); transition: opacity .18s ease, transform .28s cubic-bezier(.22,1,.36,1); will-change: transform; }
.be-service-preview.is-visible { opacity: 1; transform: translate3d(calc(var(--preview-x, 0px) - 50%), calc(var(--preview-y, 0px) - 50%), 0) rotate(8deg) scale(1); }

@media (min-width: 810px) and (max-width: 1199.98px) {
    .route-home #service.be-services { min-height: 806px; padding: 96px 32px; }
    .be-services__eyebrow { font-size: 16px; line-height: 19.2px; }
    .be-services__header h2 { font-size: 32px; line-height: 32px; }
    .be-service__toggle { min-height: 123.2px; }
    .be-service__number { padding-top: 0; font-size: 16px; line-height: 19.2px; }
    .be-service__name { height: 52px; }
    .be-service__name strong { font-size: clamp(38px, 5.2vw, 48px); line-height: 1; }
    .be-service__name > span { font-size: 16px; line-height: 19.2px; }
    .be-service__icon { width: 30px; height: 30px; justify-self: end; }
    .be-service__icon i { width: 14px; }
    .be-service__details { min-height: 215.2px; padding: 0 30px 40px; display: flex; flex-direction: column; gap: 30px; }
    .be-service__details > p { font-size: 16px; line-height: 24px; }
    .be-service__details ul { grid-template-rows: repeat(3, 19.2px); row-gap: 20px; }
    .be-service__details li { font-size: 16px; line-height: 19.2px; }
    .be-service__details li::before { top: 7px; }
}

@media (max-width: 809.98px) {
    .route-home #service.be-services { min-height: 560.8px; padding: 60px 20px; gap: 30px; }
    .be-services__eyebrow { font-size: 16px; line-height: 19.2px; }
    .be-services__header h2 { font-size: 22px; line-height: 22px; }
    .be-service__toggle { min-height: 84.4px; padding: 20px 0; grid-template-columns: 24px minmax(0, 1fr) 20px; align-items: start; }
    .be-service__number { padding: 0; font-size: 16px; line-height: 19.2px; }
    .be-service__name { height: auto; min-height: 44.4px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
    .be-service__name strong { font-size: 28px; line-height: 25.2px; }
    .be-service__name > span { padding: 0; font-size: 16px; line-height: 19.2px; }
    .be-service__icon { width: 20px; height: 20px; }
    .be-service__icon i { width: 9px; }
    .be-service__details { min-height: 399.2px; padding: 0 24px 20px; display: flex; flex-direction: column; gap: 20px; }
    .be-service__details > p { font-size: 16px; line-height: 24px; }
    .be-service__details ul { display: flex; flex-direction: column; gap: 20px; }
    .be-service__details li { min-height: 19.2px; font-size: 16px; line-height: 19.2px; white-space: normal; }
    .be-service__details li::before { top: 7px; }
    .be-service-preview { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .be-service__panel, .be-service__icon, .be-service__name strong, .be-service-preview { transition: none; }
}