.pg-customers { background: var(--pg-color-ink); color: var(--pg-color-surface); } .pg-customers *, .pg-customers *::before, .pg-customers *::after { box-sizing: border-box; } .pg-customers .container-fluid { width: 100%; padding-inline: 24px; } .pg-customers #hero-section-wrapper { padding: 160px 0 88px; background: var(--pg-color-ink); } .pg-customers .hero-content-wrapper { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); align-items: center; gap: 64px; } .pg-customers .hero-content-wrapper.pg-customers-hero--text { grid-template-columns: minmax(0,960px); } .pg-customers .hero-content { min-width: 0; } .pg-customers #hero-section-wrapper .eyebrow-text { margin: 0 0 24px; color: var(--pg-orange); font-size: 14px; line-height: 1.4; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .pg-customers #hero-section-wrapper h1 { margin: 0 0 28px; color: var(--pg-color-surface); font-size: 67px; font-weight: 500; line-height: 1.12; overflow-wrap: break-word; } .pg-customers #hero-section-wrapper .subtitle, .pg-customers #hero-section-wrapper .subtitle p { margin: 0; color: var(--pg-color-muted); font-size: 20px; line-height: 1.6; } .pg-customers #hero-section-wrapper .subtitle p + p { margin-top: 16px; } .pg-customers #hero-section-wrapper .button-row { display: flex !important; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; } .pg-customers .hero-image { width: 100%; max-width: 560px; aspect-ratio: 1; justify-self: end; } .pg-customers .hero-image img { display: block; width: 100%; height: 100%; object-fit: contain; } .pg-customers #customer-tabs-section { padding: 80px 0 96px; background: var(--pg-color-ink); border-top: 1px solid var(--pg-color-gray); } .pg-customers #customer-tabs-section h2.title { max-width: 1100px; margin: 0 0 40px; color: var(--pg-color-surface); font-size: 67px; font-weight: 500; line-height: 1.15; } .pg-customers #tabs, .pg-customers .tabs-content { min-width: 0; } .pg-customers #customer-tabs-section .tabs-content-navigation { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 40px; } .pg-customers #customer-tabs-section #tabs .tab { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; margin: 0; padding: 12px 20px; border: 1px solid var(--pg-color-gray); border-radius: var(--pg-button-radius); background: var(--pg-color-black); color: var(--pg-color-surface); font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1.4; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .pg-customers #customer-tabs-section #tabs .tab:hover { border-color: var(--pg-orange); } .pg-customers #customer-tabs-section #tabs .tab[aria-selected="true"], .pg-customers #customer-tabs-section #tabs .tab.whiteborder { background: var(--pg-orange); border-color: var(--pg-orange); color: var(--pg-color-ink); } .pg-customers #customer-tabs-section #tabs .tab img, .pg-customers #customer-tabs-section #tabs .tab svg { display: block; width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; } .pg-customers #customer-tabs-section #tabs .tab img { filter: brightness(0) invert(1); } .pg-customers #customer-tabs-section #tabs .tab[aria-selected="true"] img { filter: brightness(0); } .pg-customers #customer-tabs-section #tabs .tab:focus-visible { outline: 3px solid var(--pg-orange); outline-offset: 4px; } .pg-customers #customer-tabs-section #tabs .tabContent.hide, .pg-customers #customer-tabs-section #tabs .tabContent[hidden] { display: none !important; } .pg-customers #customer-tabs-section #tabs .tabContent.show { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 24px; } .pg-customers #tabs .addon-box { min-width: 0; margin: 0; } .pg-customers #tabs .addon-holder { display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; border: 1px solid var(--pg-color-gray); border-radius: var(--pg-button-radius); background: var(--pg-color-black); transition: border-color .2s ease; } .pg-customers #tabs .addon-holder:is(:hover,:focus-within) { border-color: var(--pg-orange); } .pg-customers #tabs .image-holder { display: block; width: 100%; aspect-ratio: 20 / 9; overflow: hidden; background: var(--pg-color-surface); } .pg-customers #tabs .image-holder img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; } .pg-customers #tabs .image-holder:hover img { transform: scale(1.02); } .pg-customers #tabs .addon-content { display: flex; flex-direction: column; flex: 1; align-items: flex-start; min-width: 0; padding: 28px; } .pg-customers #tabs .addon-box .tag { margin: 0 0 12px; color: var(--pg-orange); font-size: 14px; line-height: 1.4; font-weight: 500; letter-spacing: .6px; text-transform: uppercase; } .pg-customers #tabs .addon-box h3 { margin: 0 0 16px; color: var(--pg-color-surface); font-size: 28px; line-height: 1.25; font-weight: 500; overflow-wrap: anywhere; } .pg-customers #tabs .addon-box .content { width: 100%; min-height: 0; max-height: none; overflow: visible; margin: 0 0 24px; color: var(--pg-color-muted); overflow-wrap: anywhere; } .pg-customers #tabs .addon-box .content, .pg-customers #tabs .addon-box .content :is(p,li) { color: var(--pg-color-muted); font-size: 18px; line-height: 1.6; } .pg-customers #tabs .addon-box .content p { margin: 0 0 16px; } .pg-customers #tabs .addon-box .content > :last-child { margin-bottom: 0; } .pg-customers #tabs .addon-box .content :is(h2,h3,h4,h5,h6) { color: var(--pg-color-surface); font-size: 20px; line-height: 1.4; } .pg-customers #tabs .addon-box .content img { max-width: 100%; height: auto; } .pg-customers #tabs .addon-box .content a { color: var(--pg-orange); text-decoration: underline; } .pg-customers #tabs .addon-box .content strong { color: var(--pg-color-surface); } .pg-customers #tabs .addon-box .cta { width: auto; max-width: 100%; margin-top: auto; } .pg-customers #partners-wrapper { background: var(--pg-color-ink); } @media (max-width: 1100px) { .pg-customers .hero-content-wrapper { gap: 32px; } .pg-customers #customer-tabs-section h2.title { font-size: 48px; } .pg-customers #customer-tabs-section #tabs .tabContent.show { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 991px) { .pg-customers #hero-section-wrapper { padding: 136px 0 64px; } .pg-customers .hero-content-wrapper { grid-template-columns: minmax(0,1fr); gap: 40px; } .pg-customers .hero-image { max-width: 480px; justify-self: center; } } @media (max-width: 767px) { .pg-customers .container-fluid { padding-inline: 16px; } .pg-customers #hero-section-wrapper { padding: 120px 0 56px; } .pg-customers #hero-section-wrapper h1 { font-size: 48px; } .pg-customers #hero-section-wrapper .subtitle, .pg-customers #hero-section-wrapper .subtitle p { font-size: 18px; } .pg-customers #hero-section-wrapper .button-row { margin-top: 24px; gap: 12px; } .pg-customers .hero-image { max-width: 400px; } .pg-customers #customer-tabs-section { padding: 56px 0 64px; } .pg-customers #customer-tabs-section h2.title { margin-bottom: 28px; font-size: 36px; } .pg-customers #customer-tabs-section .tabs-content-navigation { gap: 8px; margin-bottom: 28px; } .pg-customers #customer-tabs-section #tabs .tab { min-height: 48px; padding: 10px 14px; gap: 8px; font-size: 14px; } .pg-customers #customer-tabs-section #tabs .tab img, .pg-customers #customer-tabs-section #tabs .tab svg { width: 22px; height: 22px; flex-basis: 22px; } .pg-customers #tabs .addon-content { padding: 24px; } .pg-customers #tabs .addon-box h3 { font-size: 24px; } } @media (max-width: 719px) { .pg-customers #customer-tabs-section #tabs .tabContent.show { grid-template-columns: minmax(0,1fr); } } @media (max-width: 420px) { .pg-customers #hero-section-wrapper h1 { font-size: 36px; } .pg-customers #customer-tabs-section h2.title { font-size: 32px; } } @media (prefers-reduced-motion: reduce) { .pg-customers #tabs .image-holder:hover img { transform: none; } .pg-customers #tabs .image-holder img, .pg-customers #tabs .addon-holder, .pg-customers #tabs .tab { transition: none; } }