.vx-why-design { color: #1e252c; margin-block-start: 0; }
.vx-why-design > * { margin-block: 0; }
.vx-why-design > section { padding: 64px max(44px,calc((100% - 1352px)/2)); }
.vx-why-design h1,.vx-why-design h2 { font-size: clamp(28px,3.34vw,48px); font-weight: 600; line-height: 1.25; letter-spacing: -.025em; margin: 0 0 24px; }
.vx-why-design p { font-size: 16px; color: #68747e; line-height: 1.65; margin: 0 0 20px; }
.vx-why-design .vx-why-eyebrow { font-size: 20px; color: #287cc4; font-weight: 600; letter-spacing: .055em; margin-bottom: 12px; }
.vx-why-banner img { display: block; width: 100%; height: auto; aspect-ratio: 1440/510; object-fit: cover; }
.vx-why-story { background: #edf6ff; }
.vx-why-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.vx-why-story-grid > img { width: 100%; aspect-ratio: 663/468; object-fit: cover; border-radius: 8px; }
.vx-why-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 64px; }
.vx-why-metrics article { text-align: center; padding: 0 40px; border-right: 1px solid #d6e2ee; }
.vx-why-metrics article:last-child { border: 0; }
.vx-why-metrics svg { display: block; width: 64px; height: 64px; margin: 0 auto 12px; color: #0872e2; }
.vx-why-metrics strong { display: block; font-size: 48px; line-height: 1.2; font-weight: 600; }
.vx-why-metrics p { font-size: 15px; line-height: 1.45; max-width: 220px; margin: 8px auto 0; }
.vx-why-capability-row { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: center; }
.vx-why-capability-row > img { width: 100%; aspect-ratio: 568/468; object-fit: cover; border-radius: 8px; }
.vx-why-capability-row h2 { margin-bottom: 20px; }
.vx-why-capability-row > div > p:not(.vx-why-eyebrow) { font-size: 15px; }
.vx-why-feature { display: flex; align-items: flex-start; gap: 18px; margin-top: 24px; }
.vx-why-feature svg { width: 32px; height: 32px; color: #287fbd; flex-shrink: 0; }
.vx-why-feature h3 { font-size: 20px; font-weight: 600; line-height: 1.4; margin: 0 0 8px; }
.vx-why-feature p { font-size: 15px; margin: 0; line-height: 1.55; }
.vx-why-rd { margin-top: 100px; grid-template-columns: .95fr 1.05fr; }
.vx-why-rd > img { aspect-ratio: 732/523; }
.vx-why-quality { border-top: 1px solid #edf1f5; }
.vx-why-quality header { text-align: center; margin-bottom: 56px; }
.vx-why-quality header p:last-child { font-size: 15px; max-width: 1260px; margin: 0 auto; }
.vx-why-quality header h2 { margin-bottom: 20px; }
.vx-why-quality-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.vx-why-quality-grid > img { width: 100%; aspect-ratio: 664/497; object-fit: cover; border-radius: 8px; }
.vx-why-tests { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.vx-why-tests span { font-size: 12px; color: #8a9eae; }
.vx-why-tests h3 { font-size: 20px; font-weight: 600; margin: 8px 0; }
.vx-why-tests p { font-size: 15px; line-height: 1.55; margin: 0; }
.vx-why-process { background: radial-gradient(ellipse at 80% 100%,#b9e2ff88,transparent 45%),linear-gradient(110deg,#f1faff,#fff 50%,#eff8ff); }
.vx-why-process > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.vx-why-process figure { position: relative; margin: 0; overflow: hidden; border-radius: 8px; }
.vx-why-process img { width: 100%; aspect-ratio: 434/276; object-fit: cover; display: block; }
.vx-why-process figure::after { content: ''; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent,#000b); }
.vx-why-process figcaption { position: absolute; inset: auto 24px 22px; color: white; z-index: 1; }
.vx-why-process figcaption span { font-size: 12px; color: #d4e1eb; }
.vx-why-process h3 { color: white; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 6px 0 0; }
body:has(.vx-why-design) .vx-footer { background: linear-gradient(#e7f1ff,#fff); border: 0; }
body:has(.vx-why-design) .vx-footer-title,body:has(.vx-why-design) .vx-footer-link,body:has(.vx-why-design) .vx-footer-brand p,body:has(.vx-why-design) .vx-footer-bottom { color: #475461; }
body:has(.vx-why-design) .vx-footer-bottom { border-color: #d4e0ed; }
body:has(.vx-why-design) .vx-footer-brand > a img { filter: none !important; }
body:has(.vx-why-design) .wp-site-blocks > footer { margin-block-start: 0; }
@media(max-width:1100px) { .vx-why-story-grid,.vx-why-capability-row,.vx-why-quality-grid { gap: 32px; } .vx-why-metrics article { padding: 0 20px; } .vx-why-metrics strong { font-size: 38px; } .vx-why-tests { gap: 20px; } .vx-why-tests h3 { font-size: 18px; } }
@media(max-width:760px) { .vx-why-design > section { padding: 44px 20px; } .vx-why-story-grid,.vx-why-capability-row,.vx-why-quality-grid { grid-template-columns: 1fr; } .vx-why-design h1 br { display: none; } .vx-why-design .vx-why-eyebrow { font-size: 14px; } .vx-why-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 0; margin-top: 40px; } .vx-why-metrics article:nth-child(2) { border: 0; } .vx-why-metrics svg { width: 48px; height: 48px; } .vx-why-metrics strong { font-size: 32px; } .vx-why-metrics p { font-size: 13px; } .vx-why-rd { margin-top: 60px; } .vx-why-quality header { margin-bottom: 32px; } .vx-why-tests { gap: 24px 16px; } .vx-why-tests p { font-size: 14px; } .vx-why-process > div { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; } .vx-why-process h3 { font-size: 17px; } .vx-why-process figcaption { inset: auto 12px 12px; } .vx-why-process img { aspect-ratio: 4/3; } }
