/* ========================================================================= PULSE HOMEPAGE (v2, navy gap section): homepage-only styles Loaded ONLY by index.html, after colors_and_type.css + homepage.css. Nav, footer, and the Rubik's cube (.cube-scene / .cube, built by pulse-cube.js) keep their shared styles in homepage.css. Every section here is a full-bleed band that paints its own background, so each one owns its top and bottom padding (the .section rhythm system is not used on this page). Base grid rules stay single-class so the mobile overrides below always win (see the specificity gotcha in CLAUDE.md). Rotators (.h-problems, .h-cases) and the POC timeline are driven by home.js. Without JS (no .js class on ) they render as plain stacked content. ========================================================================= */ :root { --h-pad: clamp(64px, 8vw, 104px); --h-green: #1F6B51; /* Scratch slide + guarantee icon */ --h-sky: #C9D5E8; /* statement band */ } /* ---------------------------------------------------------------- shared */ .h-eyebrow { display: block; align-self: flex-start; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-mono-label); text-transform: uppercase; color: var(--coral-press); } .h-eyebrow--light { color: var(--coral-300); } .h-eyebrow--muted { color: var(--ink-500); } .h-title { margin: 24px 0 0; font-size: clamp(34px, 4.2vw, 52px); line-height: 1.08; letter-spacing: -0.035em; font-weight: var(--weight-bold); color: var(--navy-700); } .h-lede { margin: 16px 0 0; font-size: var(--text-md); line-height: 1.6; color: var(--ink-600); } .h-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 12px; font-family: var(--font-sans); font-size: 15px; font-weight: var(--weight-semibold); line-height: 1.2; text-decoration: none; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .h-btn:hover { text-decoration: none; } .h-btn .h-arrow { flex: none; transition: transform var(--duration-base) var(--ease-out); } .h-btn:hover .h-arrow { transform: translateX(3px); } .h-btn--coral, .h-btn--coral:visited { background: var(--coral-cta); color: #FFFFFF; box-shadow: 0 8px 24px rgba(214, 63, 51, 0.24); } .h-btn--coral:hover { background: var(--coral-press); color: #FFFFFF; } .h-btn--outline, .h-btn--outline:visited { background: #FFFFFF; color: var(--navy-700); border: 1px solid var(--ink-200); } .h-btn--outline:hover { border-color: var(--navy-700); color: var(--navy-700); } .h-btn--white, .h-btn--white:visited { background: #FFFFFF; color: var(--navy-700); } .h-btn--white:hover { background: var(--ink-100); color: var(--navy-700); } .h-btn--coral-text, .h-btn--coral-text:visited, .h-btn--coral-text:hover { color: var(--coral-press); } .h-btn--block { display: flex; width: 100%; } /* ---------------------------------------------------------------- hero */ .h-hero { background: var(--bg); } .h-hero-grid { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 56px; align-items: center; padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 6vw, 88px); } .h-hero-copy { display: flex; flex-direction: column; align-items: flex-start; } .h-hero h1 { margin: 0; font-size: clamp(42px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -0.04em; font-weight: var(--weight-bold); color: var(--navy-700); } .h-accent { color: var(--coral-cta); } .h-hero-sub { margin: 28px 0 0; max-width: 560px; font-size: 19px; line-height: 1.6; color: var(--ink-600); } .h-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; } .h-hero .h-btn { min-height: 54px; padding: 0 26px; } .h-trust { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-500); } .h-trust svg { color: var(--green-500); flex: none; } /* the cube itself is untouched (homepage.css + pulse-cube.js); this only gives its column the mockup's height so it sits centered beside the copy */ .h-hero .cube-scene { min-height: 560px; justify-content: center; } /* ---------------------------------------------------------------- the gap */ .h-gap { background: var(--navy-500); color: #FFFFFF; padding-top: var(--h-pad); padding-bottom: var(--h-pad); overflow: hidden; } .h-gap-title { margin: 28px 0 0; font-size: clamp(44px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -0.04em; font-weight: var(--weight-bold); color: #FFFFFF; } .h-gap-title span { color: var(--coral-300); } .h-gap-grid { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5.5vw, 80px); align-items: stretch; } .h-gap-chart { padding: 28px; border-radius: 24px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); display: flex; align-items: center; } .h-gap-chart svg { display: block; width: 100%; height: auto; } .gc-label { font-family: var(--font-sans); font-size: 14px; } .gc-label--coral { fill: var(--coral-300); font-weight: var(--weight-semibold); } .gc-label--white { fill: rgba(255, 255, 255, 0.8); font-weight: var(--weight-medium); } .gc-mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; fill: rgba(255, 255, 255, 0.7); } .gc-mono--dim { fill: rgba(255, 255, 255, 0.6); } .gc-mono--gap { font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: 2px; fill: #FFFFFF; } .h-gap-side { display: flex; flex-direction: column; align-items: flex-start; } .h-problems { width: 100%; } .h-problem-stack { display: flex; flex-direction: column; gap: 14px; } .h-problem { padding: 32px 36px; border-radius: 22px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); } .h-problem-num { font-family: var(--font-mono); font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: 0.12em; color: var(--coral-300); } .h-problem-num span { color: rgba(255, 255, 255, 0.4); } .h-problem h3 { margin: 16px 0 0; font-size: 26px; line-height: 1.25; letter-spacing: -0.02em; font-weight: var(--weight-semibold); color: #FFFFFF; } .h-problem p { margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); } .h-dots { display: none; } /* enhanced: all five cards share one grid cell and cross-fade */ .js .h-problem-stack { display: grid; } .js .h-problem { grid-area: 1 / 1; min-height: 270px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 500ms ease, transform 500ms ease; } .js .h-problem.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } .js .h-dots { display: flex; align-items: center; margin: 14px 0 0 -14px; } .h-dot { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; } .h-dot span { display: block; height: 8px; width: 8px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.35); transition: width 300ms ease, background 300ms ease; } .h-dot:hover span { background: rgba(255, 255, 255, 0.6); } .h-dot.is-active span { width: 28px; background: var(--coral-300); } .h-gap-close { margin: 22px 0 0; font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, 0.84); } .h-gap-close strong { color: #FFFFFF; font-weight: var(--weight-semibold); } .h-gap-side .h-btn { margin-top: 26px; } /* ---------------------------------------------------------------- services */ .h-services { background: #FFFFFF; padding-top: var(--h-pad); padding-bottom: clamp(64px, 7vw, 96px); } .h-services-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .h-svc { padding: 40px 36px; border-radius: 28px; background: var(--ink-50); border: 1px solid var(--ink-150); display: flex; flex-direction: column; } .h-svc-tag { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral-press); } .h-svc h3 { margin: 16px 0 0; min-height: 2.3em; font-size: 28px; line-height: 1.15; letter-spacing: -0.03em; font-weight: var(--weight-bold); color: var(--navy-700); } .h-svc-desc { margin: 16px 0 0; min-height: 6.4em; font-size: var(--text-base); line-height: 1.6; color: var(--ink-600); } .h-svc ul { margin: 28px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; flex-grow: 1; } .h-svc li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-700); } .h-check { width: 24px; height: 24px; border-radius: var(--radius-pill); flex: none; margin-top: -1px; background: var(--coral-100); color: var(--coral-press); display: flex; align-items: center; justify-content: center; } .h-svc .h-btn { margin-top: 36px; } /* ---------------------------------------------------------------- case studies */ .h-cases { position: relative; overflow: hidden; background: var(--coral-cta); color: #FFFFFF; } .h-case { color: #FFFFFF; padding-top: 72px; padding-bottom: 72px; } .h-case--coral { background: var(--coral-cta); } .h-case--navy { background: var(--navy-500); } .h-case--green { background: var(--h-green); } .h-case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; } .h-case-copy { display: flex; flex-direction: column; align-items: flex-start; } .h-case-kicker { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-mono-label); text-transform: uppercase; color: rgba(255, 255, 255, 0.85); } .h-case h2 { margin: 20px 0 0; font-size: clamp(32px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.03em; font-weight: var(--weight-bold); color: #FFFFFF; } .h-case-copy p { margin: 20px 0 0; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, 0.9); } .h-case-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; width: 100%; } .h-case-stats > div { display: flex; flex-direction: column; gap: 6px; } .h-stat-num { font-size: 34px; line-height: 1; font-weight: var(--weight-bold); letter-spacing: -0.03em; color: #FFFFFF; } .h-stat-label { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); } .h-case-copy .h-btn { margin-top: 32px; } .h-case-side { display: flex; flex-direction: column; gap: 24px; } .h-case-quote { margin: 0; padding: 28px 30px; border-radius: 22px; background: #FFFFFF; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; gap: 14px; } .h-quote-mark { color: var(--coral-500); } .h-case--navy .h-quote-mark { color: var(--navy-500); } .h-case--green .h-quote-mark { color: var(--h-green); } .h-case-quote blockquote { margin: 0; font-size: 19px; line-height: 1.45; font-weight: var(--weight-medium); letter-spacing: -0.01em; color: var(--navy-700); } .h-case-quote figcaption { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--ink-500); } .h-bars { padding: 28px; border-radius: 22px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18); display: flex; flex-direction: column; gap: 18px; } .h-bars-title { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); } .h-bar { display: flex; flex-direction: column; gap: 8px; } .h-bar-head { display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-sm); color: rgba(255, 255, 255, 0.88); } .h-bar-val { font-family: var(--font-mono); font-weight: var(--weight-semibold); color: #FFFFFF; white-space: nowrap; } .h-bar-track { height: 14px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.14); overflow: hidden; } .h-bar-fill { height: 14px; min-width: 8px; border-radius: var(--radius-pill); background: #FFFFFF; } .h-bar-fill--before { background: rgba(255, 255, 255, 0.45); } .h-cases-ui { display: none; } /* enhanced: slides share one grid cell and cross-fade; the eyebrow and the case tabs float over them */ .js .h-case-stack { display: grid; } .js .h-case { grid-area: 1 / 1; padding-top: 150px; padding-bottom: 196px; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 600ms ease, transform 600ms ease; } .js .h-case.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } .js .h-cases-ui { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; } .h-cases-ui-inner { height: 100%; padding-top: 88px; padding-bottom: 60px; display: flex; flex-direction: column; justify-content: space-between; } .h-case-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-mono-label); text-transform: uppercase; color: rgba(255, 255, 255, 0.85); } .h-case-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; pointer-events: auto; } .h-case-tab { min-height: 76px; padding: 16px 4px 0; border: 0; border-top: 3px solid rgba(255, 255, 255, 0.3); background: none; text-align: left; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; font-family: var(--font-sans); transition: border-color 300ms ease; } .h-tab-name { font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: 1.3; color: rgba(255, 255, 255, 0.75); transition: color 300ms ease; } .h-tab-ind { font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, 0.75); } .h-case-tab:hover .h-tab-name, .h-case-tab.is-active .h-tab-name { color: #FFFFFF; } .h-case-tab.is-active { border-top-color: #FFFFFF; } /* ---------------------------------------------------------------- statement */ .h-statement { background: var(--h-sky); min-height: 520px; padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; justify-content: center; } .h-statement .wrap { width: 100%; } .h-statement h2 { margin: 0; display: flex; flex-direction: column; gap: clamp(20px, 3vw, 44px); font-size: clamp(32px, 3.8vw, 52px); line-height: 1.1; letter-spacing: -0.035em; font-weight: var(--weight-bold); color: var(--navy-700); } .h-statement h2 > span { display: block; } .h-statement .h-st-2 { font-weight: var(--weight-semibold); color: #34496E; } .h-statement .h-st-3 { color: #B8342A; } /* reuse the site-wide draw-in strike (homepage.css + [data-reveal]) */ .h-statement .strike { color: #5E6B85; } .h-statement .strike::after { height: 4px; background: var(--coral-cta); } /* ---------------------------------------------------------------- industries */ .h-industries { background: var(--bg); padding-top: var(--h-pad); padding-bottom: clamp(64px, 7vw, 96px); } .h-industries .h-title { font-size: clamp(32px, 3.6vw, 48px); } .h-ind-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .h-ind { min-height: 250px; padding: 28px; border-radius: 22px; background: #FFFFFF; border: 1px solid var(--ink-150); display: flex; flex-direction: column; } .h-ind-icon { width: 48px; height: 48px; border-radius: 14px; flex: none; background: var(--coral-50); color: var(--coral-press); display: flex; align-items: center; justify-content: center; } .h-ind h3 { margin: 24px 0 0; font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; font-weight: var(--weight-semibold); color: var(--navy-700); } .h-ind p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-600); } /* ---------------------------------------------------------------- security */ .h-security { background: #FFFFFF; padding-top: var(--h-pad); padding-bottom: var(--h-pad); } .h-security-grid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 72px; align-items: start; } .h-security .h-lede { margin-top: 20px; font-size: 19px; } .h-sec-list { display: flex; flex-direction: column; gap: 14px; } .h-sec { padding: 26px 32px; border-radius: 22px; background: var(--ink-50); border: 1px solid var(--ink-150); } .h-sec-head { display: flex; align-items: baseline; gap: 16px; } .h-sec-num { font-family: var(--font-mono); font-size: 20px; line-height: 1; font-weight: var(--weight-semibold); color: var(--coral-press); } .h-sec h3 { margin: 0; font-size: 22px; line-height: 1.3; letter-spacing: -0.02em; font-weight: var(--weight-semibold); color: var(--navy-700); } .h-sec p { margin: 8px 0 0; font-size: var(--text-base); line-height: 1.6; color: var(--ink-600); } /* ---------------------------------------------------------------- 2-day POC */ .h-poc { display: grid; grid-template-columns: 1.05fr 0.95fr; background: #FFFFFF; } /* outer padding tracks .wrap's content edge (max 1600px, 40px gutter) */ .h-poc-pitch { position: relative; overflow: hidden; background: var(--coral-cta); padding: 96px 72px 96px max(40px, calc((100vw - 1600px) / 2 + 40px)); display: flex; flex-direction: column; justify-content: center; } .h-poc-pulse { position: absolute; left: 0; bottom: 36px; width: 760px; height: 60px; opacity: 0.3; } .h-poc-pitch-inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; } .h-poc h2 { margin: 20px 0 0; font-size: clamp(34px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -0.035em; font-weight: var(--weight-bold); color: #FFFFFF; } .h-poc-pitch p { margin: 20px 0 0; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, 0.92); } .h-poc-pitch .h-btn { margin-top: 32px; min-height: 54px; padding: 0 26px; } .h-poc-steps { padding: 72px max(40px, calc((100vw - 1600px) / 2 + 40px)) 72px 72px; display: flex; flex-direction: column; justify-content: center; } .h-tl { margin: 24px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; } .h-tl-item { display: flex; gap: 20px; } .h-tl-rail { display: flex; flex-direction: column; align-items: center; flex: none; width: 40px; } .h-tl-dot { width: 40px; height: 40px; border-radius: var(--radius-pill); flex: none; border: 2px solid var(--coral-500); background: var(--coral-500); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; font-weight: var(--weight-semibold); transition: transform 450ms cubic-bezier(.34, 1.56, .64, 1), background 300ms ease, color 300ms ease; } .h-tl-line { width: 2px; flex-grow: 1; margin-top: 6px; background: var(--coral-500); transform-origin: top; transition: transform 650ms ease-out; } .h-tl-body { display: flex; flex-direction: column; padding-bottom: 20px; transition: opacity 500ms ease, transform 550ms cubic-bezier(.2, .8, .2, 1); } .h-tl-item:last-child .h-tl-body { padding-bottom: 0; } .h-tl-when { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-medium); letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral-press); line-height: 1.4; } .h-tl-what { margin-top: 2px; font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: -0.01em; color: var(--navy-700); } .h-tl-body p { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-600); } /* timeline animation states (home.js toggles .is-on / .is-linked) */ .js .h-tl-item:not(.is-on) .h-tl-dot { transform: scale(0.55); background: var(--coral-50); color: var(--coral-press); } .js .h-tl-item:not(.is-on) .h-tl-body { opacity: 0; transform: translateY(18px); } .js .h-tl-item:not(.is-linked) .h-tl-line { transform: scaleY(0); } .h-guarantee { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--ink-150); display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: var(--weight-semibold); color: var(--navy-700); } .h-guarantee-icon { width: 36px; height: 36px; border-radius: var(--radius-pill); flex: none; background: var(--green-50); color: var(--h-green); display: flex; align-items: center; justify-content: center; } /* ---------------------------------------------------------------- motion */ @media (prefers-reduced-motion: reduce) { .js .h-problem, .js .h-case, .h-tl-dot, .h-tl-line, .h-tl-body, .h-dot span, .h-case-tab, .h-tab-name { transition: none; } .js .h-problem, .js .h-case { transform: none; } } /* ================================================================ responsive */ @media (max-width: 1100px) { .h-services-grid { grid-template-columns: 1fr; max-width: 640px; } .h-svc h3, .h-svc-desc { min-height: 0; } .h-ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .h-security-grid { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 900px) { .h-hero-grid { grid-template-columns: 1fr; gap: 16px; } .h-hero .cube-scene { min-height: 0; } .h-gap-grid { grid-template-columns: 1fr; } .h-case-grid { grid-template-columns: 1fr; gap: 40px; } .js .h-case { padding-top: 112px; padding-bottom: 164px; } .h-cases-ui-inner { padding-top: 64px; padding-bottom: 40px; } .h-poc { grid-template-columns: 1fr; } .h-poc-pitch { padding: 72px 40px 104px; } .h-poc-steps { padding: 64px 40px; } } @media (max-width: 768px) { /* homepage.css drops .wrap to a 20px gutter here; keep the POC halves in step */ .h-poc-pitch { padding: 64px 20px 96px; } .h-poc-steps { padding: 56px 20px; } .h-hero-sub { font-size: 17px; } .h-gap-chart { padding: 16px; } .h-problem { padding: 24px; } .h-problem h3 { font-size: 22px; } .h-problem p, .h-case-copy p { font-size: var(--text-base); } .h-gap-close { font-size: 17px; } .h-svc { padding: 28px 24px; border-radius: 22px; } .h-svc h3 { font-size: 24px; } .h-stat-num { font-size: 28px; } .h-case-quote { padding: 24px; } .h-case-quote blockquote { font-size: 17px; } .h-bars { padding: 22px; } .h-case-tabs { gap: 12px; } .h-tab-name { font-size: 13px; } .h-tab-ind { font-size: 12px; } .h-statement { min-height: 0; padding-top: 72px; padding-bottom: 72px; } .h-sec { padding: 22px 22px; } .h-sec h3 { font-size: 19px; } .h-sec-num { font-size: 17px; } } @media (max-width: 640px) { .h-ind-grid { grid-template-columns: 1fr; } .h-ind { min-height: 0; } .h-case-stats { gap: 12px; } .h-stat-num { font-size: 24px; } .h-hero-ctas .h-btn { flex: 1 1 100%; } } /* ================================================================ full-screen bands On laptop/desktop widths every homepage band is at least one screen tall (the viewport minus the sticky nav), with its content centered vertically, so each section reads as its own page. Bands with more content than one screen simply grow. Phones keep natural heights: padding a short band out to a full phone screen just leaves empty space. */ :root { --h-nav: 85px; /* .nav height (52px logo + 2x16px padding + border) */ --h-screen: calc(100vh - var(--h-nav)); } @supports (height: 100svh) { :root { --h-screen: calc(100svh - var(--h-nav)); } } @media (min-width: 901px) { .h-hero, .h-gap, .h-services, .h-statement, .h-industries, .h-security { min-height: var(--h-screen); display: flex; flex-direction: column; justify-content: center; } /* a flex item with margin:auto shrinks to its content; keep .wrap full width */ .h-hero > .wrap, .h-gap > .wrap, .h-services > .wrap, .h-industries > .wrap, .h-security > .wrap { width: 100%; } .h-cases, .h-poc { min-height: var(--h-screen); } .js .h-case { min-height: var(--h-screen); display: flex; flex-direction: column; justify-content: center; } .js .h-case > .wrap { width: 100%; } } /* ================================================================ tablet + phone polish <=1024px only; the desktop homepage is untouched. */ @media (max-width: 1024px) { .h-hero h1, .h-gap-title, .h-title, .h-case h2, .h-poc h2, .h-statement h2 > span { text-wrap: balance; } .h-services-grid { max-width: none; } } @media (min-width: 641px) and (max-width: 1024px) { /* odd card count in a 2-column grid: let the last card span the row */ .h-ind-grid > .h-ind:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; } } @media (max-width: 768px) { /* the cube is scaled to 0.8 on phones but keeps its full layout box; reclaim the dead space */ .h-hero .cube-scene { margin-bottom: -64px; } } @media (max-width: 600px) { /* Gap chart is drawn at 540 units and shown ~316px wide: larger labels, and "THE GAP" drops lower inside the wedge so it no longer runs into the white line's label */ .gc-label { font-size: 18px; } .gc-mono { font-size: 15px; } .gc-mono--gap { font-size: 15px; transform: translate(-20px, 80px); } .h-svc .h-btn { padding: 0 14px; gap: 8px; font-size: 14px; letter-spacing: 0; } }