:root { /* --svgBgColor: #e7dcc6; */ --svgBgColor: #00071d; --midOverlayBgColor: rgba(0, 47, 61, 0.562); /* SPEED CONTROL */ --dropDur: 1500ms; /* panel drops down */ --holdDur: 3100ms; /* pause after drop */ --leftDur: 2200ms; /* slide left to reveal final */ /* EASING */ --easeDrop: cubic-bezier(0.22, 0.9, 0.2, 1); /* --easeLeft: cubic-bezier(0.2, 0.8, 0.2, 1); */ --easeLeft: cubic-bezier(0.5, 0.5, 0.1, 0.2); --jelloDur: 0.25s; /* total jello time */ --jelloLead: 0.24s; /* 95% of jelloDur (set manually) */ --shiverDur: 0.16s; /* continuous shiver speed during slide */ /* HOME — 4 STAGE CARDS (Engineered section) — QUICK CONTROLS */ --home-stage-font: Rajdhani, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --home-stage-card-bg: rgba(233, 242, 246, 0.06); --home-stage-card-border: rgba(255, 255, 255, 0.14); --home-stage-card-radius: 10px; --home-stage-card-pad: 18px; --home-stage-card-gap: 10px; --home-stage-glow-outline: rgba(233, 242, 246, 0.42); --home-stage-glow-shadow: 0 0 0 1px rgba(233, 242, 246, 0.34), 0 0 26px 6px rgba(120, 190, 255, 0.22); --home-stage-glow-dur: 220ms; --home-stage-heartbeat-dur: 1000ms; --home-stage-card-shadow: 0 14px 36px rgba(0, 0, 0, 0.35); --home-stage-eyebrow-bg: rgba(0, 0, 0, 0.55); --home-stage-eyebrow-color: rgb(242, 251, 255); --home-stage-eyebrow-size: 12px; --home-stage-eyebrow-track: 0.14em; --home-stage-eyebrow-pad: 6px 12px; --home-stage-eyebrow-radius: 8px; --home-stage-title-bg: rgba(0, 0, 0, 0.884); --home-stage-title-color: rgba(5, 9, 18, 0.92); --home-stage-title-size: 22px; --home-stage-title-weight: 700; --home-stage-title-track: 0.1em; --home-stage-title-pad: 12px 14px; --home-stage-title-gap: 14px; --home-stage-title-align: left; --home-stage-title-radius: 0px; --home-stage-text-color: rgba(233, 242, 246, 0.76); --home-stage-text-size: 29px; --home-stage-text-line: 1.3; --home-stage-text-align: center; /* left | justify | center */ --home-stage-hover-zoom: 1; --home-stage-hover-kick-zoom: 1; --home-stage-hover-kick-x: 5px; --home-stage-hover-kick-y: 3px; --home-stage-hover-kick-rot: 0.1deg; --home-stage-hover-kick-dur: 900ms; --home-stage-hover-kick-ease: cubic-bezier(0.18, 0.88, 0.24, 1); --home-stage-hover-drift-x: 1.2px; --home-stage-hover-drift-y: 1px; --home-stage-hover-drift-rot: 0.08deg; --home-stage-hover-drift-scale: 1.004; --home-stage-hover-drift-dur: 2600ms; --home-stage-hover-enter: 180ms; /* HOME — Engineered (left image) overlay copy — QUICK CONTROLS */ --home-eng-copy-font: Rajdhani, system-ui, sans-serif; --home-eng-copy-color: rgba(233, 242, 246, 0.88); /* Final (settled) caption */ --home-eng-copy-size: clamp(32px, 3.6vw, 52px); --home-eng-copy-line: 1.03; --home-eng-copy-weight: 900; --home-eng-copy-track: 0.01em; --home-eng-copy-align: left; --home-eng-copy-maxw: 29ch; --home-eng-copy-pad: 22px 22px 24px; /* Positioning pads (top-left start, bottom-left settle) */ --home-eng-intro-pad-top: 26px; --home-eng-intro-pad-left: 26px; --home-eng-caption-pad-bottom: 26px; --home-eng-caption-pad-left: 26px; --home-eng-settle-y: 0px; --home-eng-copy-offsetY: 0px; --home-eng-copy-shadow: 0 10px 26px rgba(0, 0, 0, 0.55); --home-eng-split-gap: 22px; /* Intro (word-by-word) — QUICK CONTROLS */ --home-eng-intro-color: rgba(233, 242, 246, 0.92); --home-eng-word-start-ms: 100; --home-eng-word-step-ms: 200; --home-eng-punct-pause-ms: 400; --home-eng-reveal-hold-ms: 250; --home-eng-word-fade: 400ms; --home-eng-word-rise: 12px; --home-eng-media-fade: 900ms; /* Boot animation (huge -> settles bottom) */ --home-eng-copy-boot-scale: 2.5; --home-eng-copy-boot-tx: 0px; --home-eng-copy-boot-ty: 0px; --home-eng-copy-boot-dur: 250ms; --home-eng-copy-boot-ease: cubic-bezier(0.2, 0.9, 0.2, 1); /* Swap animation (hover change) */ --home-eng-copy-fadeY: 10px; --home-eng-copy-anim: 420ms; --home-stage-glow-shadow: none; --home-stage-glow-outline: transparent; } .homeSlide { scroll-snap-align: start; scroll-snap-stop: always; } /* Home slide-mode: ONLY the full-screen sections should be snap targets (avoid snapping to individual strip cards) */ html.home-slideMode .stripCard { scroll-snap-align: unset !important; scroll-snap-stop: normal; } .scrollySplit--homeSlide { height: 100vh; height: 100svh; overflow: hidden; } .scrollySplit--homeSlide .container, .scrollySplit--homeSlide .scrollySplit__grid { height: 100%; } .scrollySplit--homeSlide .scrollySplit__mediaCol, .scrollySplit--homeSlide .scrollySplit__contentCol { height: 100%; } .scrollySplit--homeSlide .scrollySplit__mediaSticky { height: 100%; top: 0; } /* keep existing spacing; just make right blocks scroll within the slide */ /* Safety reset: the engineered section itself must not behave like a card */ html.home-slideMode #engineered.scrollySplit--homeSlide, html.home #engineered.scrollySplit--homeSlide { background: transparent; border: 0; border-radius: 0; padding: 0; gap: 0; box-shadow: none; } .scrollySplit--homeSlide .scrollySplit__blocks { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: auto; } /* ------------------------------------------------------------ HOME — 4 STAGE CARDS (Engineered section) - All visual knobs are in :root (top of this file) ------------------------------------------------------------ */ html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__block, html.home #engineered.scrollySplit--homeSlide .scrollySplit__block { font-family: var(--home-stage-font); display: flex; flex-direction: column; background: var(--home-stage-card-bg); border-color: var(--home-stage-card-border); border-radius: var(--home-stage-card-radius); padding: var(--home-stage-card-pad); gap: var(--home-stage-card-gap); box-shadow: var(--home-stage-card-shadow); } html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__blockText, html.home #engineered.scrollySplit--homeSlide .scrollySplit__blockText { margin: auto 0 !important; /* vertical center inside the card */ color: var(--home-stage-text-color); font-size: var(--home-stage-text-size); line-height: var(--home-stage-text-line); text-align: var(--home-stage-text-align); font-weight: 10; } html.home-slideMode #engineered.scrollySplit--homeSlide .gridText, html.home #engineered.scrollySplit--homeSlide .gridText { color: var(--home-stage-text-color); font-size: var(--home-stage-text-size); line-height: var(--home-stage-text-line); text-align: var(--home-stage-text-align); font-weight: 10; } html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__textMotion, html.home #engineered.scrollySplit--homeSlide .scrollySplit__textMotion { display: inline-block; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); transform-origin: center center; transition: transform var(--home-stage-hover-enter) ease; will-change: transform; backface-visibility: hidden; } html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__textMotionInner, html.home #engineered.scrollySplit--homeSlide .scrollySplit__textMotionInner { display: inline-block; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); transform-origin: inherit; will-change: transform; backface-visibility: hidden; } html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__textMotion--title, html.home #engineered.scrollySplit--homeSlide .scrollySplit__textMotion--title, html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__textMotionInner--title, html.home #engineered.scrollySplit--homeSlide .scrollySplit__textMotionInner--title { transform-origin: left center; } html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__textMotion--body, html.home #engineered.scrollySplit--homeSlide .scrollySplit__textMotion--body, html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__textMotionInner--body, html.home #engineered.scrollySplit--homeSlide .scrollySplit__textMotionInner--body { transform-origin: center center; } @keyframes homeStageViscousKick { 0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); } 10% { transform: translate3d( calc(var(--home-stage-hover-kick-x) * -0.85), calc(var(--home-stage-hover-kick-y) * -0.66), 0 ) scale(var(--home-stage-hover-kick-zoom)) rotate(calc(var(--home-stage-hover-kick-rot) * -1)); } 24% { transform: translate3d( calc(var(--home-stage-hover-kick-x) * 0.72), calc(var(--home-stage-hover-kick-y) * -0.28), 0 ) scale(calc(var(--home-stage-hover-zoom) + 0.028)) rotate(calc(var(--home-stage-hover-kick-rot) * 0.7)); } 39% { transform: translate3d( calc(var(--home-stage-hover-kick-x) * -0.38), calc(var(--home-stage-hover-kick-y) * 0.5), 0 ) scale(calc(var(--home-stage-hover-zoom) + 0.014)) rotate(calc(var(--home-stage-hover-kick-rot) * -0.34)); } 56% { transform: translate3d( calc(var(--home-stage-hover-kick-x) * 0.22), calc(var(--home-stage-hover-kick-y) * 0.18), 0 ) scale(calc(var(--home-stage-hover-zoom) + 0.007)) rotate(calc(var(--home-stage-hover-kick-rot) * 0.18)); } 74% { transform: translate3d( calc(var(--home-stage-hover-kick-x) * -0.1), calc(var(--home-stage-hover-kick-y) * -0.08), 0 ) scale(calc(var(--home-stage-hover-zoom) + 0.003)) rotate(calc(var(--home-stage-hover-kick-rot) * -0.08)); } 100% { transform: translate3d(0, 0, 0) scale(var(--home-stage-hover-zoom)) rotate(0deg); } } @keyframes homeStageGhostSettle { 0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); } 20% { transform: translate3d( calc(var(--home-stage-hover-drift-x) * -0.44), calc(var(--home-stage-hover-drift-y) * -0.74), 0 ) scale(var(--home-stage-hover-drift-scale)) rotate(calc(var(--home-stage-hover-drift-rot) * -1)); } 46% { transform: translate3d( calc(var(--home-stage-hover-drift-x) * 0.52), calc(var(--home-stage-hover-drift-y) * -0.14), 0 ) scale(calc(1 + ((var(--home-stage-hover-drift-scale) - 1) * 0.58))) rotate(calc(var(--home-stage-hover-drift-rot) * 0.58)); } 71% { transform: translate3d( calc(var(--home-stage-hover-drift-x) * -0.2), calc(var(--home-stage-hover-drift-y) * 0.38), 0 ) scale(calc(1 + ((var(--home-stage-hover-drift-scale) - 1) * 0.82))) rotate(calc(var(--home-stage-hover-drift-rot) * -0.32)); } 100% { transform: translate3d( calc(var(--home-stage-hover-drift-x) * 0.46), calc(var(--home-stage-hover-drift-y) * 0.18), 0 ) scale(calc(1 + ((var(--home-stage-hover-drift-scale) - 1) * 0.46))) rotate(calc(var(--home-stage-hover-drift-rot) * 0.74)); } } @media (hover: hover) and (pointer: fine) { html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__block:hover .scrollySplit__textMotion, html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__block:focus-visible .scrollySplit__textMotion, html.home #engineered.scrollySplit--homeSlide .scrollySplit__block:hover .scrollySplit__textMotion, html.home #engineered.scrollySplit--homeSlide .scrollySplit__block:focus-visible .scrollySplit__textMotion { animation: homeStageViscousKick var(--home-stage-hover-kick-dur) var(--home-stage-hover-kick-ease) 1 both; } html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__block:hover .scrollySplit__textMotionInner, html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__block:focus-visible .scrollySplit__textMotionInner, html.home #engineered.scrollySplit--homeSlide .scrollySplit__block:hover .scrollySplit__textMotionInner, html.home #engineered.scrollySplit--homeSlide .scrollySplit__block:focus-visible .scrollySplit__textMotionInner { animation: homeStageGhostSettle var(--home-stage-hover-drift-dur) linear infinite; animation-delay: calc(var(--home-stage-hover-kick-dur) * 0.68); } html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__block:hover .scrollySplit__textMotionInner--title, html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__block:focus-visible .scrollySplit__textMotionInner--title, html.home #engineered.scrollySplit--homeSlide .scrollySplit__block:hover .scrollySplit__textMotionInner--title, html.home #engineered.scrollySplit--homeSlide .scrollySplit__block:focus-visible .scrollySplit__textMotionInner--title { animation-delay: calc(var(--home-stage-hover-kick-dur) * 0.68 - 120ms); } html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__block:hover .scrollySplit__textMotionInner--body, html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__block:focus-visible .scrollySplit__textMotionInner--body, html.home #engineered.scrollySplit--homeSlide .scrollySplit__block:hover .scrollySplit__textMotionInner--body, html.home #engineered.scrollySplit--homeSlide .scrollySplit__block:focus-visible .scrollySplit__textMotionInner--body { animation-delay: calc(var(--home-stage-hover-kick-dur) * 0.68 - 360ms); } } html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__eyebrow, html.home #engineered.scrollySplit--homeSlide .scrollySplit__eyebrow { background: var(--home-stage-eyebrow-bg); color: var(--home-stage-eyebrow-color); font-size: var(--home-stage-eyebrow-size); letter-spacing: var(--home-stage-eyebrow-track); padding: var(--home-stage-eyebrow-pad); border-radius: var(--home-stage-eyebrow-radius); display: inline-flex; align-self: flex-start; } html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__blockTitle, html.home #engineered.scrollySplit--homeSlide .scrollySplit__blockTitle, html.home-slideMode #engineered.scrollySplit--homeSlide .gridTitle, html.home #engineered.scrollySplit--homeSlide .gridTitle { background: var(--home-stage-title-bg); color: var(--home-stage-title-color); font-size: var(--home-stage-title-size); font-weight: var(--home-stage-title-weight); letter-spacing: var(--home-stage-title-track); text-align: var(--home-stage-title-align); padding: var(--home-stage-title-pad); border-radius: var(--home-stage-title-radius); margin: 0 calc(-1 * var(--home-stage-card-pad)) var(--home-stage-title-gap); } /* keep clamps out of the way for home stage cards (let you tune text via vars) */ html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__blockTitle, html.home #engineered.scrollySplit--homeSlide .scrollySplit__blockTitle, html.home-slideMode #engineered.scrollySplit--homeSlide .gridTitle, html.home #engineered.scrollySplit--homeSlide .gridTitle, html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__blockText, html.home #engineered.scrollySplit--homeSlide .scrollySplit__blockText, html.home-slideMode #engineered.scrollySplit--homeSlide .gridText, html.home #engineered.scrollySplit--homeSlide .gridText { -webkit-line-clamp: unset; } /* ------------------------------------------------------------ HOME — Engineered overlay copy on the left image ------------------------------------------------------------ */ html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__mediaFrame, html.home #engineered.scrollySplit--homeSlide .scrollySplit__mediaFrame { /* Force full-height media for HOME engineered slide */ height: 100%; min-height: 0; max-height: none; overflow: hidden; /* clip the huge->caption animation inside the image area */ background: #000; } /* Default: left is black. Images appear only on hover (data-eng-media="1"). */ html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__mediaSlot, html.home #engineered.scrollySplit--homeSlide .scrollySplit__mediaSlot { opacity: 0; transition: opacity var(--home-eng-media-fade) ease; } html.home-slideMode #engineered.scrollySplit--homeSlide[data-eng-media="1"] .scrollySplit__mediaSlot.is-active, html.home #engineered.scrollySplit--homeSlide[data-eng-media="1"] .scrollySplit__mediaSlot.is-active { opacity: 1; } html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__mediaBase, html.home #engineered.scrollySplit--homeSlide .scrollySplit__mediaBase { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--home-eng-media-fade) ease; } html.home-slideMode #engineered.scrollySplit--homeSlide .scrollySplit__mediaBaseItem, html.home #engineered.scrollySplit--homeSlide .scrollySplit__mediaBaseItem { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transform: scale(1.02); transition: transform 0.9s cubic-bezier(0.2, 0.9, 0, 1); } html.home-slideMode #engineered.scrollySplit--homeSlide .engineeredTileMask, html.home #engineered.scrollySplit--homeSlide .engineeredTileMask { position: absolute; inset: 0; z-index: 16; display: grid; grid-template-columns: repeat(var(--cols, 1), var(--cell, 48px)); grid-auto-rows: var(--cell, 48px); width: 100%; height: 100%; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--hero-tile-fade, 660ms) ease-out, visibility 0s linear var(--hero-tile-fade, 660ms); } html.home-slideMode #engineered.scrollySplit--homeSlide .engineeredTileMask .mosaic__cell, html.home #engineered.scrollySplit--homeSlide .engineeredTileMask .mosaic__cell { opacity: 1; } html.home-slideMode #engineered.scrollySplit--homeSlide[data-eng-tiles="1"] .engineeredTileMask, html.home #engineered.scrollySplit--homeSlide[data-eng-tiles="1"] .engineeredTileMask { opacity: 1; visibility: visible; transition-delay: 0s; } html.home-slideMode #engineered.scrollySplit--homeSlide[data-eng-base="1"] .scrollySplit__mediaBase, html.home #engineered.scrollySplit--homeSlide[data-eng-base="1"] .scrollySplit__mediaBase { opacity: 1; } html.home-slideMode #engineered.scrollySplit--homeSlide[data-eng-base="1"] .scrollySplit__mediaBaseItem, html.home #engineered.scrollySplit--homeSlide[data-eng-base="1"] .scrollySplit__mediaBaseItem { transform: scale(1); } html.home-slideMode #engineered.scrollySplit--homeSlide /* HOME (Engineered) — overlay intro/caption copy positioning */ .engineeredHoverCopy, html.home #engineered.scrollySplit--homeSlide .engineeredHoverCopy { position: absolute; inset: 0; pointer-events: none; z-index: 30; } html.home-slideMode #engineered.scrollySplit--homeSlide .engineeredHoverCopy__text, html.home #engineered.scrollySplit--homeSlide .engineeredHoverCopy__text { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; opacity: 0; transition: opacity 160ms ease; } html.home-slideMode #engineered.scrollySplit--homeSlide .engineeredHoverCopy.is-animating .engineeredHoverCopy__text, html.home #engineered.scrollySplit--homeSlide .engineeredHoverCopy.is-animating .engineeredHoverCopy__text, html.home-slideMode #engineered.scrollySplit--homeSlide .engineeredHoverCopy.is-svg-caption .engineeredHoverCopy__text, html.home #engineered.scrollySplit--homeSlide .engineeredHoverCopy.is-svg-caption .engineeredHoverCopy__text { opacity: 1; } html.home-slideMode #engineered.scrollySplit--homeSlide .engineeredHoverCopy.is-svg-caption .engineeredHoverCopy__caption, html.home #engineered.scrollySplit--homeSlide .engineeredHoverCopy.is-svg-caption .engineeredHoverCopy__caption { opacity: 0; } html.home-slideMode #engineered.scrollySplit--homeSlide .engineeredHoverCopy__caption, html.home #engineered.scrollySplit--homeSlide .engineeredHoverCopy__caption { position: absolute; left: var(--home-eng-caption-pad-left); right: var(--home-eng-caption-pad-left); bottom: var(--home-eng-caption-pad-bottom); z-index: 31; display: flex; flex-direction: column; gap: clamp(6px, 1.2vw, 16px); color: var(--home-eng-copy-color); font-family: var(--home-eng-copy-font); font-size: var(--home-eng-copy-size); font-weight: var(--home-eng-copy-weight); line-height: var(--home-eng-copy-line); letter-spacing: var(--home-eng-copy-track); text-align: center; text-shadow: var(--home-eng-copy-shadow); transform: translateY(var(--home-eng-settle-y)); opacity: 1; transition: opacity 140ms ease; } html.home-slideMode #engineered.scrollySplit--homeSlide .engineeredHoverCopy__caption[hidden], html.home #engineered.scrollySplit--homeSlide .engineeredHoverCopy__caption[hidden] { display: none !important; } html.home-slideMode #engineered.scrollySplit--homeSlide .engineeredHoverCopy.is-animating .engineeredHoverCopy__caption, html.home #engineered.scrollySplit--homeSlide .engineeredHoverCopy.is-animating .engineeredHoverCopy__caption { opacity: 0; } html.home-slideMode #engineered.scrollySplit--homeSlide .engineeredHoverCopy__line, html.home #engineered.scrollySplit--homeSlide .engineeredHoverCopy__line { width: 100%; margin: 0; } html.home-slideMode #engineered.scrollySplit--homeSlide .engineeredHoverCopy__line--hover, html.home #engineered.scrollySplit--homeSlide .engineeredHoverCopy__line--hover { white-space: pre-line; text-align: center; } html.home-slideMode #engineered.scrollySplit--homeSlide .engineeredHoverCopy__line--split, html.home #engineered.scrollySplit--homeSlide .engineeredHoverCopy__line--split { display: flex; align-items: baseline; justify-content: center; gap: clamp(12px, 1.6vw, 26px); width: max-content; max-width: 100%; margin-inline: auto; } html.home-slideMode #engineered.scrollySplit--homeSlide .engineeredHoverCopy__part, html.home #engineered.scrollySplit--homeSlide .engineeredHoverCopy__part { display: inline-block; max-width: none; } html.home-slideMode #engineered.scrollySplit--homeSlide .engineeredHoverCopy__part--left, html.home #engineered.scrollySplit--homeSlide .engineeredHoverCopy__part--left, html.home-slideMode #engineered.scrollySplit--homeSlide .engineeredHoverCopy__part--right, html.home #engineered.scrollySplit--homeSlide .engineeredHoverCopy__part--right { text-align: center; } html.home-slideMode #engineered.scrollySplit--homeSlide .engineeredHoverCopy__text .engWordNode, html.home #engineered.scrollySplit--homeSlide .engineeredHoverCopy__text .engWordNode { fill: var(--home-eng-copy-color); font-family: var(--home-eng-copy-font); font-weight: var(--home-eng-copy-weight); letter-spacing: var(--home-eng-copy-track); text-rendering: geometricPrecision; dominant-baseline: middle; text-anchor: middle; paint-order: stroke fill; text-shadow: var(--home-eng-copy-shadow); } html.home-slideMode #engineered.scrollySplit--homeSlide .engineeredHoverCopy__text .engWordNode.is-moving, html.home #engineered.scrollySplit--homeSlide .engineeredHoverCopy__text .engWordNode.is-moving { fill: var(--home-eng-intro-color); } /* ------------------------------------------------------------ Home slide-mode: Desktop / large screens (all monitors) - NEVER show more than 4 blocks at once (2x2) - Scroll inside for additional blocks ------------------------------------------------------------ */ @media (min-width: 900px) { html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blocks, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blocks { --ss-block-gap: 14px; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-rows: calc((100% - var(--ss-block-gap)) / 2); gap: var(--ss-block-gap) !important; padding: 14px 16px !important; overflow: auto; overscroll-behavior: contain; align-content: start; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__block, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__block { height: 100%; min-height: 0 !important; overflow: hidden; } } /* PLR: ensure media frame is positioning context */ .scrollySplit__mediaFrame { position: relative; } html.home-slideMode { scroll-snap-type: y mandatory; scroll-behavior: auto; overscroll-behavior-y: none; } .homeSlide { scroll-snap-align: start; scroll-snap-stop: always; height: 100vh; height: 100svh; overflow: hidden; } @media (min-width: 981px) { html.home-slideMode, html.home-slideMode body { scroll-snap-type: none !important; } html.home-slideMode .homeSlide, html.home-slideMode .stripCard { scroll-snap-align: none !important; scroll-snap-stop: normal !important; } } /* ------------------------------------------------------------ Home: Testimonials + Footer must fit in one screen ------------------------------------------------------------ */ html.home #testimonials_strip.homeSlide { display: flex; flex-direction: column; /* override stripSection padding so footer can fit */ padding: clamp(80px, 4vh, 48px) 0 0; } html.home #testimonials_strip.homeSlide .siteFooter--embed { margin-top: auto; } html.home #testimonials_strip.homeSlide .siteFooter--embed .siteFooter__inner { padding: 18px clamp(18px, 3vw, 44px) 12px; } html.home #testimonials_strip.homeSlide .siteFooter--embed .footerBar { margin-top: 18px; padding-top: 12px; } /* right-side blocks must be the scrolling area */ .homeSlide .scrollySplit__contentCol { /* height: 100%; */ overflow: hidden; } .homeSlide .scrollySplit__blocks { height: 100%; overflow-y: auto; overscroll-behavior: contain; } /* === PLR patch: snap container should be html (avoid body snap glitches) === */ html.home-slideMode { scroll-snap-type: y mandatory; } html.home-slideMode body { scroll-snap-type: y mandatory; } /* === Hide scrollbars in slide mode (page + blocks) === */ html.home-slideMode { scrollbar-width: none; -ms-overflow-style: none; } html.home-slideMode body { scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-y: none; } html.home-slideMode::-webkit-scrollbar, html.home-slideMode body::-webkit-scrollbar { width: 0; height: 0; } html.home-slideMode .scrollySplit__blocks { scrollbar-width: none; -ms-overflow-style: none; } html.home-slideMode .scrollySplit__blocks::-webkit-scrollbar { width: 0; height: 0; } /* === Hover lock: prevent instant hover expand/pause when a slide lands under the mouse === */ html.plr-hoverlock .dualStrips { --dual-hover-delay: 650ms; } @media (hover: hover) { html.plr-hoverlock .stripMarquee:hover .stripMarquee__track { animation-play-state: running !important; } } /* ------------------------------------------------------------ Home slide-mode: eliminate tall-screen blank space by letting marquee/cards grow to fill remaining vertical space. (Capabilities/Offerings + Testimonials) ------------------------------------------------------------ */ /* Capabilities + Offerings (dualStrips slide) */ html.home-slideMode #capabilities_offerings.homeSlide { align-items: stretch; } html.home-slideMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection { /* remove bottom padding that creates a "dead" area on tall screens */ padding-bottom: 0; display: flex; flex-direction: column; min-height: 0; } html.home-slideMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .stripMarquee { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; } html.home-slideMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .stripMarquee > .stripMarquee__track { height: 100%; /* keep the runway feel but avoid "poster-tall" cards on large screens */ grid-template-rows: repeat( 2, var(--slide-dual-row-h, clamp(210px, 26vh, 320px)) ); align-content: center; } html.home-slideMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .stripMarquee > .stripMarquee__track .stripCard { height: auto; } /* Testimonials + embedded footer (single slide) */ html.home-slideMode #testimonials_strip.homeSlide { min-height: 0; } html.home-slideMode #testimonials_strip.homeSlide > .stripMarquee { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; } html.home-slideMode #testimonials_strip.homeSlide .stripMarquee__track { height: 100%; /* align-items: center; */ } html.home-slideMode #testimonials_strip.homeSlide .stripMarquee__track .stripCard { height: var(--slide-test-card-h, clamp(320px, 44vh, 320px)); } /* ------------------------------------------------------------ Home slide-mode: responsive tuning (narrow widths) ------------------------------------------------------------ */ /* DualStrips becomes stacked (no runway) under 980px. In slide-mode, keep cards tight under headings (no vertical centering). */ @media (max-width: 1100px) and (any-pointer: coarse) { html.home-slideMode.home-dual-touchMode #capabilities_offerings.homeSlide .dualStrips { height: 100%; } html.home-slideMode.home-dual-touchMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .stripMarquee { padding-top: 6px; padding-bottom: 10px; } html.home-slideMode.home-dual-touchMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .stripMarquee > .stripMarquee__track { align-content: start; --slide-dual-row-h: clamp(160px, 20vh, 230px); } } /* ============================================================ HOME — TESTIMONIALS (responsive rules) Requirements: - No repeated/small "Testimonials" heading (handled in PHP by suppressing kicker) - Cards remain perfectly square at every breakpoint - Title sits closer to top ("-60px" feel) without overlap - Copyright/social bar pinned to bottom - Layout Mode 1: split into 2 slides on tight viewports ============================================================ */ /* Default: ONE slide (Testimonials + Bottom Links together). Hide the dedicated bottom-links slide. */ html.home #bottom_links_slide, html.home-slideMode #bottom_links_slide { display: none; } /* Mobile (<=980px): ALWAYS split Testimonials + Bottom Links into TWO slides */ @media (max-width: 980px) { html.home #testimonials_strip, html.home-slideMode #testimonials_strip { height: 100svh; min-height: 100svh; max-height: 100svh; overflow: hidden; } html.home #testimonials_strip .siteFooter--embed, html.home-slideMode #testimonials_strip .siteFooter--embed { display: none !important; } /* Bottom-links slide: keep social bar visible; links scroll inside */ html.home #bottom_links_slide, html.home-slideMode #bottom_links_slide { display: block !important; padding: 0 !important; height: 100svh; min-height: 100svh; max-height: 100svh; overflow: hidden !important; touch-action: pan-y; } html.home #bottom_links_slide .siteFooter--embed, html.home-slideMode #bottom_links_slide .siteFooter--embed { height: 100%; } html.home #bottom_links_slide .siteFooter__inner, html.home-slideMode #bottom_links_slide .siteFooter__inner { height: 100%; min-height: 100%; display: flex; flex-direction: column; padding-bottom: 8px; } html.home #bottom_links_slide .footerCols, html.home-slideMode #bottom_links_slide .footerCols { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; padding-bottom: 10px; } html.home #bottom_links_slide .footerBar, html.home-slideMode #bottom_links_slide .footerBar { margin-top: auto !important; padding-top: 10px; height: 25%; } } /* 375×667 (and similar): compact footer so social icons always stay visible */ @media (max-width: 390px) and (max-height: 700px) { html.home #bottom_links_slide .siteFooter__inner, html.home-slideMode #bottom_links_slide .siteFooter__inner { padding: 12px 12px 6px; } html.home #bottom_links_slide .footerCols, html.home-slideMode #bottom_links_slide .footerCols { gap: 10px; } html.home #bottom_links_slide .footerColTitle, html.home-slideMode #bottom_links_slide .footerColTitle { font-size: 10px; margin-bottom: 5px; } html.home #bottom_links_slide .footerLink, html.home-slideMode #bottom_links_slide .footerLink { font-size: 12px; /* padding: 3px 0; */ padding: 1vh; line-height: 1.15; } html.home #bottom_links_slide .footerBar, html.home-slideMode #bottom_links_slide .footerBar { padding-top: 8px; } } /* Testimonials slide base layout */ html.home #testimonials_strip.homeSlide, html.home-slideMode #testimonials_strip.homeSlide { /* override stripSection padding so title sits higher */ padding: 18px 0 0 !important; display: flex; flex-direction: column; min-height: 100svh; overflow: hidden; } /* Title block closer to top; keep spacing clean so cards never hide under it */ html.home #testimonials_strip.homeSlide .stripHeader, html.home-slideMode #testimonials_strip.homeSlide .stripHeader { margin: 0 0 10px !important; } /* Hide repeated small 'Testimonials' kicker text; keep only the large title */ html.home #testimonials_strip.homeSlide .stripHeader .kicker, html.home-slideMode #testimonials_strip.homeSlide .stripHeader .kicker { display: none !important; } /* Cards area grows; footer stays at bottom */ html.home #testimonials_strip.homeSlide > .stripMarquee, html.home-slideMode #testimonials_strip.homeSlide > .stripMarquee { flex: 1 1 auto; min-height: 0; padding-top: 6px !important; padding-bottom: 10px !important; } html.home #testimonials_strip.homeSlide .siteFooter--embed, html.home-slideMode #testimonials_strip.homeSlide .siteFooter--embed { margin-top: auto; flex: 0 0 auto; } /* Footer internals: distribute links, pin bar to bottom */ html.home #testimonials_strip.homeSlide .siteFooter--embed .siteFooter__inner, html.home-slideMode #testimonials_strip.homeSlide .siteFooter--embed .siteFooter__inner, html.home #bottom_links_slide .siteFooter--embed .siteFooter__inner, html.home-slideMode #bottom_links_slide .siteFooter--embed .siteFooter__inner { display: flex; flex-direction: column; min-height: 0; } html.home #testimonials_strip.homeSlide .siteFooter--embed .footerCols, html.home-slideMode #testimonials_strip.homeSlide .siteFooter--embed .footerCols, html.home #bottom_links_slide .siteFooter--embed .footerCols, html.home-slideMode #bottom_links_slide .siteFooter--embed .footerCols { flex: 1 1 auto; /* align-content: space-between; */ row-gap: 25px; margin-bottom: 100px; } html.home #testimonials_strip.homeSlide .siteFooter--embed .footerBar, html.home-slideMode #testimonials_strip.homeSlide .siteFooter--embed .footerBar, html.home #bottom_links_slide .siteFooter--embed .footerBar, html.home-slideMode #bottom_links_slide .siteFooter--embed .footerBar { margin-top: auto; /* max-height: 50px; */ /* height: 50px; */ } /* Square testimonial cards */ html.home #testimonials_strip.homeSlide .stripCard, html.home-slideMode #testimonials_strip.homeSlide .stripCard { aspect-ratio: 1 / 1; width: var(--t-card, clamp(200px, 42vw, 320px)); min-height: 0 !important; height: auto !important; } /* ------------------------------------------------------------ LAYOUT MODE 2 — COMBINED slide (Testimonials + Bottom Links in ONE slide) Targets (explicitly requested): 768×1024, 820×1180, 1024×1366, 912×1368, 540×720, 344×882, 853×1280, 1024×600 - Testimonials region: 55% of viewport height - Bottom links + social: 45% of viewport height - Keep square cards within the 55% region (with padding) and title never overlaps - Keep marquee auto-scroll running ------------------------------------------------------------ */ /* Tablets + mid screens (includes 540×720, iPads, 1024×600/1366, etc) */ @media (min-width: 540px) and (max-width: 1024px) and (min-height: 600px) { /* Force ONE slide (override mobile split) */ html.home #testimonials_strip .siteFooter--embed, html.home-slideMode #testimonials_strip .siteFooter--embed { display: block !important; } html.home #bottom_links_slide, html.home-slideMode #bottom_links_slide { display: none !important; } html.home #testimonials_strip.homeSlide, html.home-slideMode #testimonials_strip.homeSlide { padding: 0 !important; height: 100svh; min-height: 100svh; max-height: 100svh; display: flex; flex-direction: column; overflow: hidden; --combo-footer-h: calc(100svh * 0.45); --combo-test-h: calc(100svh - var(--combo-footer-h)); --combo-card: min( 420px, calc(var(--combo-test-h) - 92px), calc(100vw - 2 * clamp(18px, 4vw, 44px) - 14px) ); } html.home #testimonials_strip.homeSlide .stripHeader, html.home-slideMode #testimonials_strip.homeSlide .stripHeader { margin: 0 !important; padding: 12px clamp(18px, 4vw, 44px) 4px; } html.home #testimonials_strip.homeSlide > .stripMarquee, html.home-slideMode #testimonials_strip.homeSlide > .stripMarquee { flex: 1 1 auto; /* takes remaining 55% */ min-height: 0; overflow: hidden; padding: 0 clamp(12px, 2.6vw, 24px) 10px; } /* Footer takes fixed 45% */ html.home #testimonials_strip.homeSlide .siteFooter--embed, html.home-slideMode #testimonials_strip.homeSlide .siteFooter--embed { flex: 0 0 var(--combo-footer-h); height: var(--combo-footer-h); min-height: 0; margin-top: 0 !important; overflow: hidden; } /* Marquee track + cards fit inside the 55% region */ html.home #testimonials_strip.homeSlide .stripMarquee__track, html.home-slideMode #testimonials_strip.homeSlide .stripMarquee__track { height: 100%; align-items: center; animation-play-state: running !important; } html.home #testimonials_strip.homeSlide .stripCard, html.home-slideMode #testimonials_strip.homeSlide .stripCard { aspect-ratio: 1 / 1; width: var(--combo-card); height: auto !important; min-height: 0 !important; margin: 7px; /* isolated from edges + between cards */ } /* Footer compacting to fit 45% */ html.home #testimonials_strip.homeSlide .siteFooter--embed .siteFooter__inner, html.home-slideMode #testimonials_strip.homeSlide .siteFooter--embed .siteFooter__inner { height: 100%; min-height: 0; padding: 12px clamp(14px, 2.2vw, 22px) 6px; } html.home #testimonials_strip.homeSlide .siteFooter--embed .footerCols, html.home-slideMode #testimonials_strip.homeSlide .siteFooter--embed .footerCols { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } html.home #testimonials_strip.homeSlide .siteFooter--embed .footerColTitle, html.home-slideMode #testimonials_strip.homeSlide .siteFooter--embed .footerColTitle { font-size: 11px; margin-bottom: 6px; } html.home #testimonials_strip.homeSlide .siteFooter--embed .footerLink, html.home-slideMode #testimonials_strip.homeSlide .siteFooter--embed .footerLink { font-size: 13px; /* padding: 4px 0; */ padding-top: 1vh; line-height: 1.25; } html.home #testimonials_strip.homeSlide .siteFooter--embed .footerBar, html.home-slideMode #testimonials_strip.homeSlide .siteFooter--embed .footerBar { padding-top: 6px; margin-top: auto !important; height: 25%; } } /* Wider tablets (1024×1366 etc): allow 4 columns to reduce height pressure */ @media (min-width: 900px) and (max-width: 1024px) and (min-height: 600px) { html.home #testimonials_strip.homeSlide .siteFooter--embed .footerCols, html.home-slideMode #testimonials_strip.homeSlide .siteFooter--embed .footerCols { /* grid-template-columns: repeat(3, minmax(0, 1fr)); */ grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* Narrow tablets (540×720): 2 columns fits better in 45% */ @media (min-width: 540px) and (max-width: 620px) and (min-height: 600px) { html.home #testimonials_strip.homeSlide .siteFooter--embed .footerCols, html.home-slideMode #testimonials_strip.homeSlide .siteFooter--embed .footerCols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } } /* Narrow/tall (344×882): keep ONE slide + tighter footer (2 columns) */ @media (max-width: 359px) and (min-height: 820px) { /* Keep default mobile split (two slides). Just compact footer a bit more. */ html.home #bottom_links_slide .siteFooter__inner, html.home-slideMode #bottom_links_slide .siteFooter__inner { padding: 14px 12px 6px; } html.home #bottom_links_slide .footerCols, html.home-slideMode #bottom_links_slide .footerCols { gap: 10px; } html.home #bottom_links_slide .footerColTitle, html.home-slideMode #bottom_links_slide .footerColTitle { font-size: 10px; margin-bottom: 5px; } html.home #bottom_links_slide .footerLink, html.home-slideMode #bottom_links_slide .footerLink { font-size: 12px; /* padding: 3px 0; */ padding-top: 1.5vh; line-height: 1.15; } html.home #bottom_links_slide .footerBar, html.home-slideMode #bottom_links_slide .footerBar { padding-top: 8px; } } /* ------------------------------------------------------------ LAYOUT MODE 1 — split into TWO slides Trigger: - height <= 450px OR - width <= 430px AND height <= 750px ------------------------------------------------------------ */ @media (max-height: 450px), (max-width: 430px) and (max-height: 750px) { /* Hide embedded footer inside testimonials; show dedicated bottom-links slide */ html.home #testimonials_strip.homeSlide .siteFooter--embed, html.home-slideMode #testimonials_strip.homeSlide .siteFooter--embed { display: none !important; } html.home #bottom_links_slide, html.home-slideMode #bottom_links_slide { display: block; padding: 0 !important; min-height: 100svh; overflow: hidden; } html.home #bottom_links_slide .siteFooter--embed, html.home-slideMode #bottom_links_slide .siteFooter--embed { height: 100%; } /* Smaller cards so they fully fit in the reduced space */ html.home #testimonials_strip.homeSlide, html.home-slideMode #testimonials_strip.homeSlide { padding-top: 12px !important; } html.home #testimonials_strip.homeSlide .stripCard, html.home-slideMode #testimonials_strip.homeSlide .stripCard { width: var(--t-card, clamp(160px, 28vh, 220px)); } } /* ------------------------------------------------------------ LAYOUT MODE 3 — tablet portrait emphasis (2 cards visible) Trigger: 540px <= width <= 820px AND height >= 720px ------------------------------------------------------------ */ @media (min-width: 540px) and (max-width: 820px) and (min-height: 720px) { html.home #testimonials_strip.homeSlide .stripCard, html.home-slideMode #testimonials_strip.homeSlide .stripCard { width: calc((100vw - 2 * clamp(18px, 4vw, 44px) - 14px) / 2); } } /* ------------------------------------------------------------ LAYOUT MODE 4 — large tablet / iPad Pro / big screens Trigger: width >= 853px AND height >= 912px - Bigger cards (2 fit comfortably) - Bottom links region ~48% of height - Bottom links font +2px ------------------------------------------------------------ */ @media (min-width: 853px) and (min-height: 912px) { html.home #testimonials_strip.homeSlide, html.home-slideMode #testimonials_strip.homeSlide { --footer-share: 0.48; } html.home #testimonials_strip.homeSlide .siteFooter--embed, html.home-slideMode #testimonials_strip.homeSlide .siteFooter--embed { flex: 0 0 calc(100svh * var(--footer-share)); } html.home #testimonials_strip.homeSlide .siteFooter--embed .footerLink, html.home-slideMode #testimonials_strip.homeSlide .siteFooter--embed .footerLink { font-size: 15px; } html.home #testimonials_strip.homeSlide, html.home-slideMode #testimonials_strip.homeSlide { --t-card-fhd: min( 320px, calc((100vw - 2 * clamp(18px, 4vw, 64px) - 14px) / 2) ); } html.home #testimonials_strip.homeSlide .stripCard, html.home-slideMode #testimonials_strip.homeSlide .stripCard { width: var(--t-card-fhd); height: var(--t-card-fhd); min-height: var(--t-card-fhd) !important; max-height: var(--t-card-fhd); } } /* ScrollySplit turns into a single column under 920px. In slide-mode, force a fixed media row + scrolling blocks row. */ @media (max-width: 920px) { html.home-slideMode .scrollySplit--homeSlide .scrollySplit__grid { grid-template-columns: 1fr; grid-template-rows: clamp(240px, 36svh, 360px) 1fr; } html.home-slideMode .scrollySplit--homeSlide .scrollySplit__mediaCol, html.home-slideMode .scrollySplit--homeSlide .scrollySplit__contentCol { height: auto; min-height: 0; } html.home-slideMode .scrollySplit--homeSlide .scrollySplit__mediaSticky { position: relative; top: auto !important; height: 100%; } html.home-slideMode .scrollySplit--homeSlide .scrollySplit__mediaSticky.has-meta { height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; } html.home-slideMode .scrollySplit--homeSlide .scrollySplit__mediaFrame { height: 100%; max-height: none; min-height: 0; } html.home-slideMode .scrollySplit--homeSlide .scrollySplit__metaBar { padding: 10px 12px; gap: 12px; } html.home-slideMode .scrollySplit--homeSlide .scrollySplit__metaTitle { font-size: clamp(16px, 3.2vw, 22px); } html.home-slideMode .scrollySplit--homeSlide .scrollySplit__metaLead { padding: 10px 12px; font-size: 13px; line-height: 1.5; } html.home-slideMode .scrollySplit--homeSlide .scrollySplit__blocks { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: auto; } html.home-slideMode .scrollySplit--homeSlide .scrollySplit__block { padding: 16px 16px; gap: 8px; } html.home-slideMode .scrollySplit--homeSlide .scrollySplit__blockText { line-height: 1.55; } /* Optional: subtle fade to hint internal scroll on the block list */ html.home-slideMode .scrollySplit--homeSlide .scrollySplit__contentCol { position: relative; } html.home-slideMode .scrollySplit--homeSlide .scrollySplit__contentCol::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38px; pointer-events: none; background: linear-gradient( 180deg, rgba(7, 10, 12, 0), rgba(7, 10, 12, 0.75) ); } } @media (max-width: 640px) { html.home-slideMode .scrollySplit--homeSlide .scrollySplit__grid { grid-template-rows: clamp(220px, 32svh, 320px) 1fr; } html.home-slideMode .scrollySplit--homeSlide .scrollySplit__blockTitle { -webkit-line-clamp: 1; } html.home-slideMode .scrollySplit--homeSlide .scrollySplit__blockText { -webkit-line-clamp: 3; } /* Testimonials: keep cards compact so footer remains visible */ html.home-slideMode #testimonials_strip.homeSlide .stripMarquee__track { align-items: start; } html.home-slideMode #testimonials_strip.homeSlide .stripMarquee__track .stripCard { height: var(--slide-test-card-h, clamp(220px, 30svh, 280px)); } } /* ------------------------------------------------------------ Home slide-mode: iPhone SE (very small viewport) - Bigger image - Hide media lead line - Compact cards (hide 01/02, tighter title bar + text) ------------------------------------------------------------ */ @media (max-width: 430px) and (max-height: 750px) { /* make image a bit taller on short devices */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__grid, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__grid { grid-template-rows: clamp(260px, 44svh, 340px) 1fr; } /* force media row above blocks even for flipped sections */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaCol, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaCol { grid-row: 1; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__contentCol, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__contentCol { grid-row: 2; } /* remove the "lead" text under the image (wastes precious height) */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__metaLead, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__metaLead { display: none !important; } /* when lead is hidden, collapse sticky media to 2 rows (bar + image) */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaSticky.has-meta, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaSticky.has-meta { grid-template-rows: auto minmax(0, 1fr) !important; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaSticky.has-meta .scrollySplit__metaBar, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaSticky.has-meta .scrollySplit__metaBar { grid-row: 1 !important; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaSticky.has-meta .scrollySplit__mediaFrame, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaSticky.has-meta .scrollySplit__mediaFrame { grid-row: 2 !important; } /* tighter meta bar (header background) */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__metaBar, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__metaBar { padding: 6px 10px !important; gap: 10px !important; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__metaTitle, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__metaTitle { font-size: 15px !important; line-height: 1.15 !important; } /* block list: show exactly 2 blocks per screen (scroll for more) */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blocks, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blocks { --ss-block-gap: 10px; display: grid !important; grid-auto-flow: row; grid-auto-rows: calc((100% - var(--ss-block-gap)) / 2); gap: var(--ss-block-gap) !important; padding: 10px 10px !important; overflow: auto; overscroll-behavior: contain; align-content: start; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__block, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__block { height: 100%; min-height: 0 !important; overflow: hidden; padding: 12px 12px !important; gap: 8px !important; } /* hide 01/02 labels (eyebrow) to remove the black top strip */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__eyebrow, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__eyebrow { display: none !important; } /* title bar: smaller + margins matched to 12px padding */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blockTitle, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blockTitle { padding: 9px 12px !important; margin: 0 -12px 10px -12px !important; font-size: 13px !important; letter-spacing: 0.06em !important; opacity: 1 !important; visibility: visible !important; position: relative; z-index: 2; /* Ensure title stays readable even if other theme rules flip colors */ color: rgba(0, 0, 0, 0.92) !important; background: rgba(255, 255, 255, 0.45) !important; } /* text: allow more content while staying tidy */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blockText, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blockText { margin-top: 0 !important; font-size: 13px !important; line-height: 1.55 !important; -webkit-line-clamp: 5 !important; opacity: 1 !important; visibility: visible !important; position: relative; z-index: 2; color: rgba(233, 242, 246, 0.8) !important; } /* no scroll-hint fade on tiny screens */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__contentCol::after, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__contentCol::after { display: none !important; } } /* ------------------------------------------------------------ Home slide-mode: iPhone XR / tall phones (~414x896) - Image ~60% height - Blocks area ~40% height, shows 2 blocks at a time (scroll for more) - Hide media lead + 01/02 eyebrow strip ------------------------------------------------------------ */ @media (max-width: 430px) and (min-height: 751px) and (max-height: 950px) { /* 60 / 40 split */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__grid, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__grid { grid-template-rows: 45svh 1fr; } /* keep media above blocks */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaCol, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaCol { grid-row: 1; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__contentCol, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__contentCol { grid-row: 2; } /* hide media lead text under image */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__metaLead, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__metaLead { display: none !important; } /* collapse sticky media to (bar + image) */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaSticky.has-meta, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaSticky.has-meta { grid-template-rows: auto minmax(0, 1fr) !important; } /* slimmer header bar */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__metaBar, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__metaBar { padding: 7px 12px !important; gap: 12px !important; } /* blocks area: 2 blocks visible (20/20), scroll for the rest */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blocks, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blocks { --ss-block-gap: 12px; display: grid !important; grid-auto-flow: row; grid-auto-rows: calc((100% - var(--ss-block-gap)) / 2); gap: var(--ss-block-gap) !important; padding: 12px 12px !important; overflow: auto; align-content: start; } /* hide 01/02 eyebrow strip */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__eyebrow, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__eyebrow { display: none !important; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__block, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__block { padding: 14px 14px !important; gap: 10px !important; min-height: 0 !important; /* grid row controls height */ overflow: hidden; } /* title bar: compact */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blockTitle, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blockTitle { padding: 10px 14px !important; margin: 0 -14px 10px -14px !important; font-size: 13px !important; letter-spacing: 0.06em !important; } /* text: readable, but tidy */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blockText, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blockText { font-size: 13px !important; line-height: 1.55 !important; -webkit-line-clamp: 4 !important; } } /* ------------------------------------------------------------ Home slide-mode: small-height phones (e.g., Surface Duo 540x720) - Image ~45% height - 2 blocks visible (scroll for more) - Hide media lead + 01/02 eyebrow strip ------------------------------------------------------------ */ @media (min-width: 431px) and (max-width: 600px) and (max-height: 820px) { html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__grid, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__grid { grid-template-rows: clamp(240px, 45svh, 360px) 1fr; } /* keep media above blocks (also for flipped sections) */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaCol, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaCol { grid-row: 1; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__contentCol, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__contentCol { grid-row: 2; } /* hide media lead text under image */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__metaLead, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__metaLead { display: none !important; } /* collapse sticky media to (bar + image) */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaSticky.has-meta, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaSticky.has-meta { grid-template-rows: auto minmax(0, 1fr) !important; } /* slimmer header bar */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__metaBar, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__metaBar { padding: 7px 12px !important; gap: 12px !important; } /* blocks: show exactly 2 blocks; scroll for more */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blocks, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blocks { --ss-block-gap: 12px; display: grid !important; grid-auto-flow: row; grid-auto-rows: calc((100% - var(--ss-block-gap)) / 2); gap: var(--ss-block-gap) !important; padding: 12px 12px !important; overflow: auto; overscroll-behavior: contain; align-content: start; } /* hide 01/02 eyebrow strip */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__eyebrow, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__eyebrow { display: none !important; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__block, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__block { height: 100%; min-height: 0 !important; overflow: hidden; padding: 14px 14px !important; gap: 10px !important; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blockTitle, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blockTitle { padding: 10px 14px !important; margin: 0 -14px 10px -14px !important; font-size: 13px !important; letter-spacing: 0.06em !important; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blockText, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blockText { font-size: 13px !important; line-height: 1.55 !important; -webkit-line-clamp: 4 !important; } /* no scroll-hint fade on these short layouts */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__contentCol::after, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__contentCol::after { display: none !important; } } /* ------------------------------------------------------------ Home slide-mode: landscape phones (rotation) - Two columns: media left, blocks right - 2 blocks visible; scroll for more ------------------------------------------------------------ */ @media (max-height: 480px) and (orientation: landscape) { html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__grid, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important; grid-template-rows: 1fr !important; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaCol, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaCol { height: 100%; min-height: 0; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__contentCol, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__contentCol { height: 100%; min-height: 0; overflow: hidden; } /* keep lead text off in tight landscape */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__metaLead, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__metaLead { display: none !important; } /* slimmer header */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__metaBar, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__metaBar { padding: 6px 10px !important; gap: 10px !important; } /* blocks: exactly 2 */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blocks, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blocks { --ss-block-gap: 10px; display: grid !important; grid-auto-flow: row; grid-auto-rows: calc((100% - var(--ss-block-gap)) / 2); gap: var(--ss-block-gap) !important; padding: 10px 10px !important; overflow: auto; overscroll-behavior: contain; align-content: start; } /* hide 01/02 eyebrow strip */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__eyebrow, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__eyebrow { display: none !important; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__block, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__block { height: 100%; min-height: 0 !important; overflow: hidden; padding: 12px 12px !important; gap: 8px !important; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__contentCol::after, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__contentCol::after { display: none !important; } } /* ------------------------------------------------------------ Home slide-mode: iPad Mini (portrait ~768x1024) - Image ~55–60% height - Blocks area: 2-up (left/right) showing 1 row at a time; scroll for more - Hide media lead + 01/02 eyebrow strip ------------------------------------------------------------ */ @media (min-width: 700px) and (max-width: 820px) and (min-height: 900px) and (max-height: 1100px) { /* set split here (edit these two to tune) */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__grid, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__grid { --ipad-media-h: 58svh; grid-template-rows: var(--ipad-media-h) 1fr; } /* keep media above blocks */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaCol, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaCol { grid-row: 1; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__contentCol, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__contentCol { grid-row: 2; } /* hide media lead text under image */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__metaLead, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__metaLead { display: none !important; } /* slimmer header bar */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__metaBar, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__metaBar { padding: 8px 14px !important; gap: 14px !important; } /* blocks: 2 columns, 1 row visible; scroll for additional rows */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blocks, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blocks { --ss-block-gap: 14px; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-rows: 100%; gap: var(--ss-block-gap) !important; padding: 12px 14px 14px !important; overflow: auto; overscroll-behavior: contain; align-content: start; } /* hide 01/02 eyebrow strip */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__eyebrow, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__eyebrow { display: none !important; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__block, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__block { height: 100%; min-height: 0 !important; overflow: hidden; padding: 16px 16px !important; gap: 10px !important; } /* title bar: compact */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blockTitle, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blockTitle { padding: 10px 16px !important; margin: 0 -16px 12px -16px !important; font-size: 13px !important; letter-spacing: 0.06em !important; } /* text: tidy (prevents peeking of next row) */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blockText, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blockText { font-size: 13px !important; line-height: 1.55 !important; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 6 !important; } } /* ------------------------------------------------------------ Home slide-mode: iPad Air (portrait ~820x1180) - Image ~50–55% height (tune --air-media-h) - Blocks area: 2x2 tiles visible; scroll for more - Hide media lead + 01/02 eyebrow strip ------------------------------------------------------------ */ @media (min-width: 800px) and (max-width: 900px) and (min-height: 1101px) and (max-height: 1300px) { /* make the slide truly viewport-tall */ html.home-slideMode .homeSlide.scrollySplit--homeSlide, html.home .homeSlide.scrollySplit--homeSlide { height: 100svh; min-height: 100svh; overflow: hidden; } /* remove container side gutters so tiles can fill width */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .container, html.home .homeSlide.scrollySplit--homeSlide .container { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* stack media above blocks */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__grid, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__grid { --air-media-h: 52svh; /* set 50svh / 55svh if needed */ display: flex !important; flex-direction: column; height: 100%; min-height: 0; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaCol, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaCol { flex: 0 0 var(--air-media-h); height: var(--air-media-h); min-height: 0; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__contentCol, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__contentCol { flex: 1 1 auto; min-height: 0; overflow: hidden; } /* hide media lead text under image */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__metaLead, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__metaLead { display: none !important; } /* collapse sticky media to (bar + image) */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaSticky.has-meta, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaSticky.has-meta { grid-template-rows: auto minmax(0, 1fr) !important; } /* slimmer header bar */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__metaBar, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__metaBar { padding: 10px 16px !important; gap: 16px !important; } /* blocks: 2 columns; exactly 2 rows visible (4 tiles). Extra tiles scroll inside. */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blocks, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blocks { --ss-block-gap: 14px; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-rows: calc((100% - var(--ss-block-gap)) / 2); gap: var(--ss-block-gap) !important; padding: 14px 16px 16px !important; height: calc(100svh - var(--air-media-h)); max-height: calc(100svh - var(--air-media-h)); overflow: auto; overscroll-behavior: contain; align-content: start; width: 100%; max-width: none; margin: 0; box-sizing: border-box; } /* hide 01/02 eyebrow strip */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__eyebrow, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__eyebrow { display: none !important; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__block, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__block { min-height: 0 !important; height: 100%; overflow: hidden; padding: 16px 16px !important; gap: 10px !important; } /* title bar: compact */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blockTitle, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blockTitle { padding: 10px 16px !important; margin: 0 -16px 12px -16px !important; font-size: 13px !important; letter-spacing: 0.06em !important; } /* text: tidy */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blockText, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blockText { font-size: 13px !important; line-height: 1.55 !important; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 5 !important; } } /* ------------------------------------------------------------ Home slide-mode: iPad Pro (portrait ~1024x1366) - One large image on top - 4 tiles (2x2) visible at bottom; scroll for more - Hide media lead + 01/02 eyebrow strip ------------------------------------------------------------ */ @media (min-width: 900px) and (max-width: 1100px) and (min-height: 1301px) and (max-height: 1500px) { /* make the slide truly viewport-tall */ html.home-slideMode .homeSlide.scrollySplit--homeSlide, html.home .homeSlide.scrollySplit--homeSlide { height: 100svh; min-height: 100svh; overflow: hidden; } /* remove container side gutters so tiles can fill width */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .container, html.home .homeSlide.scrollySplit--homeSlide .container { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* stack media above blocks */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__grid, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__grid { --pro-media-h: 62svh; /* tune to 60–65svh if needed */ display: flex !important; flex-direction: column; height: 100%; min-height: 0; } /* keep Verification (and any flipped section) consistent: media first, blocks second */ html.home-slideMode .homeSlide.scrollySplit--homeSlide.scrollySplit--flip .scrollySplit__mediaCol, html.home .homeSlide.scrollySplit--homeSlide.scrollySplit--flip .scrollySplit__mediaCol { order: 0 !important; } html.home-slideMode .homeSlide.scrollySplit--homeSlide.scrollySplit--flip .scrollySplit__contentCol, html.home .homeSlide.scrollySplit--homeSlide.scrollySplit--flip .scrollySplit__contentCol { order: 1 !important; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaCol, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaCol { flex: 0 0 var(--pro-media-h); height: var(--pro-media-h); min-height: 0; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__contentCol, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__contentCol { flex: 1 1 auto; min-height: 0; overflow: hidden; } /* hide media lead text under image */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__metaLead, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__metaLead { display: none !important; } /* collapse sticky media to (bar + image) */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaSticky.has-meta, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__mediaSticky.has-meta { grid-template-rows: auto minmax(0, 1fr) !important; } /* slimmer header bar */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__metaBar, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__metaBar { padding: 10px 18px !important; gap: 18px !important; } /* blocks: 2 columns; exactly 2 rows visible (4 tiles). Extra tiles scroll inside. */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blocks, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blocks { --ss-block-gap: 16px; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-rows: calc((100% - var(--ss-block-gap)) / 2); gap: var(--ss-block-gap) !important; padding: 16px 22px 18px !important; height: calc(100svh - var(--pro-media-h)); max-height: calc(100svh - var(--pro-media-h)); overflow: auto; overscroll-behavior: contain; align-content: start; width: 100%; max-width: none; margin: 0; box-sizing: border-box; } /* hide 01/02 eyebrow strip */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__eyebrow, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__eyebrow { display: none !important; } html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__block, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__block { min-height: 0 !important; height: 100%; overflow: hidden; padding: 18px 18px !important; gap: 10px !important; } /* title bar: compact */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blockTitle, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blockTitle { padding: 11px 18px !important; margin: 0 -18px 12px -18px !important; font-size: 14px !important; letter-spacing: 0.06em !important; } /* text: tidy */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blockText, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blockText { font-size: 14px !important; line-height: 1.55 !important; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 5 !important; } } /* ------------------------------------------------------------ Home slide-mode: Nest Hub (1024x600 landscape) - Keep split layout (media left / blocks right) - Hide 01/02 eyebrow strip (removes black top bars) - Slightly smaller block titles - Show exactly 4 blocks (2x2) per view; scroll inside for more ------------------------------------------------------------ */ @media (min-width: 900px) and (max-width: 1100px) and (max-height: 700px) and (orientation: landscape) { /* blocks area: 2 columns, exactly 2 rows visible (4 tiles) */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blocks, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blocks { --ss-block-gap: 14px; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-rows: calc((100% - var(--ss-block-gap)) / 2); gap: var(--ss-block-gap) !important; padding: 14px 14px !important; overflow: auto; overscroll-behavior: contain; align-content: start; } /* hide 01/02/03 eyebrow strip */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__eyebrow, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__eyebrow { display: none !important; } /* blocks: fit grid row */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__block, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__block { height: 100%; min-height: 0 !important; overflow: hidden; padding: 16px 16px !important; gap: 10px !important; } /* title: slightly smaller */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blockTitle, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blockTitle { padding: 10px 16px !important; margin: 0 -16px 12px -16px !important; font-size: 12.5px !important; letter-spacing: 0.06em !important; } /* text: keep tidy so 4 tiles remain readable */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blockText, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blockText { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 4 !important; } } /* ------------------------------------------------------------ Home slide-mode: Nest Hub Max (1280x800 landscape) - Keep split layout (media left / blocks right) - Hide 01/02 eyebrow strip (removes black top bars) - Smaller block titles - Show exactly 4 blocks (2x2) per view; scroll inside for more ------------------------------------------------------------ */ @media (min-width: 1240px) and (max-width: 1320px) and (min-height: 760px) and (max-height: 840px) and (orientation: landscape) { /* blocks area: 2 columns, exactly 2 rows visible (4 tiles) */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blocks, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blocks { --ss-block-gap: 14px; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-rows: calc((100% - var(--ss-block-gap)) / 2); gap: var(--ss-block-gap) !important; padding: 14px 18px !important; overflow: auto; overscroll-behavior: contain; align-content: start; } /* hide 01/02/03 eyebrow strip */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__eyebrow, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__eyebrow { display: none !important; } /* blocks: fit grid row */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__block, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__block { height: 100%; min-height: 0 !important; overflow: hidden; padding: 14px 14px !important; gap: 10px !important; } /* title: slightly smaller */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blockTitle, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blockTitle { padding: 9px 14px !important; margin: 0 -14px 10px -14px !important; font-size: 12.5px !important; letter-spacing: 0.06em !important; } /* text: keep tidy so 4 tiles remain readable */ html.home-slideMode .homeSlide.scrollySplit--homeSlide .scrollySplit__blockText, html.home .homeSlide.scrollySplit--homeSlide .scrollySplit__blockText { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 4 !important; } } /* ===================================================================== Capabilities/Offerings (dualStrips) — touch / small screens Goal: one clean heading, fixed 7px gaps, stable scrollable grid (prevents tiny squished "mosaic" when marquee clones are present) ===================================================================== */ /* Remove duplicate small kicker label (CAPABILITIES/OFFERINGS) NOTE: dual strips use `.kicker` (not `.stripKicker`) */ html.home-slideMode #capabilities_offerings.homeSlide .stripHeader .kicker { display: none !important; } /* Give Cap/Off headers a translucent “card header” feel (mobile/tablet) Keeps the single visible heading (the `.h2`). */ @media (max-width: 1024px), (hover: none) and (pointer: coarse) { html.home-slideMode.home-dual-touchMode #capabilities_offerings.homeSlide .stripHeader { /* background: rgba(0,0,0,0.18) !important; */ /* border: 1px solid rgba(255,255,255,0.08) !important; */ /* border-radius: 12px !important; */ padding: 10px 12px !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); height: 120px; } html.home-slideMode.home-dual-touchMode #capabilities_offerings.homeSlide .stripHeader .h2 { margin-top: 0 !important; } } /* Pull headings closer to top */ html.home-slideMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection { padding-top: 18px !important; } html.home-slideMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection .stripHeader { margin-bottom: 10px !important; } /* Touch devices + <=1024px: disable marquee animation, enable manual horizontal scroll */ @media (max-width: 1024px), (hover: none) and (pointer: coarse) { html.home-slideMode.home-dual-touchMode #capabilities_offerings.homeSlide { --dual-gap-fixed: 7px; --dual-rows: 1; /* default: 2 cards per view */ --dual-col: calc((100% - var(--dual-gap-fixed)) / 2); } html.home-slideMode.home-dual-touchMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .stripMarquee { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; /* keep content tight on small screens */ padding-top: 8px !important; padding-bottom: 10px !important; } html.home-slideMode.home-dual-touchMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .stripMarquee::-webkit-scrollbar { width: 0; height: 0; } html.home-slideMode.home-dual-touchMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .stripMarquee > .stripMarquee__track { display: grid !important; grid-auto-flow: column !important; grid-auto-columns: var(--dual-col) !important; grid-template-rows: repeat(var(--dual-rows), minmax(0, 1fr)) !important; gap: var(--dual-gap-fixed) !important; row-gap: var(--dual-gap-fixed) !important; column-gap: var(--dual-gap-fixed) !important; align-content: start !important; align-items: stretch !important; /* kill marquee motion + any transforms that create the "ghost mosaic" */ animation: none !important; transform: none !important; will-change: auto !important; /* allow track to be wider than viewport for scrolling */ width: max-content !important; height: auto !important; } /* Make sure the *grid items* stretch (stripCard may be nested) */ html.home-slideMode.home-dual-touchMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .stripMarquee > .stripMarquee__track > * { height: 100%; min-height: 0; scroll-snap-align: start; } html.home-slideMode.home-dual-touchMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .stripMarquee > .stripMarquee__track > * > .stripCard { height: 100% !important; min-height: 0 !important; aspect-ratio: auto !important; } /* Very small phones: 1 card per view */ @media (max-width: 360px) { html.home-slideMode.home-dual-touchMode #capabilities_offerings.homeSlide { --dual-col: 92vw; } } /* Surface Duo-ish (short + wider phones): keep 1 row, slightly larger cards */ @media (min-width: 431px) and (max-width: 600px) and (max-height: 820px) { html.home-slideMode.home-dual-touchMode #capabilities_offerings.homeSlide { --dual-rows: 1; --dual-col: minmax(260px, 62vw); } html.home-slideMode.home-dual-touchMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection { padding-top: 14px !important; } } /* iPad Mini + iPad Air portrait: 1 row scroll */ @media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) { html.home-slideMode.home-dual-touchMode #capabilities_offerings.homeSlide { --dual-rows: 1; --dual-col: minmax(300px, 46vw); } } /* iPad Pro + large tablets (coarse pointer): 2 rows scroll */ @media (min-width: 1024px) and (hover: none) and (pointer: coarse) { html.home-slideMode.home-dual-touchMode #capabilities_offerings.homeSlide { --dual-rows: 2; --dual-col: minmax(320px, 40vw); } } } /* ============================================================ MOBILE (<=980px) — Capabilities/Offerings slideshow support - Even if html.home-slideMode is active, we want JS-driven 1-card slideshow with stable padding + rounded cards. - JS writes --mobSlideX, we apply it via transform with !important so older rules like `transform: none !important` cannot kill motion. ============================================================ */ @media (max-width: 1100px) and (any-pointer: coarse) { /* Works whether slideMode is enabled or not (mobile uses JS slideshow). */ html.home #capabilities_offerings .dualStrips__panel.stripSection > .stripMarquee, html.home-slideMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .stripMarquee { overflow: hidden !important; overflow-x: hidden !important; overflow-y: hidden !important; padding: 7px !important; scroll-snap-type: none !important; } html.home.home-dual-touchMode #capabilities_offerings .dualStrips__panel.stripSection > .stripMarquee > .stripMarquee__track, html.home-slideMode.home-dual-touchMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .stripMarquee > .stripMarquee__track { /* kill the mobile grid mode */ display: flex !important; flex-wrap: nowrap !important; gap: 7px !important; column-gap: 7px !important; row-gap: 7px !important; grid-auto-flow: initial !important; grid-auto-columns: initial !important; grid-template-rows: none !important; animation: none !important; will-change: transform !important; width: max-content !important; /* JS-controlled transform */ transform: translate3d(var(--mobSlideX, 0px), 0, 0) !important; transition: transform var(--mobSlideMs, 520ms) ease !important; } } /* ============================================================ FINAL MOBILE CAP/OFF SLIDESHOW GUARD - one-card viewport - 7px inset + 7px slide gap - CSS only defines layout; JS drives --mobSlideX ============================================================ */ @media (max-width: 1100px) and (any-pointer: coarse) { html.home #capabilities_offerings #capabilities_strip .stripMarquee, html.home #capabilities_offerings #offerings_strip .stripMarquee, html.home-slideMode.home-dual-touchMode #capabilities_offerings.homeSlide #capabilities_strip .stripMarquee, html.home-slideMode.home-dual-touchMode #capabilities_offerings.homeSlide #offerings_strip .stripMarquee { overflow: hidden !important; overflow-x: hidden !important; overflow-y: hidden !important; padding: 7px !important; box-sizing: border-box !important; } html.home #capabilities_offerings #capabilities_strip .stripMarquee__track, html.home #capabilities_offerings #offerings_strip .stripMarquee__track, html.home-slideMode #capabilities_offerings.homeSlide #capabilities_strip .stripMarquee__track, html.home-slideMode #capabilities_offerings.homeSlide #offerings_strip .stripMarquee__track { display: flex !important; flex-wrap: nowrap !important; gap: 7px !important; column-gap: 7px !important; row-gap: 7px !important; width: max-content !important; animation: none !important; will-change: transform !important; transform: translate3d(var(--mobSlideX, 0px), 0, 0) !important; transition: transform var(--mobSlideMs, 520ms) ease !important; } html.home #capabilities_offerings #capabilities_strip .stripCard, html.home #capabilities_offerings #offerings_strip .stripCard, html.home-slideMode.home-dual-touchMode #capabilities_offerings.homeSlide #capabilities_strip .stripCard, html.home-slideMode.home-dual-touchMode #capabilities_offerings.homeSlide #offerings_strip .stripCard { box-sizing: border-box !important; flex: 0 0 auto !important; max-width: none !important; } } /* ------------------------------------------------------------ Phones (<=430px width): Testimonials = 1 column / 2 stacked square cards visible, vertical scroll for more cards. Bottom Links + social icons remains the next slide (bottom_links_slide) on mobile split layout. Target resolutions: 375x667, 414x896, 390x844, 430x932, 412x915, 360x740. ------------------------------------------------------------ */ @media (max-width: 430px) and (min-height: 660px), (max-width: 359px) and (min-height: 820px), (min-width: 520px) and (max-width: 560px) and (min-height: 700px) and (max-height: 740px) { html.home #testimonials_strip, html.home-slideMode #testimonials_strip { padding: 14px 0 0 !important; --t-gap: 14px; --t-head: 96px; /* title + top padding budget */ --t-card: min( 88vw, calc((100svh - var(--t-head) - (var(--t-gap) * 3)) / 2) ); } html.home #testimonials_strip > .stripMarquee, html.home-slideMode #testimonials_strip > .stripMarquee { flex: 1 1 auto; min-height: 0; display: block !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior-y: auto; padding: 0 !important; touch-action: pan-y; } html.home #testimonials_strip > .stripMarquee > .stripMarquee__track, html.home-slideMode #testimonials_strip > .stripMarquee > .stripMarquee__track { display: flex !important; flex-direction: column !important; align-items: center; justify-content: flex-start; gap: var(--t-gap) !important; width: 100% !important; height: auto !important; padding: 0 16px 16px !important; transform: none !important; animation: none !important; } /* remove infinite-loop clones in stacked mode */ html.home #testimonials_strip .stripMarquee__track .stripCard--clone, html.home-slideMode #testimonials_strip .stripMarquee__track .stripCard--clone { display: none !important; } html.home #testimonials_strip .stripCard, html.home-slideMode #testimonials_strip .stripCard { width: var(--t-card) !important; max-width: var(--t-card) !important; height: var(--t-card) !important; aspect-ratio: 1 / 1; min-height: 0 !important; } /* in slide-mode, only slides should be snap targets (not cards) */ html.home-slideMode #testimonials_strip .stripCard { scroll-snap-align: none !important; } #testimonials_strip .stripCard { overflow: hidden; } } /* ========================================================= TESTIMONIALS (PHONES) — 2-row / 1-column ticker (auto swap) Targets: 360–430w phones in portrait/tall viewports - Testimonials = single slide (NO footer inside) - Bottom links = next slide - Show TWO square cards (top + bottom) with 7px isolation margin ========================================================= */ @media (max-width: 430px) and (min-height: 660px), (max-width: 359px) and (min-height: 820px), (min-width: 520px) and (max-width: 560px) and (min-height: 700px) and (max-height: 740px) { /* Always split on phones: testimonials-only + bottom-links-only */ html.home #testimonials_strip.homeSlide .siteFooter--embed, html.home-slideMode #testimonials_strip.homeSlide .siteFooter--embed { display: none !important; } html.home #bottom_links_slide, html.home-slideMode #bottom_links_slide { display: block !important; padding: 0 !important; height: 100svh; min-height: 100svh; max-height: 100svh; overflow: hidden; } /* Bring title to the top and free space for cards */ html.home #testimonials_strip.homeSlide, html.home-slideMode #testimonials_strip.homeSlide { padding-top: 10px !important; padding-bottom: 0 !important; display: flex; flex-direction: column; min-height: 100svh; } /* Only hide the original marquee when ticker is active (fallback safe) */ html.plr-tcar #testimonials_strip.homeSlide > .stripMarquee, html.plr-tcar.home-slideMode #testimonials_strip.homeSlide > .stripMarquee { display: none !important; } /* 2-card ticker container (injected by JS) */ html.plr-tcar #testimonials_strip.homeSlide > .tCar, html.plr-tcar.home-slideMode #testimonials_strip.homeSlide > .tCar { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 0; } html.plr-tcar #testimonials_strip.homeSlide .tCar__slot, html.plr-tcar.home-slideMode #testimonials_strip.homeSlide .tCar__slot { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; } /* card isolation (7px all around) */ html.plr-tcar #testimonials_strip.homeSlide .tCar .stripCard, html.plr-tcar.home-slideMode #testimonials_strip.homeSlide .tCar .stripCard { aspect-ratio: 1 / 1; width: var(--tcar-size, min(320px, calc(100vw - 14px))); height: auto !important; min-height: 0 !important; margin: 7px; } /* ticker animation: fade-in within fixed rows (no crossing) */ html.plr-tcar #testimonials_strip.homeSlide .tCar__slot, html.plr-tcar.home-slideMode #testimonials_strip.homeSlide .tCar__slot { overflow: hidden; } html.plr-tcar #testimonials_strip.homeSlide .tCar .stripCard, html.plr-tcar.home-slideMode #testimonials_strip.homeSlide .tCar .stripCard { transition: opacity 420ms cubic-bezier(0.22, 0.9, 0.2, 1), transform 420ms cubic-bezier(0.22, 0.9, 0.2, 1); will-change: opacity, transform; opacity: 1; transform: translateY(0); } /* fade old cards out before swap */ html.plr-tcar #testimonials_strip.homeSlide .tCar.tCar--fadeOut .stripCard, html.plr-tcar.home-slideMode #testimonials_strip.homeSlide .tCar.tCar--fadeOut .stripCard { opacity: 0; transform: translateY(0); transition-duration: 220ms; } /* new cards fade-in: top moves DOWN a bit, bottom moves UP a bit */ html.plr-tcar #testimonials_strip.homeSlide .tCar__slot--top .stripCard.tCar-pre, html.plr-tcar.home-slideMode #testimonials_strip.homeSlide .tCar__slot--top .stripCard.tCar-pre { opacity: 0; transform: translateY(-10px); } html.plr-tcar #testimonials_strip.homeSlide .tCar__slot--bottom .stripCard.tCar-pre, html.plr-tcar.home-slideMode #testimonials_strip.homeSlide .tCar__slot--bottom .stripCard.tCar-pre { opacity: 0; transform: translateY(10px); } } /* ============================================================ Desktop guard — Capabilities/Offerings card spacing Keep a fixed 7px inset + 7px row/column gap on desktop only. Scoped to home Capabilities/Offerings so other sections/resolutions stay untouched. ============================================================ */ @media (min-width: 981px) { html.home #capabilities_offerings .dualStrips__panel.stripSection > .stripMarquee, html.home-slideMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .stripMarquee { padding: 7px !important; box-sizing: border-box !important; } html.home #capabilities_offerings #capabilities_strip .stripMarquee__track, html.home #capabilities_offerings #offerings_strip .stripMarquee__track, html.home-slideMode #capabilities_offerings.homeSlide #capabilities_strip .stripMarquee__track, html.home-slideMode #capabilities_offerings.homeSlide #offerings_strip .stripMarquee__track { gap: 7px !important; row-gap: 7px !important; column-gap: 7px !important; } } /* ===================================================================== HOME — Engineered desktop square cards (desktop final) - single desktop rule so opening DevTools / resizing inside desktop width does not fall back to a different card layout - fixed 7px inset around the 2x2 area - fixed 7px row / column gap between cards - cards remain perfectly square because the right block area stays square ===================================================================== */ @media (min-width: 981px) and (hover: hover) and (pointer: fine) { html.home-slideMode #engineered.homeSlide.scrollySplit--homeSlide, html.home #engineered.homeSlide.scrollySplit--homeSlide { --eng-left-min: 360px; --eng-square-grid: min(100svh, calc(100vw - var(--eng-left-min))); --eng-card-gap: 7px; } html.home-slideMode #engineered.homeSlide.scrollySplit--homeSlide > .container, html.home #engineered.homeSlide.scrollySplit--homeSlide > .container { height: 100%; max-width: none !important; padding: 0 !important; } html.home-slideMode #engineered.homeSlide.scrollySplit--homeSlide .scrollySplit__grid, html.home #engineered.homeSlide.scrollySplit--homeSlide .scrollySplit__grid { display: grid !important; grid-template-columns: minmax(var(--eng-left-min), 1fr) var( --eng-square-grid ) !important; grid-template-rows: 1fr !important; gap: 0 !important; height: 100%; min-height: 0; align-items: stretch; } html.home-slideMode #engineered.homeSlide.scrollySplit--homeSlide .scrollySplit__mediaCol, html.home #engineered.homeSlide.scrollySplit--homeSlide .scrollySplit__mediaCol { min-width: 0; min-height: 0; height: 100%; } html.home-slideMode #engineered.homeSlide.scrollySplit--homeSlide .scrollySplit__contentCol, html.home #engineered.homeSlide.scrollySplit--homeSlide .scrollySplit__contentCol { width: var(--eng-square-grid); height: var(--eng-square-grid); min-width: 0; min-height: 0; justify-self: end; align-self: center; overflow: hidden; } html.home-slideMode #engineered.homeSlide.scrollySplit--homeSlide .scrollySplit__blocks, html.home #engineered.homeSlide.scrollySplit--homeSlide .scrollySplit__blocks { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: minmax(0, 1fr) !important; gap: var(--eng-card-gap) !important; row-gap: var(--eng-card-gap) !important; column-gap: var(--eng-card-gap) !important; padding: var(--eng-card-gap) !important; margin: 0 !important; width: 100%; height: 100%; max-width: none; max-height: 100%; overflow: auto; overscroll-behavior: contain; align-content: start !important; box-sizing: border-box; } html.home-slideMode #engineered.homeSlide.scrollySplit--homeSlide .scrollySplit__block, html.home #engineered.homeSlide.scrollySplit--homeSlide .scrollySplit__block { width: 100%; height: 100%; min-height: 0 !important; margin: 0 !important; aspect-ratio: auto !important; overflow: hidden; box-sizing: border-box; } } /* HOME — keep Rajdhani on capabilities / offerings supporting text and bottom links */ html.home #capabilities_offerings .stripLead, html.home-slideMode #capabilities_offerings .stripLead, html.home #capabilities_offerings .stripText, html.home-slideMode #capabilities_offerings .stripText, html.home #testimonials_strip .footerColTitle, html.home-slideMode #testimonials_strip .footerColTitle, html.home #testimonials_strip .footerLink, html.home-slideMode #testimonials_strip .footerLink, html.home #testimonials_strip .footerCopy, html.home-slideMode #testimonials_strip .footerCopy, html.home #testimonials_strip .footerLegal, html.home-slideMode #testimonials_strip .footerLegal, html.home #testimonials_strip .footerLegal a, html.home-slideMode #testimonials_strip .footerLegal a, html.home #bottom_links_slide .footerColTitle, html.home-slideMode #bottom_links_slide .footerColTitle, html.home #bottom_links_slide .footerLink, html.home-slideMode #bottom_links_slide .footerLink, html.home #bottom_links_slide .footerCopy, html.home-slideMode #bottom_links_slide .footerCopy, html.home #bottom_links_slide .footerLegal, html.home-slideMode #bottom_links_slide .footerLegal, html.home #bottom_links_slide .footerLegal a, html.home-slideMode #bottom_links_slide .footerLegal a { font-family: Rajdhani, system-ui, sans-serif; } /* ------------------------------------------------------------ HOME — Engineered full-screen showcase slider ------------------------------------------------------------ */ .engineeredShowcase { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: #04111b; } .engineeredShowcase__viewport { position: relative; width: 100%; min-height: inherit; } .engineeredShowcase__stage { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 420ms ease, visibility 0ms linear 420ms; } .engineeredShowcase__stage.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0ms; } .engineeredShowcase__split, .engineeredShowcase__fullwrap { position: absolute; inset: 0; } .engineeredShowcase__split { display: grid; grid-template-columns: 1fr 1fr; } .engineeredShowcase__panel { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; } .engineeredShowcase__panel--full { width: 100%; } .engineeredShowcase__media, .engineeredShowcase__content, .engineeredShowcase__mask { position: absolute; inset: 0; } .engineeredShowcase__media { overflow: hidden; } .engineeredShowcase__bg { position: absolute; inset: -3%; width: calc(100% + 6%); height: calc(100% + 6%); object-fit: cover; transform: translate3d(0, 0, 0) scale(1.055); will-change: transform; } .engineeredShowcase__stage.is-active .engineeredShowcase__bg { animation: engineeredShowcaseBgDrift 9.6s ease-in-out infinite alternate; } .engineeredShowcase__veil, .engineeredShowcase__grain, .engineeredShowcase__blur { position: absolute; inset: 0; pointer-events: none; } .engineeredShowcase__veil { background: linear-gradient( 110deg, rgba(2, 9, 15, 0.88) 0%, rgba(4, 17, 28, 0.62) 34%, rgba(4, 17, 27, 0.3) 58%, rgba(2, 10, 18, 0.72) 100% ), linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.32) 100%); } .engineeredShowcase__grain, .engineeredShowcase__mask { background: linear-gradient(180deg, rgba(6, 15, 22, 0.94), rgba(3, 12, 18, 0.96)), radial-gradient( circle at 14% 18%, rgba(255, 255, 255, 0.08) 0 1.4px, transparent 1.5px ), radial-gradient( circle at 72% 26%, rgba(255, 255, 255, 0.06) 0 1.2px, transparent 1.3px ), radial-gradient( circle at 58% 78%, rgba(255, 255, 255, 0.04) 0 1.4px, transparent 1.5px ), linear-gradient( 135deg, rgba(255, 255, 255, 0.03) 0%, transparent 26%, rgba(255, 255, 255, 0.02) 56%, transparent 100% ); } .engineeredShowcase__grain { opacity: 0.28; mix-blend-mode: screen; } .engineeredShowcase__blur { background: radial-gradient( circle at 18% 70%, rgba(62, 145, 255, 0.16), transparent 28% ), radial-gradient( circle at 74% 28%, rgba(255, 183, 75, 0.15), transparent 24% ); filter: blur(36px); opacity: 0.62; } .engineeredShowcase__content { z-index: 2; display: flex; align-items: center; padding: calc(var(--siteHeaderH, 76px) + 34px) clamp(24px, 3vw, 44px) clamp(76px, 8vw, 120px); } .engineeredShowcase__panel--right .engineeredShowcase__content { justify-content: flex-start; } .engineeredShowcase__panel--full .engineeredShowcase__content { padding-inline: clamp(28px, 5vw, 72px); } .engineeredShowcase__copy { width: min(100%, 34rem); padding: clamp(1.2rem, 1.8vw, 1.7rem) clamp(1.1rem, 1.8vw, 1.6rem) clamp(1.25rem, 1.9vw, 1.85rem); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 24px; background: linear-gradient( 180deg, rgba(4, 13, 21, 0.58), rgba(4, 12, 20, 0.3) ); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28); backdrop-filter: blur(7px); } .engineeredShowcase__panel--full .engineeredShowcase__copy { width: min(100%, 46rem); } .engineeredShowcase__title, .engineeredShowcase__subtitle, .engineeredShowcase__text, .engineeredShowcase__arrow { font-family: Rajdhani, system-ui, sans-serif; } .engineeredShowcase__title { margin: 0; max-width: 14ch; font-size: clamp(2rem, 2vw + 1.3rem, 4rem); line-height: 0.94; letter-spacing: 0.02em; color: #ffffff; text-transform: uppercase; text-wrap: balance; } .engineeredShowcase__panel--full .engineeredShowcase__title { max-width: 11ch; font-size: clamp(2.3rem, 3.8vw + 0.5rem, 5rem); } .engineeredShowcase__subtitle { margin-top: 0.6rem; max-width: 28ch; font-size: clamp(0.96rem, 0.55vw + 0.8rem, 1.16rem); line-height: 1.34; letter-spacing: 0.02em; color: rgba(227, 239, 252, 0.84); } .engineeredShowcase__text { margin: 1rem 0 0; max-width: 38ch; font-size: clamp(1rem, 0.42vw + 0.92rem, 1.12rem); line-height: 1.55; color: rgba(239, 246, 255, 0.92); } .engineeredShowcase__panel--full .engineeredShowcase__text { max-width: 42ch; } .engineeredShowcase__arrow { position: absolute; top: 50%; z-index: 8; width: clamp(58px, 5vw, 74px); height: clamp(58px, 5vw, 74px); display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: linear-gradient( 180deg, rgba(12, 25, 37, 0.56), rgba(6, 16, 24, 0.36) ); color: #f3f8ff; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22); backdrop-filter: blur(8px); transform: translateY(-50%); transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease, background-color 240ms ease; } .engineeredShowcase__arrow:hover, .engineeredShowcase__arrow:focus-visible { transform: translateY(-50%) scale(1.05); border-color: rgba(255, 255, 255, 0.34); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.3); } .engineeredShowcase__arrow--prev { left: clamp(14px, 2vw, 30px); } .engineeredShowcase__arrow--next { right: clamp(14px, 2vw, 30px); } .engineeredShowcase__arrowIcon { width: 44%; height: 44%; display: inline-flex; } .engineeredShowcase__arrowIcon svg { width: 100%; height: 100%; } .engineeredShowcase__progress { position: absolute; left: clamp(18px, 4vw, 46px); right: clamp(18px, 4vw, 46px); bottom: clamp(18px, 2.5vw, 28px); z-index: 7; height: 5px; border-radius: 999px; overflow: hidden; } .engineeredShowcase__progressTrack, .engineeredShowcase__progressFill { position: absolute; inset: 0; border-radius: inherit; } .engineeredShowcase__progressTrack { background: rgba(255, 255, 255, 0.14); } .engineeredShowcase__progressFill { width: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient( 90deg, rgba(222, 235, 250, 0.72), rgba(255, 255, 255, 0.98) ); box-shadow: 0 0 18px rgba(255, 255, 255, 0.18); } .engineeredShowcase__progressFill.is-running { animation: engineeredShowcaseProgress var(--eng-progress-ms, 4600ms) linear forwards; } .engineeredShowcase__mask { z-index: 4; pointer-events: none; } .engineeredShowcase__mask--left, .engineeredShowcase__mask--right { width: 50%; } .engineeredShowcase__mask--left { left: 0; } .engineeredShowcase__mask--right { right: 0; } .engineeredShowcase__mask--full { inset: 0; } .engineeredShowcase__stage.is-animating .engineeredShowcase__copy { animation: engineeredCopyIn 920ms cubic-bezier(0.2, 0.85, 0.22, 1) both; } .engineeredShowcase__stage.is-animating[data-pattern="intro"] .engineeredShowcase__panel--left .engineeredShowcase__copy { animation-delay: 980ms; } .engineeredShowcase__stage.is-animating[data-pattern="intro"] .engineeredShowcase__panel--right .engineeredShowcase__copy { animation-delay: 1780ms; } .engineeredShowcase__stage.is-animating[data-pattern="center-out"] .engineeredShowcase__copy, .engineeredShowcase__stage.is-animating[data-pattern="outer-in"] .engineeredShowcase__copy { animation-delay: 360ms; } .engineeredShowcase__stage.is-animating[data-pattern="full"] .engineeredShowcase__copy { animation-delay: 260ms; } .engineeredShowcase__stage.is-animating[data-pattern="intro"] .engineeredShowcase__mask--left { animation: engMaskIntroDown 980ms cubic-bezier(0.22, 1, 0.36, 1) 600ms both; } .engineeredShowcase__stage.is-animating[data-pattern="intro"] .engineeredShowcase__mask--right { animation: engMaskIntroUp 980ms cubic-bezier(0.22, 1, 0.36, 1) 1600ms both; } .engineeredShowcase__stage.is-animating[data-pattern="center-out"] .engineeredShowcase__mask--left { transform-origin: right center; animation: engMaskScaleX 1650ms cubic-bezier(0.22, 1, 0.36, 1) both; } .engineeredShowcase__stage.is-animating[data-pattern="center-out"] .engineeredShowcase__mask--right { transform-origin: left center; animation: engMaskScaleX 1650ms cubic-bezier(0.22, 1, 0.36, 1) both; } .engineeredShowcase__stage.is-animating[data-pattern="outer-in"] .engineeredShowcase__mask--left { transform-origin: left center; animation: engMaskScaleX 1650ms cubic-bezier(0.22, 1, 0.36, 1) both; } .engineeredShowcase__stage.is-animating[data-pattern="outer-in"] .engineeredShowcase__mask--right { transform-origin: right center; animation: engMaskScaleX 1650ms cubic-bezier(0.22, 1, 0.36, 1) both; } .engineeredShowcase__stage.is-animating[data-pattern="full"] .engineeredShowcase__mask--full { animation: engMaskFullLift 1750ms cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes engineeredShowcaseBgDrift { 0% { transform: translate3d(-1.1%, -0.7%, 0) scale(1.06); } 50% { transform: translate3d(0.6%, 0.8%, 0) scale(1.085); } 100% { transform: translate3d(-0.3%, 1%, 0) scale(1.07); } } @keyframes engineeredCopyIn { 0% { opacity: 0; transform: translate3d(0, 26px, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes engMaskIntroDown { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, 104%, 0); } } @keyframes engMaskIntroUp { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, -104%, 0); } } @keyframes engMaskScaleX { 0%, 10% { transform: scaleX(1); } 100% { transform: scaleX(0); } } @keyframes engMaskFullLift { 0%, 12% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } 100% { opacity: 1; transform: translate3d(0, -104%, 0) scale(1.02); } } @keyframes engineeredShowcaseProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (max-width: 980px) { .engineeredShowcase__split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } .engineeredShowcase__panel { min-height: 50vh; min-height: 50svh; } .engineeredShowcase__content { align-items: flex-end; padding: calc(var(--siteHeaderH, 72px) + 14px) 18px 42px; } .engineeredShowcase__copy { width: min(100%, 100%); border-radius: 18px; } .engineeredShowcase__title { font-size: clamp(1.7rem, 5.8vw, 2.7rem); max-width: 12ch; } .engineeredShowcase__subtitle, .engineeredShowcase__text { max-width: 100%; } .engineeredShowcase__mask--left, .engineeredShowcase__mask--right { width: 100%; height: 50%; } .engineeredShowcase__mask--left { top: 0; bottom: auto; } .engineeredShowcase__mask--right { top: auto; bottom: 0; right: auto; left: 0; } .engineeredShowcase__stage.is-animating[data-pattern="center-out"] .engineeredShowcase__mask--left, .engineeredShowcase__stage.is-animating[data-pattern="outer-in"] .engineeredShowcase__mask--left { transform-origin: center top; animation: engMaskScaleY 1500ms cubic-bezier(0.22, 1, 0.36, 1) both; } .engineeredShowcase__stage.is-animating[data-pattern="center-out"] .engineeredShowcase__mask--right, .engineeredShowcase__stage.is-animating[data-pattern="outer-in"] .engineeredShowcase__mask--right { transform-origin: center bottom; animation: engMaskScaleY 1500ms cubic-bezier(0.22, 1, 0.36, 1) both; } .engineeredShowcase__arrow { top: auto; bottom: 54px; transform: none; width: 52px; height: 52px; } .engineeredShowcase__arrow:hover, .engineeredShowcase__arrow:focus-visible { transform: scale(1.04); } .engineeredShowcase__arrow--prev { left: 18px; } .engineeredShowcase__arrow--next { right: 18px; } .engineeredShowcase__progress { left: 18px; right: 18px; bottom: 18px; } } @keyframes engMaskScaleY { 0%, 10% { transform: scaleY(1); } 100% { transform: scaleY(0); } } /* HOME — black intro with progressive split reveals */ .engineeredBlackout { position: relative; --engineered-watercolor-ease: cubic-bezier(0.25, 0.25, 0.75, 0.75); /* not used now */ --engineered-watercolor-swap-ms: 2700ms; /* not used now */ --engineered-watercolor-vertical-ms: 860ms; /* used now: speed of the 5/6 -> 7 vertical watercolor slider */ /* smaller = faster, bigger = slower */ --engineered-watercolor-full-ms: 1200ms; /* not used now */ --engineered-watercolor-band-width: 60%; /* used now: width of the earlier inner strip transitions */ /* bigger = thicker strip, smaller = thinner strip */ --engineered-watercolor-strip-width:70%; /* used now: speed of the earlier inner strip transitions */ /* smaller = faster, bigger = slower */ --engineered-watercolor-strip-ms: 1200ms; /* used now: easing of the earlier inner strip transitions */ --engineered-watercolor-strip-ease: linear; /* used now, but auto-calculated by JS */ /* manual change may get overwritten */ --engineered-watercolor-strip-delay-ratio: 0.1304; /* used now, but auto-calculated by JS for 5/6 -> 7 vertical strip */ /* manual change may get overwritten */ --engineered-watercolor-full-strip-delay-ratio: 0.1803; /* used now: height/thickness of the 5/6 -> 7 vertical watercolor strip */ /* bigger = taller strip, smaller = shorter strip */ --engineered-watercolor-full-strip-height: 70%; min-height: 100vh; min-height: 100svh; background: #000; overflow: hidden; } .engineeredBlackout__viewport { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; min-height: 100vh; min-height: 100svh; background: #000; z-index: 1; } .engineeredBlackout__pane, .engineeredBlackout__fullStage { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: #000; isolation: isolate; } .engineeredBlackout__pane { z-index: 1; } .engineeredBlackout__fullStage { position: absolute; inset: 0; z-index: 8; opacity: 0; visibility: hidden; pointer-events: none; } .engineeredBlackout__fullStage.is-active { opacity: 1; visibility: visible; } .engineeredBlackout__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; } .engineeredBlackout__slide.is-active, .engineeredBlackout__fullStage.is-active .engineeredBlackout__slide--full7 { opacity: 1; visibility: visible; pointer-events: auto; } .engineeredBlackout__ghost { position: absolute; inset: 0; z-index: 3; opacity: 1 !important; visibility: visible !important; pointer-events: none !important; clip-path: inset(0 0 0 0); } .engineeredBlackout__ghost--fullMergeWrap { display: grid; grid-template-columns: 1fr 1fr; z-index: 9; } .engineeredBlackout__ghostPane { position: relative; overflow: hidden; } .engineeredBlackout__ghostPane > .engineeredBlackout__slide { position: absolute; inset: 0; opacity: 1 !important; visibility: visible !important; pointer-events: none !important; } .engineeredBlackout__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .engineeredBlackout__mediaTint { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.46) 100% ), linear-gradient( 90deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.26) 100% ); z-index: 1; pointer-events: none; } .engineeredBlackout__copy { position: absolute; top: 40%; left: 0; transform: translateY(-50%); z-index: 2; display: grid; grid-template-rows: auto auto auto; align-content: start; justify-items: start; gap: 10px; padding: clamp(72px, 8vh, 104px) 0 0 var(--engineered-copy-safe-left, clamp(34px, 4vw, 58px)); width: min(640px, calc(100% - var(--engineered-copy-safe-left, clamp(34px, 4vw, 58px)) - var(--engineered-copy-safe-right, clamp(34px, 4vw, 58px)))); max-width: min(640px, calc(100% - var(--engineered-copy-safe-left, clamp(34px, 4vw, 58px)) - var(--engineered-copy-safe-right, clamp(34px, 4vw, 58px)))); height: clamp(340px, 42vh, 420px); box-sizing: border-box; } .engineeredBlackout__copy--full { width: min(760px, calc(100% - var(--engineered-copy-safe-left, clamp(34px, 4vw, 58px)) - var(--engineered-copy-safe-right, clamp(34px, 4vw, 58px)))); max-width: min(760px, calc(100% - var(--engineered-copy-safe-left, clamp(34px, 4vw, 58px)) - var(--engineered-copy-safe-right, clamp(34px, 4vw, 58px)))); } .engineeredBlackout__eyebrow { font-family: Rajdhani, system-ui, sans-serif; font-size: clamp(13px, 0.95vw, 18px); line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 232 192 / 97%) } .engineeredBlackout__title { margin: 0; font-family: Rajdhani, system-ui, sans-serif; font-size: clamp(36px, 3.8vw, 68px); line-height: 0.95; font-weight: 700; letter-spacing: 0.01em; color: white; } .engineeredBlackout__text { max-width: min(620px, 100%); font-family: Rajdhani, system-ui, sans-serif; font-size: clamp(18px, 1.2vw, 24px); line-height: 1.18; color: rgba(255, 255, 255, 0.92); } .engineeredBlackout { --engineered-edge-nav-width: 100px; /* SEARCH: RESPONSIVE_HOME_ENGINEERED_OVERLAY_SAFE_ZONE */ --engineered-copy-safe-left: calc(var(--engineered-edge-nav-width, 100px) + clamp(18px, 2.1vw, 34px)); --engineered-copy-safe-right: calc(var(--engineered-edge-nav-width, 100px) + clamp(18px, 2.1vw, 34px)); } /* SEARCH: ENGINEERED_EDGE_NAV_3ZONE */ .engineeredBlackout__edgeNav { position: absolute; top: 0; bottom: 0; width: min(var(--engineered-edge-nav-width, 100px), 18vw); padding: 0; margin: 0; background: transparent; opacity: 0; z-index: 11; pointer-events: auto; transition: opacity 220ms ease, background 220ms ease; } .engineeredBlackout__edgeNav--prev { left: 0; } .engineeredBlackout__edgeNav--next { right: 0; } .engineeredBlackout__edgeNav:hover, .engineeredBlackout__edgeNav:focus-within { opacity: 1; outline: none; } .engineeredBlackout__edgeNav--prev:hover, .engineeredBlackout__edgeNav--prev:focus-within { background: linear-gradient(90deg, rgba(12, 15, 23, 0.2), rgba(12, 15, 23, 0.1) 48%, rgba(12, 15, 23, 0)); } .engineeredBlackout__edgeNav--next:hover, .engineeredBlackout__edgeNav--next:focus-within { background: linear-gradient(270deg, rgba(12, 15, 23, 0.2), rgba(12, 15, 23, 0.1) 48%, rgba(12, 15, 23, 0)); } .engineeredBlackout__edgeNavZone { position: absolute; left: 0; right: 0; border: 0; margin: 0; padding: 0; background: transparent; appearance: none; cursor: pointer; display: flex; align-items: center; justify-content: center; } .engineeredBlackout__edgeNavZone--top { top: 0; height: 30%; } .engineeredBlackout__edgeNavZone--middle { top: 30%; height: 40%; } .engineeredBlackout__edgeNavZone--bottom { top: 70%; height: 30%; } .engineeredBlackout__edgeNavDivider, .engineeredBlackout__edgeNavRail { position: absolute; opacity: 0; transition: opacity 220ms ease, transform 220ms ease; } .engineeredBlackout__edgeNavRail { top: 8%; bottom: 8%; width: 1px; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.12), rgba(255,255,255,0.2), rgba(255,255,255,0.12), rgba(255,255,255,0)); box-shadow: 0 0 10px rgba(255,255,255,0.05); } .engineeredBlackout__edgeNavDivider { height: 1px; right: clamp(10px, 1.2vw, 18px); left: auto; width: clamp(18px, 2vw, 28px); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.18), rgba(255,255,255,0)); } .engineeredBlackout__edgeNav--next .engineeredBlackout__edgeNavDivider { left: clamp(10px, 1.2vw, 18px); right: auto; } .engineeredBlackout__edgeNav--prev .engineeredBlackout__edgeNavRail { right: clamp(10px, 1.2vw, 18px); } .engineeredBlackout__edgeNav--next .engineeredBlackout__edgeNavRail { left: clamp(10px, 1.2vw, 18px); } .engineeredBlackout__edgeNavDivider--top { top: 30%; } .engineeredBlackout__edgeNavDivider--bottom { top: 70%; } .engineeredBlackout__edgeNav:hover .engineeredBlackout__edgeNavDivider, .engineeredBlackout__edgeNav:hover .engineeredBlackout__edgeNavRail, .engineeredBlackout__edgeNav:focus-within .engineeredBlackout__edgeNavDivider, .engineeredBlackout__edgeNav:focus-within .engineeredBlackout__edgeNavRail { opacity: 1; } /* SEARCH: ENGINEERED_OVERLAY_ARROW_CIRCLE_PASS_01 */ .engineeredBlackout__edgeNavIcon { position: relative; width: clamp(42px, 3vw, 52px); height: clamp(42px, 3vw, 52px); display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.92); opacity: 0; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); background: linear-gradient(180deg, rgba(12, 18, 28, 0.68), rgba(8, 12, 20, 0.48)); box-shadow: 0 10px 24px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity 220ms ease, transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease; } .engineeredBlackout__edgeNavIconSvg { display: block; width: 46%; height: 46%; overflow: visible; } .engineeredBlackout__edgeNavIconLine { fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .engineeredBlackout__edgeNavZone:hover .engineeredBlackout__edgeNavIcon, .engineeredBlackout__edgeNavZone:focus-visible .engineeredBlackout__edgeNavIcon { opacity: 1; transform: translateY(-1px) scale(1.04); border-color: rgba(255,255,255,0.34); background: linear-gradient(180deg, rgba(18, 28, 42, 0.76), rgba(10, 16, 26, 0.58)); box-shadow: 0 14px 28px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.12); } .engineeredBlackout__edgeNavZone:focus-visible { outline: none; } .engineeredBlackout__edgeNavZone[disabled] { cursor: default; } .engineeredBlackout__nav { position: absolute; left: 50%; bottom: clamp(18px, 2.8vw, 34px); transform: translateX(-50%); z-index: 12; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 1.8vw, 22px); width: min(30vw, 36rem); min-width: min(22rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); padding: 0.85rem 1.15rem; border-radius: 999px; /* background: linear-gradient(180deg, rgba(15, 18, 26, 0.68), rgba(8, 10, 16, 0.58)); */ /* border: 1px solid rgba(255, 255, 255, 0.14); */ box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); pointer-events: auto; } .engineeredBlackout__navBtn { appearance: none; border: 0; background: transparent; color: rgba(248, 244, 238, 0.92); font: inherit; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; padding: 0; cursor: pointer; transition: opacity 180ms ease, transform 180ms ease, color 180ms ease; } .engineeredBlackout__navBtn:hover, .engineeredBlackout__navBtn:focus-visible { color: #ffffff; opacity: 1; transform: translateY(-1px); outline: none; } .engineeredBlackout__navBtn[disabled] { opacity: 0.35; cursor: default; transform: none; } .engineeredBlackout__navMeter { position: relative; flex: 1 1 auto; min-width: 0; } .engineeredBlackout__navTrack { position: relative; height: 2px; width: 100%; border-radius: 999px; background: rgba(255, 255, 255, 0.22); overflow: hidden; } .engineeredBlackout__navFill { position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: inherit; background: linear-gradient(90deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.98)); box-shadow: 0 0 14px rgba(255, 255, 255, 0.28); transition: width 280ms ease; } .engineeredBlackout__navTicks { position: absolute; inset: 50% 0 auto 0; transform: translateY(-50%); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: center; pointer-events: none; } .engineeredBlackout__navTick { justify-self: center; width: 0.45rem; height: 0.45rem; border-radius: 999px; background: rgba(245, 245, 245, 0.5); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); transition: transform 220ms ease, background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, opacity 220ms ease; } .engineeredBlackout__navTick.is-done { background: rgba(255, 255, 255, 0.92); border-color: rgba(255, 255, 255, 0.92); } .engineeredBlackout__navTick.is-active { background: #ffffff; border-color: #ffffff; transform: scale(1.2); box-shadow: 0 0 0 0.24rem rgba(255, 255, 255, 0.12); } @media (max-width: 900px) { .engineeredBlackout { --engineered-edge-nav-width: 72px; --engineered-copy-safe-left: calc(var(--engineered-edge-nav-width, 72px) + 14px); --engineered-copy-safe-right: calc(var(--engineered-edge-nav-width, 72px) + 14px); } .engineeredBlackout__edgeNavRail { top: 10%; bottom: 10%; } .engineeredBlackout__nav { width: min(82vw, 32rem); gap: 14px; padding: 0.8rem 0.95rem; } .engineeredBlackout__navBtn { font-size: 0.72rem; letter-spacing: 0.18em; } } .engineeredBlackout__curtain { position: absolute; inset: 0; background-color: #000; background-image: none; background-position: center center; background-size: cover; background-repeat: no-repeat; z-index: 4; will-change: transform; transform: translate3d(0, 0, 0); } .engineeredBlackout[data-engineered-curtain-render="pattern-soft"] .engineeredBlackout__curtain { background-color: #020202; background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01) ), radial-gradient( circle at 18% 24%, rgba(255, 255, 255, 0.08), transparent 28% ), radial-gradient( circle at 78% 70%, rgba(255, 255, 255, 0.06), transparent 24% ), linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.18)); background-size: cover, 320px 320px, 280px 280px, cover; } .engineeredBlackout[data-engineered-curtain-render="pattern-paper"] .engineeredBlackout__curtain { background-color: #060606; background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01) ), radial-gradient( circle at 12% 18%, rgba(255, 255, 255, 0.07), transparent 26% ), radial-gradient( circle at 82% 74%, rgba(255, 255, 255, 0.05), transparent 22% ), linear-gradient(0deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px); background-size: cover, 300px 300px, 260px 260px, 22px 22px, 22px 22px; } .engineeredBlackout[data-engineered-curtain-render="pattern-grid"] .engineeredBlackout__curtain { background-color: #040404; background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01) ), linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px), radial-gradient( circle at 50% 50%, rgba(255, 255, 255, 0.04), transparent 55% ); background-size: cover, 28px 28px, 28px 28px, cover; } .engineeredBlackout__curtain--leftSwap { z-index: 5; transform: none; clip-path: inset(0 0 0 100%); } .engineeredBlackout__curtain--rightSwap { z-index: 5; transform: none; clip-path: polygon( calc(0% - var(--engineered-watercolor-strip-width)) 0, 0% 0, 0% 100%, calc(0% - var(--engineered-watercolor-strip-width)) 100% ); } .engineeredBlackout__curtain--leftFinal { z-index: 5; transform: none; clip-path: polygon( calc(0% - var(--engineered-watercolor-strip-width)) 0, 0% 0, 0% 100%, calc(0% - var(--engineered-watercolor-strip-width)) 100% ); } .engineeredBlackout__curtain--rightFinal { z-index: 5; transform: none; clip-path: polygon( 0 calc(0% - var(--engineered-watercolor-strip-width)), 100% calc(0% - var(--engineered-watercolor-strip-width)), 100% 0, 0 0 ); } .engineeredBlackout__curtain--leftMerge, .engineeredBlackout__curtain--rightMerge { z-index: 6; transform: translate3d(0, 100%, 0); } .engineeredBlackout__curtain--fullMerge { z-index: 10; transform: none; clip-path: polygon( 0 100%, 100% 100%, 100% calc(100% + var(--engineered-watercolor-full-strip-height)), 0 calc(100% + var(--engineered-watercolor-full-strip-height)) ); } .engineeredBlackout__curtain--fullReveal { z-index: 11; transform: translate3d(0, 0, 0); opacity: 0; } .engineeredBlackout__curtain--fullReset { z-index: 12; transform: translate3d(0, -100%, 0); } .engineeredBlackout.is-left-started .engineeredBlackout__curtain--left { /* SEARCH: ENGINEERED_SPEED_FIRST_BLACK_FALL */ /* first black curtain opening speed for slide 1 */ animation: engineeredBlackoutRevealDown 800ms cubic-bezier(0.22, 0.72, 0.18, 1) 240ms forwards; } .engineeredBlackout.is-right-started .engineeredBlackout__curtain--right { /* SEARCH: ENGINEERED_SPEED_SECOND_BLACK_RISE */ /* second black curtain opening speed for slide 2 */ animation: engineeredBlackoutRevealUp 800ms cubic-bezier(0.22, 0.72, 0.18, 1) 0ms forwards; } .engineeredBlackout.is-left-swap-covering .engineeredBlackout__curtain--leftSwap { animation: engineeredBlackoutFirstStripPass var(--engineered-watercolor-strip-ms) var(--engineered-watercolor-strip-ease) forwards; } .engineeredBlackout.is-left-swap-covering .engineeredBlackout__ghost--leftSwap { animation: engineeredBlackoutFirstGhostWipe calc(var(--engineered-watercolor-strip-ms) * (1 - var(--engineered-watercolor-strip-delay-ratio))) var(--engineered-watercolor-strip-ease) calc(var(--engineered-watercolor-strip-ms) * var(--engineered-watercolor-strip-delay-ratio)) forwards; } .engineeredBlackout.is-left-swap-revealing .engineeredBlackout__curtain--leftSwap { animation: none; } .engineeredBlackout.is-right-swap-covering .engineeredBlackout__curtain--rightSwap { animation: engineeredBlackoutSecondStripPass var(--engineered-watercolor-strip-ms) var(--engineered-watercolor-strip-ease) forwards; } .engineeredBlackout.is-right-swap-covering .engineeredBlackout__ghost--rightSwap { animation: engineeredBlackoutSecondGhostWipe var(--engineered-watercolor-strip-ms) var(--engineered-watercolor-strip-ease) forwards; } .engineeredBlackout.is-right-swap-revealing .engineeredBlackout__curtain--rightSwap { animation: none; } .engineeredBlackout.is-left-final-covering .engineeredBlackout__curtain--leftFinal { animation: engineeredBlackoutThirdStripPass var(--engineered-watercolor-strip-ms) var(--engineered-watercolor-strip-ease) forwards; } .engineeredBlackout.is-left-final-covering .engineeredBlackout__ghost--leftFinal { animation: engineeredBlackoutThirdGhostWipe var(--engineered-watercolor-strip-ms) var(--engineered-watercolor-strip-ease) forwards; } .engineeredBlackout.is-left-final-revealing .engineeredBlackout__curtain--leftFinal { animation: none; } .engineeredBlackout.is-right-final-covering .engineeredBlackout__curtain--rightFinal { animation: engineeredBlackoutFourthStripPass var(--engineered-watercolor-strip-ms) var(--engineered-watercolor-strip-ease) forwards; } .engineeredBlackout.is-right-final-covering .engineeredBlackout__ghost--rightFinal { animation: engineeredBlackoutFourthGhostWipe var(--engineered-watercolor-strip-ms) var(--engineered-watercolor-strip-ease) forwards; } .engineeredBlackout.is-right-final-revealing .engineeredBlackout__curtain--rightFinal { animation: none; } .engineeredBlackout.is-merge-covering .engineeredBlackout__curtain--leftMerge, .engineeredBlackout.is-merge-covering .engineeredBlackout__curtain--rightMerge { animation: engineeredBlackoutCoverUp 900ms cubic-bezier(0.22, 0.72, 0.18, 1) forwards; } .engineeredBlackout.is-full-merge-covering .engineeredBlackout__curtain--fullMerge { animation: engineeredBlackoutFullStripPass var(--engineered-watercolor-full-ms) var(--engineered-watercolor-ease) forwards; } .engineeredBlackout.is-full-merge-covering .engineeredBlackout__ghost--fullMergeWrap { animation: engineeredBlackoutFullGhostWipe calc(var(--engineered-watercolor-full-ms) * (1 - var(--engineered-watercolor-full-strip-delay-ratio))) var(--engineered-watercolor-ease) calc(var(--engineered-watercolor-full-ms) * var(--engineered-watercolor-full-strip-delay-ratio)) both; } .engineeredBlackout.is-full-merge-covering .engineeredBlackout__fullStage.is-active { animation: engineeredBlackoutFullStageReveal calc(var(--engineered-watercolor-full-ms) * (1 - var(--engineered-watercolor-full-strip-delay-ratio))) var(--engineered-watercolor-ease) calc(var(--engineered-watercolor-full-ms) * var(--engineered-watercolor-full-strip-delay-ratio)) both; } .engineeredBlackout.is-full-revealing .engineeredBlackout__curtain--fullReveal { opacity: 1; animation: engineeredBlackoutFullRevealUp var(--engineered-watercolor-full-ms) var(--engineered-watercolor-ease) forwards; } .engineeredBlackout.is-full-resetting .engineeredBlackout__curtain--fullReset { /* SEARCH: ENGINEERED_SPEED_BLACK_RESET_DROP */ /* black curtain speed after slide 7, before the loop restarts */ animation: engineeredBlackoutFullResetDown 350ms cubic-bezier(0.22, 0.72, 0.18, 1) forwards; } @keyframes engineeredBlackoutRevealDown { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 100%, 0); } } @keyframes engineeredBlackoutRevealUp { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -100%, 0); } } @keyframes engineeredBlackoutFirstStripPass { from { transform: none; clip-path: polygon( 100% 0, calc(100% + var(--engineered-watercolor-strip-width)) 0, calc(100% + var(--engineered-watercolor-strip-width)) 100%, 100% 100% ); } to { transform: none; clip-path: polygon( calc(0% - var(--engineered-watercolor-strip-width)) 0, 0% 0, 0% 100%, calc(0% - var(--engineered-watercolor-strip-width)) 100% ); } } @keyframes engineeredBlackoutFirstGhostWipe { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 100% 0 0); } } @keyframes engineeredBlackoutSecondStripPass { from { transform: none; clip-path: polygon( calc(0% - var(--engineered-watercolor-strip-width)) 0, 0% 0, 0% 100%, calc(0% - var(--engineered-watercolor-strip-width)) 100% ); } to { transform: none; clip-path: polygon( 100% 0, calc(100% + var(--engineered-watercolor-strip-width)) 0, calc(100% + var(--engineered-watercolor-strip-width)) 100%, 100% 100% ); } } @keyframes engineeredBlackoutSecondGhostWipe { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } } @keyframes engineeredBlackoutThirdStripPass { from { transform: none; clip-path: polygon( calc(0% - var(--engineered-watercolor-strip-width)) 0, 0% 0, 0% 100%, calc(0% - var(--engineered-watercolor-strip-width)) 100% ); } to { transform: none; clip-path: polygon( 100% 0, calc(100% + var(--engineered-watercolor-strip-width)) 0, calc(100% + var(--engineered-watercolor-strip-width)) 100%, 100% 100% ); } } @keyframes engineeredBlackoutThirdGhostWipe { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } } @keyframes engineeredBlackoutFourthStripPass { from { transform: none; clip-path: polygon( 0 calc(0% - var(--engineered-watercolor-strip-width)), 100% calc(0% - var(--engineered-watercolor-strip-width)), 100% 0, 0 0 ); } to { transform: none; clip-path: polygon( 0 100%, 100% 100%, 100% calc(100% + var(--engineered-watercolor-strip-width)), 0 calc(100% + var(--engineered-watercolor-strip-width)) ); } } @keyframes engineeredBlackoutFourthGhostWipe { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } } @keyframes engineeredBlackoutSweepCoverRight { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes engineeredBlackoutSweepRevealRight { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(100%, 0, 0); } } @keyframes engineeredBlackoutSweepCoverFromLeft { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes engineeredBlackoutSweepRevealToMiddle { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(100%, 0, 0); } } @keyframes engineeredBlackoutSweepCoverDown { from { transform: translate3d(0, -100%, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes engineeredBlackoutSweepRevealDown { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 100%, 0); } } @keyframes engineeredBlackoutCoverUp { from { transform: translate3d(0, 100%, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes engineeredBlackoutFullStripPass { from { transform: none; clip-path: polygon( 0 100%, 100% 100%, 100% calc(100% + var(--engineered-watercolor-full-strip-height)), 0 calc(100% + var(--engineered-watercolor-full-strip-height)) ); } to { transform: none; clip-path: polygon( 0 calc(0% - var(--engineered-watercolor-full-strip-height)), 100% calc(0% - var(--engineered-watercolor-full-strip-height)), 100% 0, 0 0 ); } } @keyframes engineeredBlackoutFullStageReveal { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes engineeredBlackoutFullGhostWipe { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } } @keyframes engineeredBlackoutFullRevealUp { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -100%, 0); } } @keyframes engineeredBlackoutFullResetDown { from { transform: translate3d(0, -100%, 0); } to { transform: translate3d(0, 0, 0); } } @media (max-width: 900px) { .engineeredBlackout__copy, .engineeredBlackout__copy--full { width: calc(100% - 40px); max-width: calc(100% - 40px); padding: 30px 20px 0; gap: 8px; } .engineeredBlackout__title { font-size: clamp(34px, 8.8vw, 56px); } .engineeredBlackout__text { font-size: clamp(18px, 3.8vw, 24px); line-height: 1.16; } } @media (orientation: portrait) and (max-width: 1100px) { html.home-slideMode .engineeredBlackout, html.home .engineeredBlackout { --engineered-edge-nav-width: clamp(54px, 8vw, 72px); --engineered-copy-safe-left: calc(var(--engineered-edge-nav-width) + clamp(12px, 2vw, 18px)); --engineered-copy-safe-right: calc(var(--engineered-edge-nav-width) + clamp(12px, 2vw, 18px)); } html.home-slideMode .engineeredBlackout__viewport, html.home .engineeredBlackout__viewport { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); height: 100svh; min-height: 100svh; } html.home-slideMode .engineeredBlackout__pane, html.home .engineeredBlackout__pane, html.home-slideMode .engineeredBlackout__ghostPane, html.home .engineeredBlackout__ghostPane { min-height: 0; height: 100%; } html.home-slideMode .engineeredBlackout__ghost--fullMergeWrap, html.home .engineeredBlackout__ghost--fullMergeWrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); } html.home-slideMode .engineeredBlackout__copy, html.home .engineeredBlackout__copy { top: 40%; left: 0; padding: clamp(34px, 5.5vh, 64px) 0 0 var(--engineered-copy-safe-left); /* width: calc(100% - var(--engineered-copy-safe-left) - var(--engineered-copy-safe-right)); */ /* max-width: calc(100% - var(--engineered-copy-safe-left) - var(--engineered-copy-safe-right)); */ height: auto; min-height: 0; max-height: calc(100% - clamp(36px, 6vh, 72px)); gap: clamp(6px, 1.2vh, 12px); width: 90%; text-shadow: 0px 0px 3px #000000; } html.home-slideMode .engineeredBlackout__title, html.home .engineeredBlackout__title { font-size: clamp(28px, 5.2vw, 46px); line-height: 0.96; } html.home-slideMode .engineeredBlackout__text, html.home .engineeredBlackout__text { max-width: min(100%, 60ch); font-size: clamp(18px, 2.35vw, 21px); line-height: 1.16; font-weight: 600; } } /* ========================================================= HOME slide-mode — Capabilities + Solutions row sizing fix Keeps the 2-row grid clean on desktop/tall layouts. ========================================================= */ html.home-slideMode #capabilities_offerings.homeSlide { --dual-card-w: clamp(292px, 32vw, 400px); --dual-card-h: clamp(222px, 32vh, 400px); --dual-row-gap: 7px; --dual-col-gap: 14px; } html.home-slideMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .stripMarquee > .stripMarquee__track { grid-template-rows: repeat(2, var(--dual-card-h)); row-gap: var(--dual-row-gap); column-gap: var(--dual-col-gap); align-content: start; } html.home-slideMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .stripMarquee > .stripMarquee__track .stripCard { height: 100%; min-height: 0; aspect-ratio: auto; } /* ============================================================ RESPONSIVE_HOME_ENGINEERED_OVERLAY_SAFE_ZONE Root fix: reserve the left/right edge navigation zones for the Home middle split copy on normal desktop and laptop breakpoints. This is why 1920x1080 started overlapping after the edge arrows became more visually prominent: the base copy box never reserved the overlay interaction width, so only the QHD/ultrawide special cases were safe. ============================================================ */ @media (min-width: 901px) and (max-width: 2199px) { html.home-slideMode .engineeredBlackout, html.home .engineeredBlackout { --engineered-edge-nav-width: clamp(72px, 6.2vw, 100px); --engineered-copy-safe-left: calc(var(--engineered-edge-nav-width) + clamp(18px, 1.7vw, 30px)); --engineered-copy-safe-right: calc(var(--engineered-edge-nav-width) + clamp(18px, 1.7vw, 30px)); } html.home-slideMode .engineeredBlackout__copy, html.home .engineeredBlackout__copy { left: 0; padding-left: var(--engineered-copy-safe-left); width: min(640px, calc(100% - var(--engineered-copy-safe-left) - var(--engineered-copy-safe-right))); max-width: min(640px, calc(100% - var(--engineered-copy-safe-left) - var(--engineered-copy-safe-right))); } html.home-slideMode .engineeredBlackout__copy--full, html.home .engineeredBlackout__copy--full { width: min(760px, calc(100% - var(--engineered-copy-safe-left) - var(--engineered-copy-safe-right))); max-width: min(760px, calc(100% - var(--engineered-copy-safe-left) - var(--engineered-copy-safe-right))); } } /* ============================================================ RESPONSIVE_HOME_BP_QHD_2560_START Super-desktop / 2560x1440 pass. - opens card spacing on Capabilities + Solutions - centers both dual-strip rows vertically in the available panel height - shifts Engineered split copy inward so it clears the edge interaction zone - centers Testimonials cards vertically in the free strip area ============================================================ */ @media (min-width: 2200px) and (min-height: 1300px) { /* Capabilities + Solutions: square cards, larger breathing space, centered rows */ /* RESPONSIVE_HOME_QHD_CAPS_SQUARE_TUNE */ html.home-slideMode #capabilities_offerings.homeSlide, html.home #capabilities_offerings.homeSlide { --dual-card-w: clamp(390px, 16.4vw, 430px); --dual-card-h: clamp(390px, 16.4vw, 430px); --dual-row-gap: clamp(72px, 7vh, 100px); --dual-col-gap: clamp(55px, 3vw, 84px); --dual-super-pad-x: clamp(28px, 2.2vw, 54px); --dual-super-pad-y: clamp(22px, 2.2vh, 36px); } html.home-slideMode #capabilities_offerings.homeSlide .dualStrips, html.home #capabilities_offerings.homeSlide .dualStrips { height: 100%; } html.home-slideMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection, html.home #capabilities_offerings.homeSlide .dualStrips__panel.stripSection { display: flex; flex-direction: column; } html.home-slideMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .container, html.home #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .container { flex: 0 0 auto; } html.home-slideMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .stripMarquee, html.home #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .stripMarquee { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; padding: var(--dual-super-pad-y) var(--dual-super-pad-x) !important; box-sizing: border-box; } html.home-slideMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .stripMarquee > .stripMarquee__track, html.home #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .stripMarquee > .stripMarquee__track { grid-template-rows: repeat(2, var(--dual-card-h)); row-gap: var(--dual-row-gap); column-gap: var(--dual-col-gap); align-content: center; } html.home-slideMode #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .stripMarquee > .stripMarquee__track .stripCard, html.home #capabilities_offerings.homeSlide .dualStrips__panel.stripSection > .stripMarquee > .stripMarquee__track .stripCard { height: 100%; min-height: 0; aspect-ratio: 1 / 1; } /* Engineered split: move copy away from edge zones and use the extra width better */ html.home-slideMode .engineeredBlackout, html.home .engineeredBlackout { --engineered-edge-nav-width: 100px; } html.home-slideMode .engineeredBlackout__copy, html.home .engineeredBlackout__copy { top: 43%; left: clamp(56px, 4vw, 100px); padding: clamp(92px, 7vh, 118px) 0 0; gap: 14px; width: min(720px, calc(100% - clamp(160px, 11vw, 260px))); max-width: min(720px, calc(100% - clamp(160px, 11vw, 260px))); } html.home-slideMode .engineeredBlackout__copy--full, html.home .engineeredBlackout__copy--full { width: min(860px, calc(100% - clamp(180px, 12vw, 300px))); max-width: min(860px, calc(100% - clamp(180px, 12vw, 300px))); } html.home-slideMode .engineeredBlackout__title, html.home .engineeredBlackout__title { font-size: clamp(42px, 3.05vw, 82px); } html.home-slideMode .engineeredBlackout__text, html.home .engineeredBlackout__text { font-size: clamp(20px, 1.04vw, 28px); line-height: 1.2; max-width: min(660px, 100%); } /* Testimonials: center cards vertically inside the free area */ html.home #testimonials_strip.homeSlide > .stripMarquee, html.home-slideMode #testimonials_strip.homeSlide > .stripMarquee { display: flex; align-items: center; padding-top: 0 !important; padding-bottom: 0 !important; } html.home #testimonials_strip.homeSlide .stripMarquee__track, html.home-slideMode #testimonials_strip.homeSlide .stripMarquee__track { align-items: center; } html.home #testimonials_strip.homeSlide .stripCard, html.home-slideMode #testimonials_strip.homeSlide .stripCard { width: min(360px, clamp(280px, 15vw, 360px)); height: auto !important; min-height: 0 !important; } } /* RESPONSIVE_HOME_BP_QHD_2560_END */ /* RESPONSIVE_HOME_BP_ULTRAWIDE_2560x1080 Home middle split: keep copy clear of the 100px edge overlay zones on 2560x1080. */ @media (min-width: 2200px) and (max-height: 1299px) { html.home-slideMode .engineeredBlackout, html.home .engineeredBlackout { --engineered-edge-nav-width: 100px; } html.home-slideMode .engineeredBlackout__copy, html.home .engineeredBlackout__copy { top: 43%; left: 0; padding: clamp(78px, 6.2vh, 104px) 0 0 140px; gap: 12px; width: min(720px, calc(100% - 280px)); max-width: min(720px, calc(100% - 280px)); } html.home-slideMode .engineeredBlackout__copy--full, html.home .engineeredBlackout__copy--full { width: min(860px, calc(100% - 320px)); max-width: min(860px, calc(100% - 320px)); } } /* RESPONSIVE_HOME_BP_DESKTOP_1920_OVERLAY_CLEARANCE Explicit 1920x1080 / 1536x864 / 1600x900 style desktop tuning. */ @media (min-width: 1500px) and (max-width: 2199px) and (min-height: 820px) { html.home-slideMode .engineeredBlackout, html.home .engineeredBlackout { --engineered-edge-nav-width: clamp(88px, 5.8vw, 100px); --engineered-copy-safe-left: calc(var(--engineered-edge-nav-width) + clamp(18px, 1.4vw, 26px)); --engineered-copy-safe-right: calc(var(--engineered-edge-nav-width) + clamp(18px, 1.4vw, 26px)); } html.home-slideMode .engineeredBlackout__copy, html.home .engineeredBlackout__copy { top: 42%; padding-top: clamp(78px, 6.8vh, 102px); padding-left: var(--engineered-copy-safe-left); width: min(660px, calc(100% - var(--engineered-copy-safe-left) - var(--engineered-copy-safe-right))); max-width: min(660px, calc(100% - var(--engineered-copy-safe-left) - var(--engineered-copy-safe-right))); } html.home-slideMode .engineeredBlackout__copy--full, html.home .engineeredBlackout__copy--full { width: min(800px, calc(100% - var(--engineered-copy-safe-left) - var(--engineered-copy-safe-right))); max-width: min(800px, calc(100% - var(--engineered-copy-safe-left) - var(--engineered-copy-safe-right))); } }