File: /var/www/viitorx.stgviitor.com/wp-content/themes/viitorx/css/front-page-responsive.css
@media (max-width: 900px) {
.hero-video-wrap::after {
background: linear-gradient(180deg, rgba(19, 19, 19, 0) 70%, rgba(19, 19, 19, 0.5) 85%, #131313 100%);
}
}
@media (min-width: 901px) and (max-width: 1199px) {
.hero-headline h1 {
font-size: clamp(2.5rem, 2.2vw + 1.8rem, 3.75rem);
}
.hero-right p.hero-lead {
font-size: clamp(1rem, 0.65vw + 0.9rem, 1.25rem);
}
}
@media (min-width: 1200px) {
.offerings-desktop .offerings-stage {
justify-content: flex-start;
padding-block-start: 0;
padding-block-end: clamp(48px, 9svh, 120px);
}
}
@media (min-width: 1200px) {
.offerings-left-column {
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: start;
justify-content: flex-start;
min-width: 0;
width: 100%;
max-width: min(780px, 48vw);
overflow-x: clip;
}
/* First flex child — generous space before first title (comp: eyebrow separate from “cards”) */
.offerings-eyebrow-wrap {
flex-shrink: 0;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
@media (min-width: 1200px) {
.offerings-desktop .offerings-stage>.offerings-heading {
display: none;
}
}
@media (min-width: 1200px) {
.offerings-desktop #offering-progressive-copy {
position: relative;
}
.offerings-desktop #offering-progressive-copy>.offering-progressive-block~.offering-progressive-block {
will-change: transform;
}
}
@media (min-width: 1200px) {
.offerings-desktop .offering-visual-frame {
overflow: hidden;
}
}
@media (max-width: 1199px) {
#offerings {
overflow: visible;
/* Avoid double rule above the mobile sticky “Offerings” band (section border read as heading chrome). */
border-top: none;
padding-block-start: 0;
padding-block-end: 0;
}
.offerings-desktop {
display: none !important;
}
.offerings-mobile-stack {
display: block;
}
.offerings-mobile-stack .offerings-heading {
display: none;
}
/* No hairline separators between cards (otherwise reads as borders on “Offerings” band) */
.offerings-mobile-stack .offering-mobile-slide {
border-top: none;
}
}
@media (hover: hover) and (pointer: fine) {
.work-slide:hover .work-slide-bg img {
transform: scale(1.03);
}
}
@media (hover: hover) and (pointer: fine) {
.work-arrow-btn:hover {
border-color: var(--white);
background: var(--white);
transform: scale(1.08) rotate(-45deg);
}
.work-arrow-btn:hover svg {
stroke: var(--black);
}
}
@media (max-width: 1100px) {
.work-slide-info {
max-width: min(100%, 40rem);
}
}
@media (max-width: 900px) {
#work {
--work-bottom: clamp(28px, 7vh, 64px);
padding-block-start: clamp(36px, 7vw, 88px);
padding-block-end: 0;
}
/* .work-slide-overlay {
background: linear-gradient(to top, rgba(0, 0, 0, 0.93) 0%, rgba(0, 0, 0, 0.42) 50%, transparent 100%);
} */
}
@media (max-width: 640px) {
/* Anchor */
#work-first-slide {
scroll-margin-top: var(--nav-bar-outer-height);
}
/* Heading stays sticky; cards stick just below it */
#work > h2.work-eyebrow {
position: sticky;
top: var(--work-sticky-top);
z-index: 20;
}
/* 16:9 card — zero cropping; sticks below nav+eyebrow */
.work-slide {
display: flex;
align-items: flex-end;
min-height: 0;
height: auto;
aspect-ratio: 4/3;
top: calc(var(--work-sticky-top) + 56px);
padding-bottom: clamp(14px, 4vw, 20px);
overflow: hidden;
}
.work-slide-bg::before {
content: none;
}
.work-slide-bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.work-slide::after {
content: '';
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.82) 0%,
rgba(0, 0, 0, 0.32) 45%,
transparent 75%
);
pointer-events: none;
}
.work-slide-content {
position: relative;
z-index: 5;
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
padding: 0 var(--work-inline);
}
.work-slide-info {
max-width: calc(100% - 56px);
text-align: left;
display: flex;
flex-direction: column;
gap: 4px;
}
.work-slide-info h3 {
font-size: 20px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.005em;
text-transform: uppercase;
}
.work-slide-info p {
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: 0;
}
.work-arrow-btn {
flex-shrink: 0;
align-self: flex-end;
}
/* Process section: 4:3 image ratio on mobile */
#process .sectors-container .sector-slide .sector-image-wrap,
#process .sector-image-wrap {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: 4 / 3 !important;
width: 100%;
}
}
@media (max-height: 520px) and (orientation: landscape) {
/* Anchor: first slide snaps flush under the nav bar when linked from menu */
#work-first-slide {
scroll-margin-top: var(--nav-bar-outer-height);
}
.work-slide {
min-height: max(100svh, 420px);
padding-bottom: clamp(16px, 5vh, 40px);
}
.work-slide-info h3 {
font-size: clamp(1.125rem, 3vh + 0.5rem, 1.75rem);
}
.work-slide-info p {
font-size: clamp(0.8125rem, 1.6vh + 0.5rem, 0.9375rem);
}
}
@media (hover: hover) and (pointer: fine) {
.partner-card:hover img {
transform: scale(1.05);
}
}
@media (max-width: 1024px) {
.partners-grid {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
}
@media (max-width: 640px) {
.partners-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.partner-card {
border-radius: 12px;
padding: 16px;
}
}
@media (max-width: 1100px) {
.partners-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1201px) {
#magic-how {
padding-left: max(100px, env(safe-area-inset-left, 0px));
padding-right: max(100px, env(safe-area-inset-right, 0px));
}
}
@media (prefers-reduced-motion: reduce) {
#magic-how .magic-how-scroll-cue__mouse svg {
animation: none;
}
}
@media (max-width: 1023px) {
.magic-how-desktop-rail {
display: none;
}
#magic-how .magic-how-mobile-rail {
--magic-rail-x: clamp(31px, 8.8vw, 46px);
/* horizontal center of spine + dots */
display: flex;
flex-direction: column;
gap: 0;
position: relative;
padding-left: 0;
padding-top: clamp(8px, 2vw, 16px);
padding-bottom: clamp(16px, 4vw, 28px);
}
/* Fading spine (soft start/end like ref) */
#magic-how .magic-how-mobile-rail::before {
content: '';
position: absolute;
left: calc(var(--magic-rail-x) - 0.5px);
top: clamp(10px, 2.5vw, 20px);
bottom: clamp(52px, 12vw, 88px);
/* fades before footnote lane */
width: 1px;
border-radius: 1px;
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.02) 0%,
rgba(255, 255, 255, 0.78) 5%,
rgba(255, 255, 255, 0.62) 50%,
rgba(255, 255, 255, 0.72) 88%,
rgba(255, 255, 255, 0.18) 98%,
rgba(255, 255, 255, 0) 100%);
pointer-events: none;
z-index: 0;
}
/* Pin + stem occupy left column; dots sit centered on spine */
.magic-how-mobile-step {
position: relative;
display: grid;
grid-template-columns: clamp(68px, 19vw, 96px) minmax(0, 1fr);
column-gap: clamp(12px, 3.8vw, 18px);
align-items: start;
padding-block: clamp(18px, 5.2vw, 28px);
z-index: 2;
}
.magic-how-mobile-pin {
display: flex;
align-items: center;
justify-content: flex-start;
gap: clamp(9px, 2.8vw, 14px);
min-height: clamp(26px, 7vw, 36px);
padding-left: calc(var(--magic-rail-x) - 7.5px);
padding-right: clamp(2px, 1vw, 6px);
}
.magic-how-mobile-dot {
position: relative;
flex: 0 0 auto;
width: 15px;
height: 15px;
border-radius: 50%;
border: 2px solid #ffffff;
background: rgba(164, 119, 100, 1);
box-shadow: 0 0 12px rgba(164, 119, 100, 0.35);
}
.magic-how-mobile-stem {
flex: 1 1 auto;
align-self: center;
min-width: clamp(14px, 4vw, 28px);
height: 1px;
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.92) 0%,
rgba(255, 255, 255, 0.55) 100%);
opacity: 0.95;
border-radius: 1px;
}
.magic-how-mobile-step p {
margin: 0;
max-width: 38ch;
font-family: Archivo, var(--font-main), sans-serif;
font-weight: 500;
font-size: clamp(13px, 2.7vw + 0.62rem, 16px);
line-height: 1.45;
letter-spacing: 0.01em;
color: rgba(255, 255, 255, 0.94);
text-align: left;
opacity: 1;
visibility: visible;
transform-origin: 0 50%;
}
/* Scrub-drawn portion (dimmer spine “fill”) */
.magic-how-mobile-progress-line {
position: absolute;
left: calc(var(--magic-rail-x) - 0.5px);
top: clamp(10px, 2.5vw, 20px);
width: 1px;
height: var(--rail-h, 100%);
transform-origin: top center;
transform: scaleY(0);
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.35) 0%,
rgba(255, 255, 255, 0.82) 25%,
rgba(255, 255, 255, 0.45) 100%);
border-radius: 1px;
z-index: 0;
}
#magic-how .magic-how-footnote {
margin-top: clamp(44px, 10vw, 88px);
white-space: normal;
max-width: 92%;
}
}
@media (min-width: 1024px) {
.magic-how-mobile-rail {
display: none;
}
}
@media (min-width: 1201px) {
#process {
padding-left: max(100px, env(safe-area-inset-left, 0px));
padding-right: max(100px, env(safe-area-inset-right, 0px));
}
}
@media (max-width: 1199px) {
.process-wrapper {
display: flex;
flex-direction: column;
align-items: stretch;
}
}
@media (min-width: 1200px) {
/*
* Desktop: CSS grid (slides | stats) replaces float + margin-right so every slide,
* including 01, shares the same usable width; image column stays minmax(380px, 1fr).
*/
#process {
--process-stats-strip: min(300px, 21vw);
}
/* Grid replaces float+rail margin so slide 01 uses the same content width as slides 02–04 */
.process-wrapper {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--process-stats-strip);
column-gap: clamp(40px, 6vw, 105px);
align-items: start;
width: 100%;
}
.process-stats-sticky {
float: none;
clear: none;
grid-column: 2;
grid-row: 1;
align-self: start;
width: 100%;
min-width: 0;
margin-bottom: 0;
display: flex;
}
.sectors-container {
grid-column: 1;
grid-row: 1;
min-width: 0;
}
.sector-slide {
position: sticky;
top: calc(var(--process-sticky-top) + 50px);
border-top: none;
height: 641px;
min-height: 641px;
max-height: 641px;
z-index: 1;
padding: 30px 0 0 0;
margin-bottom: 100px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.sectors-container .sector-slide:last-child {
margin-bottom: 0;
}
.sectors-container .sector-slide:nth-child(1) {
z-index: 1;
}
.sectors-container .sector-slide:nth-child(2) {
z-index: 2;
}
.sectors-container .sector-slide:nth-child(3) {
z-index: 3;
}
.sectors-container .sector-slide:nth-child(4) {
z-index: 4;
}
.sector-slide-inner {
grid-template-columns: minmax(260px, 360px) minmax(380px, 1fr);
align-items: stretch;
gap: clamp(40px, 6vw, 105px);
height: 611px;
margin-right: 0;
width: 100%;
max-width: 100%;
min-width: 0;
}
.sector-slide-col--lead {
display: flex;
flex-direction: column;
justify-content: space-between;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
align-self: stretch;
height: 611px;
min-height: 611px;
max-height: 611px;
overflow: visible;
}
.sector-lead-body {
margin-top: auto;
flex-shrink: 0;
}
.sector-slide-col--media {
align-self: stretch;
display: flex;
align-items: stretch;
justify-content: flex-start;
min-width: 0;
height: 611px;
}
.sector-slide-col--stats {
display: none;
}
.sector-image-wrap {
flex: 1 1 auto;
width: 100%;
min-width: 0;
height: 611px;
min-height: 611px;
max-height: 611px;
aspect-ratio: auto;
overflow: hidden;
}
.sector-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/*
* Where We Belong — cards share one slot: first slide stays put, 02–04 crossfade in (GSAP).
* Without JS, only slide 01 is visible (fallback below).
*/
.sectors-container.sectors-stack--dissolve {
position: relative;
min-height: 641px;
width: 100%;
isolation: isolate;
}
.sectors-container.sectors-stack--dissolve .sector-slide {
position: absolute;
left: 0;
right: 0;
top: 0;
margin-bottom: 0;
width: 100%;
max-width: 100%;
}
.sectors-container.sectors-stack--dissolve .sector-slide:nth-child(1) {
opacity: 1;
visibility: visible;
}
.sectors-container.sectors-stack--dissolve .sector-slide:nth-child(n + 2) {
opacity: 0;
visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
#process .sectors-container.sectors-stack--dissolve {
min-height: 0;
}
#process .sectors-container.sectors-stack--dissolve .sector-slide {
position: sticky;
left: auto;
right: auto;
top: calc(var(--process-sticky-top) + 50px);
margin-bottom: 100px;
opacity: 1 !important;
visibility: visible !important;
}
#process .sectors-container.sectors-stack--dissolve .sector-slide:last-child {
margin-bottom: 0;
}
}
}
@media (max-width: 1199px) {
#process {
padding-block: clamp(16px, 5vw, 36px) clamp(28px, 7vw, 64px);
}
#process>h2.process-eyebrow {
padding-top: clamp(12px, 3vw, 24px);
margin-bottom: clamp(10px, 3vw, 28px);
}
/* Slides first, KPI band after (matches mobile design) */
.sectors-container {
order: 0;
width: 100%;
max-width: none;
overflow-anchor: none;
}
.process-stats-sticky {
position: relative;
top: auto;
float: none;
width: 100%;
max-width: min(620px, 100%);
height: auto;
min-height: 0;
margin-left: auto;
margin-right: auto;
margin-block-start: clamp(28px, 7vw, 56px);
margin-block-end: 0;
order: 1;
z-index: 2;
display: flex;
align-self: stretch;
}
.process-stats-sticky .sector-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: clamp(12px, 3.5vw, 22px);
row-gap: clamp(16px, 4vw, 28px);
height: auto;
max-height: none;
min-height: 0;
}
/* Kill base .sector-slide padding shorthand — #process + !important on ≤1199px mobile/tablet */
#process .sectors-container .sector-slide {
position: sticky;
top: calc(var(--process-sticky-top) + var(--process-eyebrow-stack));
height: auto;
min-height: 0;
max-height: none;
margin: 0;
margin-bottom: 0;
border: none !important;
padding: 0 !important;
box-sizing: border-box;
display: flex;
align-items: flex-start;
overflow: visible;
z-index: 1;
transition: none;
}
/* Breathing room between stacked slides (mobile / tablet) */
#process .sectors-container .sector-slide:not(:last-of-type) {
margin-bottom: clamp(32px, 8vw, 52px);
}
/* Content-height only — no viewport min-height (that left a black void under the image) */
#process .sectors-container .sector-slide:last-of-type {
position: relative;
top: auto;
z-index: 5;
min-height: 0;
height: auto;
padding: 0 !important;
}
#process .sectors-container .sector-slide:nth-child(1) {
z-index: 1;
}
#process .sectors-container .sector-slide:nth-child(2) {
z-index: 2;
}
#process .sectors-container .sector-slide:nth-child(3) {
z-index: 3;
}
#process .sectors-container .sector-slide:nth-child(4) {
z-index: 4;
}
#process .sectors-container .sector-slide .sector-slide-inner {
margin-right: 0;
gap: clamp(16px, 4vw, 28px);
min-height: 0;
align-items: start;
align-content: start;
}
#process .sectors-container .sector-slide .sector-slide-col--lead {
justify-content: flex-start;
gap: clamp(10px, 3vw, 18px);
align-self: start;
height: auto;
flex: 0 1 auto;
overflow: visible;
}
#process .sectors-container .sector-slide .sector-lead-body {
margin-top: 0;
}
#process .sectors-container .sector-slide .sector-image-wrap {
max-height: none;
min-height: min(220px, 42vw);
aspect-ratio: 16 / 10;
}
#process .sectors-container .sector-slide .sector-counter {
position: relative;
z-index: 3;
/* Scroll/sticky spacing: lifts “02/04”“03/04” away from eyebrow & previous image edge */
padding-top: clamp(28px, 7vw, 44px);
}
}
@media (max-width: 1199px) {
.sector-image-wrap {
aspect-ratio: 16 / 11;
min-height: min(220px, 38vw);
max-height: min(72vh, 641px);
}
}
@media (hover: hover) and (pointer: fine) {
.sector-slide:hover .sector-image {
transform: scale(1.03);
}
}
@media (max-width: 900px) {
#process {
padding-block: clamp(16px, 5vw, 36px) clamp(24px, 8vw, 52px);
}
#process .sectors-container .sector-slide .sector-slide-inner {
gap: clamp(24px, 7vw, 40px);
}
/*
* Taller hero image per slide — keeps slide 02+ below the fold on first sticky view,
* and pairs with slide margin-bottom for separation.
*/
#process .sectors-container .sector-slide .sector-image-wrap {
height: 580px;
min-height: 580px;
max-height: 580px;
aspect-ratio: auto;
width: 100%;
overflow: hidden;
}
.sector-slide-col--lead {
gap: clamp(20px, 5vw, 32px);
}
}
@media (max-width: 480px) {
.sector-stats {
column-gap: clamp(10px, 3vw, 16px);
row-gap: clamp(14px, 4vw, 22px);
}
.stat-count-display {
font-size: clamp(22px, 6vw + 0.65rem, 40px);
}
}
@media (max-width: 1199px) {
#reviews {
padding-top: clamp(22px, 6vw, 44px);
}
}
@media (hover: hover) and (pointer: fine) {
.review-card:hover {
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-5px);
}
}
@media (max-width: 1100px) and (min-width: 992px) {
.reviews-bg-text {
width: 100%;
max-width: 100%;
font-size: clamp(32px, 6.5vw, 88px);
}
.review-card:nth-child(2) {
top: calc(var(--reviews-v-leader) + 280px);
}
.review-card:nth-child(3) {
top: calc(var(--reviews-v-leader) + 560px);
}
.review-card:nth-child(4) {
top: calc(var(--reviews-v-leader) + 840px);
}
.review-card:nth-child(5) {
top: calc(var(--reviews-v-leader) + 1120px);
}
}
@media (max-width: 991px) {
/* Breathing room from Process/KPI strip above — pin starts after nav offset looks correct */
#reviews {
padding-top: calc(var(--anchor-under-nav-offset) + clamp(36px, 9vw, 72px)) !important;
padding-bottom: max(calc(var(--reviews-section-gap-mobile-y) + env(safe-area-inset-bottom, 0px)),
env(safe-area-inset-bottom, 0px)) !important;
scroll-margin-top: calc(var(--anchor-under-nav-offset) + clamp(28px, 7vw, 56px));
}
.reviews-sticky {
height: 100svh;
min-height: 100svh;
overflow: hidden;
position: relative;
isolation: isolate;
padding: 0;
display: block;
background-image: none;
background-color: var(--black);
--reviews-sticky-pad: clamp(14px, 4.2vw, 32px);
}
.reviews-sticky::before {
content: '';
position: absolute;
z-index: 0;
left: 0;
right: 0;
top: calc(var(--reviews-sticky-pad) + env(safe-area-inset-top, 0px));
bottom: calc(var(--reviews-sticky-pad) + env(safe-area-inset-bottom, 0px));
background-image: url('/wp-content/uploads/2026/04/testimonials-m.webp');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
pointer-events: none;
}
/* Top edge darkening — reads clearly over photo while headline/cards stay above */
.reviews-sticky::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg,
#131313 0%,
rgba(19, 19, 19, 0) 14.69%);
pointer-events: none;
}
/* Same as desktop: headline centered in layer behind cards; cards scroll over and reveal type between gaps. */
.reviews-bg-text {
position: absolute;
top: 45%;
left: 0;
right: 0;
transform: translateY(-50%);
width: 100%;
max-width: 100%;
z-index: 2;
padding-inline: max(15px, env(safe-area-inset-left, 0px)) max(15px, env(safe-area-inset-right, 0px));
text-wrap: balance;
pointer-events: none;
font-weight: 700;
font-size: 80px;
line-height: 100%;
letter-spacing: -0.5%;
text-align: center;
vertical-align: middle;
}
.reviews-cards-track {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 10;
will-change: transform;
}
.reviews-scattered {
position: relative;
width: 100%;
--review-gutter: clamp(15px, 4.2vw, 22px);
--reviews-mobile-stack: 272px;
--reviews-v-leader: clamp(48px, 11svh, 96px);
--review-card-w: min(100%,
calc(100vw - var(--review-gutter) * 2 - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
min-height: 1520px;
height: 1520px;
}
#reviews .reviews-scattered .review-card {
position: absolute !important;
left: var(--review-gutter) !important;
right: auto !important;
width: var(--review-card-w) !important;
max-width: none;
margin-inline: 0;
min-height: 0;
padding: clamp(18px, 4.6vw, 26px);
border-radius: 8px;
}
#reviews .reviews-scattered .review-card:nth-child(1) {
top: var(--reviews-v-leader);
}
#reviews .reviews-scattered .review-card:nth-child(2) {
top: calc(var(--reviews-v-leader) + var(--reviews-mobile-stack));
}
#reviews .reviews-scattered .review-card:nth-child(3) {
top: calc(var(--reviews-v-leader) + var(--reviews-mobile-stack) * 2);
}
#reviews .reviews-scattered .review-card:nth-child(4) {
top: calc(var(--reviews-v-leader) + var(--reviews-mobile-stack) * 3);
}
#reviews .reviews-scattered .review-card:nth-child(5) {
top: calc(var(--reviews-v-leader) + var(--reviews-mobile-stack) * 4);
}
#reviews .reviews-scattered .review-card p {
font-size: clamp(14px, 3.6vw, 17px);
line-height: 1.48;
}
#reviews .reviews-scattered .review-author span {
color: rgba(160, 164, 168, 0.95);
}
}
@media (min-width: 1201px) {
#insights {
padding-left: max(100px, env(safe-area-inset-left, 0px));
padding-right: max(100px, env(safe-area-inset-right, 0px));
}
}
@media (min-width: 641px) and (max-width: 1024px) {
/* Horizontal strip: horizontal pans stay inside the scroller; vertical passes through to Lenis */
#insights {
overflow-x: visible;
overflow-y: visible;
}
/* Horizontal carousel: swipe / trackpad / scrollbar */
.insights-slider {
touch-action: pan-x pinch-zoom;
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
overscroll-behavior-x: contain;
overscroll-behavior-y: auto;
scroll-snap-type: x proximity;
scroll-padding-inline: max(var(--section-inline), env(safe-area-inset-left, 0px)) max(var(--section-inline), env(safe-area-inset-right, 0px));
padding-bottom: 12px;
outline: none;
}
.insights-slider:focus-visible {
outline: 2px solid rgba(240, 240, 229, 0.45);
outline-offset: 4px;
}
.insights-slider .insights-grid {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
width: max-content;
max-width: none;
margin-bottom: 48px;
gap: 24px;
}
.insights-slider .insight-card {
flex: 0 0 min(380px, 76vw);
max-width: min(420px, 76vw);
scroll-snap-align: start;
scroll-snap-stop: normal;
}
.insights-slider .insight-image-wrap {
height: min(420px, 50svh);
}
}
@media (min-width: 641px) and (max-width: 1024px) and (prefers-reduced-motion: reduce) {
.insights-slider {
scroll-snap-type: none;
}
}
@media (max-width: 900px) {
/* overflow-x clip can block sticky descendants in some browsers; keep headline pin */
#insights {
padding-block: clamp(56px, 12vw, 100px) clamp(48px, 10vw, 80px);
overflow-x: visible;
overflow-y: visible;
}
#insights>.insights-heading {
position: sticky;
top: var(--nav-bar-outer-height);
z-index: 20;
background: var(--black);
padding-top: 12px;
padding-bottom: clamp(14px, 2.5vh, 22px);
margin-bottom: clamp(24px, 6vw, 36px);
}
}
@media (max-width: 640px) {
.insights-slider {
overflow-x: visible;
}
.insights-grid {
grid-template-columns: 1fr;
gap: clamp(32px, 8vw, 52px);
margin-bottom: 40px;
}
/* Base rule is 600px tall — 4:3 on phones */
.insight-image-wrap {
height: auto;
aspect-ratio: 4 / 3;
max-height: none;
min-height: 0;
border-radius: 12px;
}
.insight-content {
padding-top: 12px;
}
.insight-content h3 {
font-size: 18px;
line-height: 1.25;
}
.insights-footer {
justify-content: center;
}
}
@media (max-width: 480px) {
.contact-left h2 {
font-size: clamp(26px, 7vw + 0.5rem, 40px);
margin-bottom: 24px;
}
}
@media (max-width: 640px) {
#cta {
min-height: auto;
height: auto;
padding-block: clamp(64px, 14vw, 96px);
}
#cta h2 {
font-size: clamp(34px, 9.5vw, 52px);
line-height: 1.1;
margin-bottom: clamp(32px, 7vw, 44px);
}
.btn-cta {
padding: 16px 36px;
font-size: 14px;
width: 100%;
max-width: 320px;
}
}
@media (max-width: 900px) {
/* Offerings breakpoints mirror #offerings custom props (pinned padding + asymmetric gutters). */
#offerings {
--offerings-pin-padding-block: clamp(40px, 8svh, 88px);
}
.offerings-eyebrow {
position: relative;
top: auto;
padding-top: 0;
padding-bottom: 0;
margin-bottom: clamp(28px, 6vw, 48px);
}
/*
* Full-viewport hero: one screen on phone/tablet. Center the headline + CTAs vertically
* so space is balanced (no gap only at bottom or top).
*/
#hero {
min-height: auto;
display: block;
}
.hero-video-wrap {
position: relative;
height: 492px;
inset: auto;
}
.hero-content {
position: relative;
z-index: 5;
flex: none;
min-height: 0;
justify-content: flex-start;
padding: clamp(24px, 13vw, 50px) var(--hero-inline) clamp(32px, 11vw, 48px);
background: var(--black);
}
.hero-headline {
margin-top: 0;
max-width: 100%;
align-self: flex-start;
}
.hero-headline h1 {
font-size: clamp(1.75rem, 6.5vw + 0.55rem, 2.75rem);
line-height: 1.08;
}
.hero-bottom {
margin-top: clamp(20px, 5vh, 40px);
justify-content: flex-start;
align-items: flex-start;
}
.hero-right {
text-align: left;
margin-left: 0;
max-width: 100%;
}
.hero-right p.hero-lead {
margin-inline-start: 0;
max-width: 100%;
font-size: clamp(0.9375rem, 3.4vw + 0.6rem, 1.0625rem);
line-height: 1.65;
text-align: left;
}
.hero-buttons {
justify-content: flex-start;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
gap: 12px;
}
#hero .btn-primary,
#hero .btn-outline {
width: auto;
flex: 1;
min-width: 140px;
justify-content: center;
text-align: center;
white-space: nowrap;
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
}
#partners {
padding-block: clamp(24px, 7vw, 56px) clamp(44px, 10vw, 96px);
padding-left: max(var(--partners-inline), env(safe-area-inset-left, 0px));
padding-right: max(var(--partners-inline), env(safe-area-inset-right, 0px));
}
.contact-grid {
grid-template-columns: 1fr;
gap: 60px;
}
.sector-image {
width: 100%;
max-width: none;
}
.reviews-grid {
grid-template-columns: 1fr;
}
.partners-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 901px) and (max-width: 1199px) {
#hero {
min-height: max(100svh, 580px);
}
.hero-content {
flex: 1 1 auto;
min-height: 0;
justify-content: center;
padding:
calc(var(--hero-top-bar-total) + clamp(12px, 3vw, 28px)) var(--hero-inline) max(clamp(20px, 5vh, 44px), env(safe-area-inset-bottom, 0px)) var(--hero-inline);
}
.hero-headline {
margin-top: 0;
}
.hero-bottom {
margin-top: clamp(20px, 5vh, 44px);
}
}
@media (max-width: 640px) {
#partners>h2.partners-eyebrow {
margin-bottom: clamp(1.5rem, 5vw, 2.75rem);
}
.partner-card {
padding:
clamp(20px, 6vw, 40px) clamp(8px, 2.8vw, 20px);
aspect-ratio: 5 / 3;
}
}
@media (max-width: 380px) {
.partner-card span:last-child {
letter-spacing: 0.03em;
}
}
@media (max-width: 920px) and (max-height: 460px) and (orientation: landscape) {
#partners {
padding-block: clamp(28px, 10vh, 64px);
}
#partners>h2.partners-eyebrow {
margin-bottom: clamp(1rem, 5vh, 2rem);
}
.partner-card {
padding-block: clamp(16px, 5vh, 28px);
}
}