#business-area { position: relative; padding: 110px 0 120px; background: #fff; scroll-margin-top: 84px; }
.business-wrap { max-width: 1440px; margin: auto; padding-inline: 48px; }
.business-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 56px; }
.business-eyebrow { color: #0056b3; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px; }
.business-heading h2 { font-size: clamp(38px, 5vw, 72px); font-weight: 800; letter-spacing: -.055em; line-height: 1.05; }
.business-heading > p { font-size: 15px; line-height: 1.7; color: #666; }
.business-explorer { position: relative; min-height: 480px; }
.business-service { display: block; width: 40%; border-bottom: 1px solid #e0e0e0; }
.business-service:first-child { border-top: 1px solid #e0e0e0; }
.service-row-label { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; transition: color .25s ease, padding-left .35s ease; }
.service-row-label h3 { font-size: clamp(17px, 1.8vw, 25px); font-weight: 600; line-height: 1.3; letter-spacing: -.6px; }
.service-row-label > span { font-size: 25px; line-height: 1; opacity: .35; transition: opacity .25s, transform .35s; }
.business-service.is-active .service-row-label, .business-service:hover .service-row-label { color: #0056b3; padding-left: 12px; }
.business-service.is-active .service-row-label > span { opacity: 1; transform: rotate(45deg); }
.service-preview { position: absolute; inset: 0 0 0 auto; width: 54%; overflow: hidden; background: #0a0a0a; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .45s ease, transform .55s ease, visibility .45s; pointer-events: none; }
.business-service.is-active .service-preview { opacity: 1; visibility: visible; transform: translateY(0); z-index: 1; pointer-events: auto; }
.service-preview img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.055); transition: transform 1.3s cubic-bezier(.2,.65,.3,1); }
.business-service.is-active .service-preview img { transform: scale(1); }
.service-preview::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.88)); }
.service-preview-copy { position: absolute; bottom: 0; inset-inline: 0; z-index: 1; padding: 38px; color: #fff; }
.service-preview-title { display: block; max-width: 19ch; font: 700 clamp(27px, 3vw, 42px)/1.08 'Montserrat', sans-serif; letter-spacing: -.035em; }
.service-preview-copy p { margin: 20px 0 28px; max-width: 47ch; font-size: 14px; line-height: 1.65; }
.service-discover { display: inline-flex; align-items: center; gap: 28px; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.6); font-size: 13px; font-weight: 600; }
.service-discover span { font-size: 22px; }
.business-service:focus-visible { outline: 3px solid #0088ff; outline-offset: 5px; }
.business-browse { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.business-browse[hidden] { display: none; }
.business-position { font-size: 12px; color: #666; font-variant-numeric: tabular-nums; }
.business-browse > div { display: flex; gap: 12px; }
.business-browse button { width: 46px; height: 46px; border: 1px solid #ccc; color: #0a0a0a; background: #fff; font-size: 22px; cursor: pointer; }
.business-browse button:hover { border-color: #0056b3; color: #0056b3; }
.business-browse button:disabled { opacity: .3; cursor: default; }
.business-browse button:focus-visible { outline: 3px solid #0088ff; outline-offset: 3px; }
@media (max-width: 900px) {
    #business-area { padding-block: 70px 80px; scroll-margin-top: 84px; }
    .business-wrap { padding-inline: 24px; }
    .business-heading { align-items: flex-start; flex-direction: column; gap: 22px; margin-bottom: 32px; }
    .business-heading h2 { font-size: clamp(38px, 7vw, 62px); }
    .business-heading > p { font-size: 14px; }
    .business-explorer { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; min-height: 0; padding: 6px 24px; margin-inline: -24px; scrollbar-width: thin; scrollbar-color: #0056b3 #e0e0e0; scroll-padding-inline: 24px; }
    .business-service, .business-service:first-child { flex: 0 0 min(78vw, 440px); width: auto; border: 0; scroll-snap-align: start; }
    .service-row-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
    .service-preview, .business-service.is-active .service-preview { position: relative; inset: auto; width: 100%; height: 530px; opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: none; }
    .service-preview img, .business-service.is-active .service-preview img { transform: none; }
    .service-preview-copy { padding: 26px; }
    .service-preview-title { font-size: 30px; }
    .service-preview-copy p { font-size: 13px; margin: 18px 0 24px; }
}
@media (max-width: 480px) {
    .service-preview, .business-service.is-active .service-preview { height: 500px; }
    .service-preview-copy { padding: 24px 20px; }
    .service-preview-title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .service-preview, .service-preview img, .service-row-label, .service-row-label > span { transition: none; transform: none; }
}
