.industry-page { --in-orange: var(--pg-color-accent); --in-black: #09090a; --in-panel: #151515; --in-white: var(--pg-color-surface); background: var(--in-black); color: var(--in-white); overflow: hidden; } .industry-page * { box-sizing: border-box; } .industry-page h1 { margin-top: 0; font-weight: 500; text-transform: none; font-size: 101px; } @media (max-width: 992px) { .industry-page h1 { font-size: 67px; } } @media (max-width: 767px) { .industry-page h1 { font-size: 48px; } } @media (max-width: 420px) { .industry-page h1 { font-size: 36px; } } .industry-page h2 { margin-top: 0; font-weight: 500; text-transform: none; font-size: 67px; } @media (max-width: 992px) { .industry-page h2 { font-size: 48px; } } @media (max-width: 767px) { .industry-page h2 { font-size: 36px; } } @media (max-width: 420px) { .industry-page h2 { font-size: 32px; } } .industry-page h3 { margin-top: 0; font-weight: 500; text-transform: none; font-size: 36px; } @media (max-width: 992px) { .industry-page h3 { font-size: 32px; } } @media (max-width: 767px) { .industry-page h3 { font-size: 28px; } } @media (max-width: 420px) { .industry-page h3 { font-size: 24px; } } .industry-page p { margin-top: 0; } .industry-page img { max-width: 100%; } .industry-page .in-container, .industry-page section > .container-fluid { position: relative; z-index: 2; } .industry-page .in-overlay { position: absolute; inset: 0; z-index: 1; } .industry-page .in-background-video { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; } .industry-page .in-eyebrow, .industry-page .in-small-title, .industry-page .in-center-kicker span { color: var(--in-orange); } .industry-page h2 span, .industry-page h1 span { color: var(--in-orange); font-weight: 500; text-transform: none; } .industry-page .in-button { display: inline-block; padding: 10px 36px; color: var(--pg-color-surface); font-size: 14px; font-weight: 500; background-color: transparent; border: 2px solid var(--pg-color-accent); border-radius: 25px; text-decoration: none; text-transform: uppercase; transition: 0.1s linear all; cursor: pointer; } .industry-page .in-button:hover { background: var(--in-orange); color: var(--pg-color-surface); text-decoration: none; } .in-hero { position: relative; display: flex; align-items: center; min-height: 760px; margin-top: 80px; padding: 120px 0 55px; background: var(--in-hero-image) center/cover no-repeat; } .in-hero .in-overlay { background: linear-gradient( 90deg, rgba(5, 5, 6, 0.9), rgba(5, 5, 6, 0.45) 51%, rgba(5, 5, 6, 0.05) ), linear-gradient(0deg, rgba(5, 5, 6, 0.8), transparent 35%); } .in-hero-copy { max-width: 740px; } .in-hero .in-eyebrow { font-size: 18px; margin-bottom: 20px; } .in-hero h1 { font-size: 101px; font-weight: 500; line-height: 120%; margin: 0 0 42px; text-transform: none; } @media (max-width: 992px) { .in-hero h1 { font-size: 67px; } } @media (max-width: 767px) { .in-hero h1 { font-size: 48px; } } @media (max-width: 420px) { .in-hero h1 { font-size: 36px; } } .industry-page .in-hero-kicker { text-align: center; margin: 80px 0 0; font-size: 12px; letter-spacing: 7px; text-transform: uppercase; } .in-hero-kicker span { color: var(--in-orange); } .in-logos { padding: 52px 0; background: var(--pg-color-ink); } .in-logo-row { display: flex; align-items: center; justify-content: space-between; gap: 45px; } .in-logo-row img { width: 100%; max-width: 170px; max-height: 60px; object-fit: contain; } .in-process { position: relative; padding: 75px 0 85px; background: linear-gradient(rgba(15, 15, 15, 0.64), rgba(15, 15, 15, 0.64)), var(--in-process-bg) center/cover no-repeat; overflow: hidden; } .in-process-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(15, 15, 15, 0.64); pointer-events: none; } .in-tabs { display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 38px; background: rgba(10, 10, 10, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); } .in-tabs button { height: 52px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--pg-color-muted); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; cursor: pointer; } .in-tabs button[aria-selected="true"] { color: var(--in-orange); border-color: var(--in-orange); } .in-tab-panel { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; padding: 65px; background: rgba(19, 19, 19, 0.86); border: 1px solid rgba(255, 255, 255, 0.13); } .in-tab-panel[hidden] { display: none; } .in-tab-panel > img { width: 100%; object-fit: cover; } .in-tab-panel > div { max-width: 450px; } .in-tab-panel h2 { font-size: 67px; font-weight: 500; margin-bottom: 22px; text-transform: none; } @media (max-width: 992px) { .in-tab-panel h2 { font-size: 48px; } } @media (max-width: 767px) { .in-tab-panel h2 { font-size: 36px; } } @media (max-width: 420px) { .in-tab-panel h2 { font-size: 32px; } } .in-tab-panel .in-small-title { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; } .in-tab-panel p, .in-tab-panel li { color: var(--pg-color-muted); font-size: 14px; line-height: 1.55; } .in-tab-panel ul { padding-left: 18px; margin: 25px 0 0; } .in-stats { padding: 55px 0; background: #070707; } .in-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .in-stats article { text-align: center; } .in-stat-prefix { display: block; margin-bottom: 12px; color: var(--pg-color-surface); font-size: 14px; font-weight: 400; line-height: 1.35; text-transform: uppercase; } .in-stats strong { display: block; color: var(--in-orange); font-size: 54px; line-height: 1; margin-bottom: 15px; } .in-stats h3 { max-width: 190px; margin: 0 auto 10px; font-size: 36px; line-height: 1.35; font-weight: 500; text-transform: none; } @media (max-width: 992px) { .in-stats h3 { font-size: 32px; } } @media (max-width: 767px) { .in-stats h3 { font-size: 28px; } } @media (max-width: 420px) { .in-stats h3 { font-size: 24px; } } .in-stats p { color: var(--in-orange); font-size: 14px; font-weight: 300; } .in-challenge { padding: 90px 0; background: var(--pg-color-ink); } .in-split { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; align-items: center; } .in-challenge h2, .in-stories h2 { font-size: 67px; font-weight: 500; line-height: 1.05; margin-bottom: 32px; text-transform: none; } @media (max-width: 992px) { .in-challenge h2, .in-stories h2 { font-size: 48px; } } @media (max-width: 767px) { .in-challenge h2, .in-stories h2 { font-size: 36px; } } @media (max-width: 420px) { .in-challenge h2, .in-stories h2 { font-size: 32px; } } .in-challenge p { max-width: 620px; color: var(--pg-color-muted); font-size: 16px; line-height: 1.55; } .in-challenge-video { display: block; width: 100%; max-height: 360px; margin: auto; object-fit: contain; } .in-visibility { position: relative; display: flex; align-items: center; min-height: 720px; padding: 100px 0; background: var(--in-visibility-image) center/cover no-repeat; } .in-visibility .in-overlay { background: linear-gradient( 90deg, rgba(5, 5, 6, 0.35), rgba(5, 5, 6, 0.16) 48%, rgba(5, 5, 6, 0.05) ); } .in-visibility-copy { width: 100%; } .in-visibility-copy > h2 { max-width: 600px; font-weight: 500; text-transform: none; font-size: 67px; } @media (max-width: 992px) { .in-visibility-copy > h2 { font-size: 48px; } } @media (max-width: 767px) { .in-visibility-copy > h2 { font-size: 36px; } } @media (max-width: 420px) { .in-visibility-copy > h2 { font-size: 32px; } } .in-visibility-copy > p { max-width: 600px; } .in-visibility h2 { font-size: 67px; font-weight: 500; line-height: 100%; margin-bottom: 35px; text-transform: none; } @media (max-width: 992px) { .in-visibility h2 { font-size: 48px; } } @media (max-width: 767px) { .in-visibility h2 { font-size: 36px; } } @media (max-width: 420px) { .in-visibility h2 { font-size: 32px; } } .in-visibility p { font-size: 16px; line-height: 1.55; color: #eee; } .in-stories { padding: 90px 0 70px; } .in-section-intro { font-size: 18px; margin-bottom: 14px; } .in-story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 65px; } .in-story-card { display: flex; flex-direction: column; min-height: 410px; padding: 28px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 14px; background: var(--pg-color-ink); } .in-person { display: flex; align-items: center; gap: 15px; } .in-person > img, .in-person > span { flex: 0 0 100px; max-width: 100px; max-height: 40px; height: auto; } .in-person h3 { color: var(--in-orange); font-size: 36px; margin-bottom: 5px; font-weight: 500; text-transform: none; } @media (max-width: 992px) { .in-person h3 { font-size: 32px; } } @media (max-width: 767px) { .in-person h3 { font-size: 28px; } } @media (max-width: 420px) { .in-person h3 { font-size: 24px; } } .in-person p { color: var(--pg-color-muted); font-size: 11px; line-height: 1.35; margin: 0; } .in-story-card blockquote { flex-grow: 1; margin: 28px 0; color: #eee; font-size: 14px; line-height: 1.45; } .in-story-card .in-button { width: fit-content; } .in-solutions { padding: 30px 0 90px; } .in-center-kicker { text-align: center; font-size: 11px; letter-spacing: 5px; text-transform: uppercase; margin-bottom: 75px; } .in-solution-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 42px; max-width: 1100px; margin: auto; } .in-solution-card { display: grid; grid-template-columns: 190px 1fr; gap: 25px; align-items: center; padding: 28px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 22px; background: var(--pg-color-ink); color: var(--pg-color-surface); text-decoration: none; } .in-solution-card img { width: 190px; height: 110px; object-fit: contain; } .in-solution-card h3 { color: var(--in-orange); font-size: 36px; letter-spacing: 1px; text-transform: none; font-weight: 500; } @media (max-width: 992px) { .in-solution-card h3 { font-size: 32px; } } @media (max-width: 767px) { .in-solution-card h3 { font-size: 28px; } } @media (max-width: 420px) { .in-solution-card h3 { font-size: 24px; } } .in-solution-card p { color: var(--pg-color-muted); font-size: 13px; line-height: 1.4; margin: 0; } #footer-top-wrapper { display: none !important; } .in-final-cta { text-align: center; padding: 70px 0 110px; } .in-final-cta h2 { font-size: 67px; font-weight: 500; line-height: 1.08; margin-bottom: 45px; text-transform: none; } @media (max-width: 992px) { .in-final-cta h2 { font-size: 48px; } } @media (max-width: 767px) { .in-final-cta h2 { font-size: 36px; } } @media (max-width: 420px) { .in-final-cta h2 { font-size: 32px; } } @media (max-width: 991px) { .in-logo-row { flex-wrap: wrap; justify-content: center; } .in-tab-panel, .in-split { grid-template-columns: 1fr; } .in-stats-grid { grid-template-columns: repeat(2, 1fr); } .in-story-grid { grid-template-columns: 1fr; } .in-solution-card { grid-template-columns: 150px 1fr; } .in-tabs { overflow-x: auto; grid-template-columns: repeat(5, minmax(150px, 1fr)); } .in-visibility { min-height: 580px; } } @media (max-width: 767px) { .in-hero { min-height: 620px; padding-top: 90px; background-position: 62% center; } .in-hero h1 { font-size: 101px; font-weight: 500; text-transform: none; } @media (max-width: 992px) { .in-hero h1 { font-size: 67px; } } @media (max-width: 767px) { .in-hero h1 { font-size: 48px; } } @media (max-width: 420px) { .in-hero h1 { font-size: 36px; } } .in-hero-kicker { font-size: 9px; line-height: 1.8; letter-spacing: 3px; margin-top: 65px; } .in-logo-row img { max-width: 110px; max-height: 34px; } .in-process { padding: 50px 0; } .in-tab-panel { padding: 22px; gap: 28px; } .in-tab-panel > img { height: 230px; } .in-stats-grid { grid-template-columns: 1fr; gap: 70px; } .in-stats strong { font-size: 40px; } .in-challenge, .in-stories { padding: 65px 0; } .in-split { gap: 38px; } .in-visibility { min-height: 620px; background-position: 62% center; } .in-visibility h2 { font-size: 67px; font-weight: 500; text-transform: none; } @media (max-width: 992px) { .in-visibility h2 { font-size: 48px; } } @media (max-width: 767px) { .in-visibility h2 { font-size: 36px; } } @media (max-width: 420px) { .in-visibility h2 { font-size: 32px; } } .in-solution-grid { grid-template-columns: 1fr; } .in-solution-card { grid-template-columns: 1fr; } .in-solution-card img { width: 100%; height: 150px; } .in-final-cta { padding: 60px 0 85px; } } @media (max-width: 480px) { .in-hero .in-button, .in-final-cta .in-button { width: 100%; } }
