.why-section { display: grid; grid-template-columns: .82fr 1.18fr; min-height: 720px; background: var(--surface-soft); color: var(--ink); border-top: 1px solid rgba(23,21,28,.14); }
.why-heading { display: flex; flex-direction: column; justify-content: flex-start; padding: var(--section-inset) 5vw 68px; border-right: 1px solid rgba(23,21,28,.14); }
.why-heading h2 {margin: 24px 0 22px; letter-spacing: -.075em; font-family:var(--display);font-size:var(--type-h2);font-weight:600;line-height:.98;}
.why-subtitle { max-width: 550px; margin: 0 0 28px; font: 500 clamp(18px,1.5vw,23px)/1.48 var(--display); letter-spacing: -.025em; }
.why-heading .btn { align-self: flex-start; }
.why-detail { align-self: center; padding: 64px 5vw; }
.why-copy { display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px 55px; max-width: 980px; color: #5d5961; font-size: 14px; line-height: 1.7; }
.why-copy p { margin: 0; }
.why-copy p:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.why-copy .why-result { padding: 22px 0 0; border-top: 1px solid rgba(61,35,124,.32); color: var(--violet); font-weight: 500; }
.why-capabilities { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 42px; border-top: 1px solid rgba(23,21,28,.18); border-left: 1px solid rgba(23,21,28,.18); }
.why-capabilities article { min-height: 170px; position: relative; border-right: 1px solid rgba(23,21,28,.18); border-bottom: 1px solid rgba(23,21,28,.18); transition: transform .24s ease, background-color .24s ease, border-color .24s ease, box-shadow .24s ease; }
.why-capabilities button { width: 100%; min-height: 170px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; position: relative; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.why-capabilities button:focus-visible { outline: 3px solid #7655bd; outline-offset: -3px; }
.why-capabilities article:hover { z-index: 1; transform: translateY(-4px); background: #fff; border-color: rgba(61,35,124,.42); box-shadow: 0 14px 28px rgba(34,25,48,.1), inset 0 3px 0 #7655bd; }
.why-number { color: #817a83; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.why-tile-copy { display: grid; align-items: end; }
.why-tile-copy strong { grid-area: 1/1; font: 500 clamp(18px,1.45vw,22px)/1.18 var(--display); letter-spacing: -.035em; transition: opacity .2s ease, transform .2s ease; }
.why-description { grid-area: 1/1; align-self: end; max-width: 28ch; color: #4f4757; font-size: 13px; line-height: 1.42; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.why-toggle { position: absolute; top: 17px; right: 18px; color: var(--violet); font: 400 20px/1 var(--display); transition: transform .2s ease; }
.why-capabilities button[aria-expanded="true"] .why-tile-copy strong { opacity: 0; transform: translateY(-7px); }
.why-capabilities button[aria-expanded="true"] .why-description { opacity: 1; transform: translateY(0); }
.why-capabilities button[aria-expanded="true"] .why-toggle { transform: rotate(45deg); }
.why-capabilities article:has(button[aria-expanded="true"]) { z-index: 1; background: #fff; border-color: rgba(61,35,124,.42); box-shadow: inset 0 3px 0 #7655bd; }
.why-capabilities .why-method { background: #d8cfee; color: #2d185e; }
.why-capabilities .why-method:hover { background: #cec1eb; }
.why-method .why-tile-copy strong { font: 500 clamp(20px,1.7vw,27px)/1.12 var(--display); letter-spacing: -.04em; }
.why-method .why-description { color: #2d185e; }
@media (max-width: 1000px) { .why-section,.home-page .why-section { grid-template-columns: 1fr; } .why-heading { border-right: 0; border-bottom: 1px solid rgba(23,21,28,.14); } .why-detail { padding-top: 56px; } }
@media (max-width: 650px) { .why-heading,.why-detail { padding: 56px 7vw; } .why-heading h2 { font-family:var(--display);font-size:var(--type-h2);font-weight:600;line-height:.98;} .why-copy { grid-template-columns: 1fr; } .why-copy p:nth-child(2) { grid-column: auto; grid-row: auto; } .why-capabilities { grid-template-columns: 1fr 1fr; margin-top: 38px; } .why-capabilities article,.why-capabilities button { min-height: 155px; } .why-capabilities button { padding: 16px; } .why-description { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .why-capabilities article { transition: none; } .why-capabilities article:hover { transform: none; } }