/* ========================================================================= CoreWeave — landing page Figma: CW / node 31:386 (1440 × 9587) Every value below comes off the Figma frame. Where the design gives one number at 1440, the CSS gives a clamp() whose upper bound is that number, so the page is identical at 1440 and degrades proportionally below it. ========================================================================= */ /* ---------------------------------------------------------------- tokens -- */ :root { /* palette */ --ink: #030616; --blue: #1e3fdf; --pale: #d8ffff; --navy: #060d2d; --black: #000000; --white: #ffffff; --ink-40: rgba(3, 6, 22, .4); --ink-30: rgba(3, 6, 22, .3); --ink-50: rgba(3, 6, 22, .5); --rule: rgba(0, 0, 0, .4); --rule-light: rgba(255, 255, 255, .2); --rule-dot: rgba(255, 255, 255, .4); /* type families — both are the real design fonts; the Google faces are the fallback for machines that don't have them licensed/installed */ --sans: "Rig Sans", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "Novel Mono Pro Cnd", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* fluid scale — upper bound == the Figma value at 1440 */ --fs-hero: clamp(44px, 8.334vw, 120px); /* 120 */ --fs-h1: clamp(30px, 3.334vw, 48px); /* 48 */ --fs-h2: clamp(27px, 2.917vw, 42px); /* 42 */ --fs-h3: clamp(27px, 2.778vw, 40px); /* 40 */ --fs-quote: clamp(28px, 3.611vw, 52px); /* 52 */ --fs-mono-xl: clamp(26px, 2.917vw, 42px); /* 42 */ --fs-nav-lg: clamp(22px, 2.223vw, 32px); /* 32 */ --fs-ten: clamp(120px, 21.53vw, 310px); /* 310 */ --fs-lede: clamp(17px, 1.389vw, 20px); /* 20 */ --fs-body-m: clamp(16px, 1.25vw, 18px); /* 18 */ --fs-body-s: 14px; --fs-mono-m: 16px; --fs-label: 12px; --fs-nav: 14px; /* spacing — 40 is the page gutter at 1440 */ --gutter: clamp(20px, 2.778vw, 40px); /* 40 */ --pad-48: clamp(24px, 3.334vw, 48px); /* 48 */ --pad-80: clamp(28px, 5.556vw, 80px); /* 80 */ --band: clamp(56px, 8.334vw, 120px); /* 120 */ --nav-h: 108px; } /* ------------------------------------------------------------------ base -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--sans); font-weight: 500; font-size: var(--fs-body-s); line-height: 1.43; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3, p, blockquote, figure { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } address { font-style: normal; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } /* ------------------------------------------------- smooth scroll plumbing -- */ /* When JS enables inertial scrolling the content is translated inside a fixed viewport and is padded out to the real document height. Without JS (or with reduced motion / touch) everything stays in normal flow. */ html.is-smooth #smooth-wrapper { position: fixed; inset: 0; overflow: hidden; will-change: transform; } html.is-smooth #smooth-content { will-change: transform; } html:not(.is-smooth) { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html:not(.is-smooth) { scroll-behavior: auto; } } /* ------------------------------------------------------- reveal-on-scroll -- */ [data-reveal] { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); } [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } /* --------------------------------------------------------- text-box trim -- Figma measures these text nodes cap-to-baseline (`text-box-trim: trim-both`, `text-box-edge: cap alphabetic`), which is why a 48px heading is 34px tall in the frame. Chrome/Safari implement it; browsers that don't just render a few px of extra leading. Every block height on this page derives from it. */ .eyebrow, .h1, .lede, .hero__title, .hero__lede, .why__title, .why__item h3, .why__item p, .ten__title, .ten__num, .tile__title, .tile__foot p, .eco__name, .eco__desc, .cases__title, .case__q, .case__quote cite, .case__headline, .case__body p, .split__title, .btn { text-box: trim-both cap alphabetic; } /* ============================================================== primitives = */ /* eyebrow — diamond + 12px condensed mono, uppercase */ .eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 600; font-size: var(--fs-label); line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); } .eyebrow img { flex: none; width: 12px; height: 12px; } .eyebrow--light { color: var(--white); } /* headings shared across sections */ .h1 { font-weight: 600; font-size: var(--fs-h1); line-height: 1.042; /* 50 / 48 */ letter-spacing: -.005em; } .lede { font-weight: 500; font-size: var(--fs-lede); line-height: 1.4; /* 28 / 20 */ max-width: 583px; } /* buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-label); line-height: 1.4; white-space: nowrap; transition: background-color .25s ease, color .25s ease, border-color .25s ease; } .btn--solid { flex: 1 0 0; min-width: 0; height: 40px; padding: 16px 20px; background: var(--ink); color: var(--white); } .btn--solid:hover { background: var(--blue); } .btn--ghost { flex: 1 0 0; min-width: 0; height: 40px; padding: 16px 20px; border: 1px solid var(--ink-40); color: var(--ink); } .btn--ghost:hover { border-color: var(--ink); background: rgba(3, 6, 22, .04); } /* inline-block, not flex — text-box trim only applies to a real text box, and the trim is what makes this button 32px tall like the Figma node */ .btn--outline { display: inline-block; padding: 12px 14px; /* inset shadow rather than a border: Figma strokes don't grow the box */ box-shadow: inset 0 0 0 1px var(--ink-30); border-radius: 2px; text-align: center; color: var(--ink); } /* the outline darkens on hover; no fill */ .eco__row:hover .btn--outline, .case:hover .btn--outline { box-shadow: inset 0 0 0 1px var(--ink); } /* pill (Log In) */ .pill { display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 100px; background: var(--ink); color: var(--white); font-weight: 500; font-size: var(--fs-nav); line-height: 1; transition: background-color .25s ease; } .pill:hover { background: var(--blue); } /* 32px circled arrow. The ring is a pseudo-element so it can grow out of its own centre on hover while the glyph — and the control's position — hold still; the SVG carries the arrow only. */ .arrow { position: relative; display: block; flex: none; width: 32px; height: 32px; --ring: var(--ink-30); } .arrow::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--ring); border-radius: 50%; transform-origin: 50% 50%; transition: transform .4s cubic-bezier(.22, 1, .36, 1), border-color .4s ease; } .arrow:hover::before, .arrow:focus-visible::before { transform: scale(1.28); } .arrow img { position: relative; width: 100%; height: 100%; } .arrow--light { --ring: rgba(255, 255, 255, .3); } /* the 120px spacer bands that separate the Figma sections */ .band { height: var(--band); } .band--white { background: var(--white); } .band--navy { background: var(--navy); } /* ==================================================================== nav = */ .nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; padding: 24px; transition: transform .4s cubic-bezier(.22, 1, .36, 1); } .nav.is-hidden { transform: translateY(calc(-100% - 8px)); } .nav__bar { display: flex; align-items: center; justify-content: space-between; background: var(--white); border-radius: 2px; overflow: clip; } .nav__left { display: flex; flex: 1 0 0; min-width: 0; align-items: center; gap: 24px; padding: 12px 16px 12px 8px; } .nav__right { display: flex; flex: 1 0 0; min-width: 0; height: 60px; align-items: center; justify-content: flex-end; padding: 20px 8px; } .nav__logo { display: flex; align-items: center; padding: 0 12px; } .nav__logo-box { position: relative; display: block; width: 150px; height: 20px; } .nav__logo-box img { position: absolute; } /* insets straight off the Figma node (31:396) */ .nav__logo-a { inset: .47% 76.93% 2.17% 0; width: auto; height: auto; } .nav__logo-b { inset: 0 86.97% 42.37% 9.04%; } .nav__logo-c { inset: 16.29% 0 0 25.98%; } .nav__logo-box img { width: auto; height: auto; } .nav__logo-a, .nav__logo-b, .nav__logo-c { width: auto; height: auto; } .nav__links { display: flex; align-items: center; gap: 4px; } .nav__links a { display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 12px; border-radius: 6px; font-weight: 500; font-size: var(--fs-nav); line-height: 1; transition: background-color .2s ease; } .nav__links a:hover { background: rgba(3, 6, 22, .06); } .nav__search { display: flex; align-items: center; padding: 0 12px; } .nav__search img { width: 16px; height: 16px; } .nav__cta { padding: 0 12px; } .nav__burger { display: none; width: 36px; height: 36px; margin-left: 4px; } .nav__burger span { display: block; width: 18px; height: 1.5px; margin: 4px auto; background: var(--ink); transition: transform .3s ease, opacity .3s ease; } .nav__burger[aria-expanded="true"] span:first-child { transform: translateY(2.75px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-2.75px) rotate(-45deg); } .nav__panel { display: flex; flex-direction: column; margin-top: 4px; padding: 8px; background: var(--white); border-radius: 2px; } .nav__panel a { padding: 12px; font-weight: 500; font-size: var(--fs-nav); } .nav__panel[hidden] { display: none; } /* =================================================================== hero = */ /* the hero fills one screen; 860 — the frame's height — is its floor */ .hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: clip; background: var(--ink); isolation: isolate; } .hero__bg { position: absolute; inset: 0; z-index: -1; } .hero__grid { position: absolute; inset: 0; opacity: .1; background-image: url("assets/grid.png"); background-size: 96px 96.6px; background-position: top left; } .hero__photo { position: absolute; inset: 0; overflow: hidden; } /* The photo is placed mirrored in Figma — hence scaleX(-1). Width and offset are both driven by the hero's width so the crop stays identical at every viewport; a % translateY resolves against the image's own height. */ .hero__photo img { position: absolute; left: -.76%; top: 0; width: 111.13%; height: auto; max-width: none; transform: translateY(-10.94%) scaleX(-1); } /* the nav strip carries a second pass of the grid on top of the photo */ .hero__topgrid { position: absolute; inset: 0 0 auto 0; height: var(--nav-h); opacity: .1; background-image: url("assets/grid.png"); background-size: 96px 96.6px; background-position: top left; pointer-events: none; } .hero__inner { position: absolute; left: 44px; right: 36px; top: calc(50% - 59px); transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-start; gap: 48px; } .hero__title { font-weight: 600; font-size: var(--fs-hero); line-height: .942; /* 113 / 120 */ letter-spacing: -.03em; color: var(--ink); } .hero__lede { max-width: 583px; font-weight: 500; font-size: var(--fs-lede); line-height: 1.4; color: var(--ink); } .hero__actions { display: flex; align-items: center; gap: 16px; width: 340px; max-width: 100%; } /* ============================================================ why coreweave = */ .why { display: grid; grid-template-columns: 1fr 1fr; min-height: 760px; background: var(--pale); } .why__left { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; padding: var(--gutter); } .why__title { max-width: 587px; font-weight: 600; font-size: var(--fs-h2); line-height: 1.191; /* 50 / 42 */ letter-spacing: -.005em; } .why__right { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--pad-80); background: var(--blue); } .why__list { display: flex; flex-direction: column; gap: 64px; width: 100%; } /* full width of the column — flush with the rules above and below */ .why__item { display: flex; flex-direction: column; gap: 32px; width: 100%; } .why__item h3 { font-weight: 600; font-size: var(--fs-h2); line-height: 1; color: var(--white); } .why__item p { font-weight: 500; font-size: var(--fs-body-s); line-height: 1.43; color: var(--white); } .why__list hr { width: 100%; height: 0; margin: 0; border: 0; border-top: 1px solid var(--white); } /* ================================================================== ten = */ .ten { display: grid; grid-template-columns: 1fr 1fr; min-height: 760px; background: var(--pale); } .ten__left { position: relative; overflow: hidden; background: var(--blue); min-height: 380px; } .ten__num { position: absolute; display: block; font-size: var(--fs-ten); line-height: .365; /* 113 / 310 */ letter-spacing: -.03em; color: var(--white); white-space: nowrap; } .ten__num--solid { font-weight: 500; left: 9.72%; top: 11.18%; } .ten__num--ghost { font-weight: 100; left: 2.92%; top: 59.87%; width: 88.9%; text-align: right; opacity: .2; } .ten__line { position: absolute; left: 50%; top: 50%; width: 80.53%; /* 579.828 / 720 */ height: 5px; max-width: none; transform: translate(-50%, -50%) rotate(141.77deg); transform-origin: center; } .ten__right { display: flex; flex-direction: column; padding: var(--gutter) var(--gutter) 34px; } .ten__head { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; } .ten__title { max-width: 389px; font-weight: 600; font-size: var(--fs-h2); line-height: 1.191; letter-spacing: -.005em; } .ten__wall { width: 100%; max-width: 643px; height: auto; margin-top: auto; padding-top: 40px; } /* ============================================================ 3-up call-out = */ .cta3 { display: flex; flex-direction: column; gap: var(--band); padding-top: var(--gutter); background: var(--white); } .cta3__head { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; padding: 0 var(--gutter); } .cta3__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } .tile { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; gap: var(--pad-48); min-height: 470px; padding: var(--pad-48); background: var(--blue); } .cta3__row .tile + .tile { border-left: 1px solid var(--white); } .tile__title { font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; /* 48 / 40 */ color: var(--white); } .tile__foot { display: flex; flex-direction: column; gap: 24px; } .tile__foot p { font-weight: 500; font-size: var(--fs-body-s); line-height: 1.43; color: var(--white); } /* ============================================================== ecosystem = */ .eco { display: flex; flex-direction: column; gap: var(--band); padding-top: var(--gutter); background: var(--white); } .eco__head { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; padding: 0 var(--gutter); } .eco__title { max-width: 647px; } .eco__rows { display: flex; flex-direction: column; } .eco__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 72px var(--gutter); box-shadow: inset 0 1px 0 var(--rule); transition: background-color .3s ease; } .eco__rows .eco__row:last-child { box-shadow: inset 0 1px 0 var(--rule), inset 0 -1px 0 var(--rule); } .eco__row:hover { background: var(--pale); } .eco__name { flex: none; width: 220px; font-family: var(--mono); font-weight: 500; font-size: var(--fs-mono-xl); line-height: 1.191; } .eco__desc { flex: 1 1 880px; max-width: 880px; font-family: var(--mono); font-weight: 600; font-size: var(--fs-mono-m); line-height: 1.25; } .eco__row .btn--outline { flex: none; width: 102px; } /* =========================================================== case studies = */ .cases { display: flex; flex-direction: column; gap: 80px; padding: var(--gutter); background: var(--navy); overflow: clip; } .cases__head { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; } .cases__title { color: var(--white); } .carousel { position: relative; display: flex; flex-direction: column; gap: 32px; } .carousel__viewport { overflow: visible; } .carousel__track { display: flex; gap: 80px; will-change: transform; transition: transform .7s cubic-bezier(.22, 1, .36, 1); } .carousel.is-dragging .carousel__track { transition: none; } .case { flex: none; width: var(--case-w, 1120px); display: flex; flex-direction: column; gap: 60px; padding: var(--pad-80) 0; background: var(--white); box-shadow: inset 0 0 0 1px var(--ink-50); overflow: clip; transition: opacity .7s cubic-bezier(.22, 1, .36, 1); } .case[aria-hidden="true"] { opacity: .3; } .case__top { display: flex; align-items: flex-start; } .case__media { flex: none; width: 46.43%; } /* 520 / 1120 */ .case__media img { width: 100%; height: 614px; object-fit: cover; } .case__quote { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: clamp(40px, 10.15vw, 146px); padding: 0 var(--pad-80); } .case__mark { width: 49px; height: 35px; margin: 0 auto; } .case__quote blockquote { display: flex; flex-direction: column; gap: 40px; margin: 0; } .case__q { font-weight: 600; font-size: var(--fs-quote); line-height: 1.077; /* 56 / 52 */ letter-spacing: -.03em; } .case__quote cite { font-style: normal; font-weight: 500; font-size: var(--fs-body-m); line-height: 1.15; } .case__bottom { display: flex; align-items: flex-start; gap: 80px; padding-right: var(--pad-80); } .case__headline { flex: none; width: 46.43%; padding-left: 67px; font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.003em; } .case__body { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; max-width: 440px; } .case__body p { font-weight: 500; font-size: var(--fs-body-m); line-height: 1.445; /* 26 / 18 */ letter-spacing: -.01em; } .carousel__next { position: absolute; top: 486px; left: min(1163px, calc(100% - 60px)); z-index: 3; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 100px; background: var(--white); border: 1px solid var(--rule-dot); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transition: transform .3s ease; } .carousel__next:hover { transform: scale(1.06); } .carousel__next img { width: 12px; height: 22px; } .carousel__dots { display: flex; gap: 8px; } .carousel__dots button { width: 16px; height: 16px; border-radius: 30px; border: 1px solid var(--rule-dot); transition: background-color .3s ease, border-color .3s ease; } .carousel__dots button[aria-selected="true"] { background: var(--white); border-color: var(--white); } /* ================================================================ 50 / 50 = */ /* a hard 50/50 split at every width — the media never eats into the copy */ .split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--blue); } .split__media { min-height: 760px; background: var(--black); } .split__media img { width: 100%; height: 100%; min-height: 760px; object-fit: cover; } .split__text { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 40px; padding: var(--gutter); } .split__title { font-weight: 600; font-size: var(--fs-h2); line-height: 1.191; letter-spacing: -.005em; color: var(--white); } /* ============================================================== final cta = */ .final { background: var(--white); padding-top: var(--gutter); } .final__head { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; padding: 0 var(--gutter); margin-bottom: clamp(64px, 10.56vw, 152px); } /* exact halves — the tall card and the stacked pair each take 50% */ .final__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } /* unlike the 3-up row, these cards stack from the top with a 48px gap */ .final__grid .tile { justify-content: flex-start; } .final__grid > .tile--tall { min-height: 692px; border-right: 1px solid var(--white); } .final__stack { display: flex; min-width: 0; flex-direction: column; } .final__stack .tile { min-height: 346px; } .final__stack .tile + .tile { border-top: 1px solid var(--white); } /* ================================================================= footer = */ .footer { padding: 70px 24px 31px; background: var(--black); color: var(--white); } /* exact halves — the link column starts at 50% at every width, as in the frame */ .footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .footer__logo { width: 109px; margin-top: 16px; } .footer__logo img { width: 100%; height: auto; } .footer__nav { display: flex; flex-direction: column; } .footer__nav a { display: flex; align-items: center; padding: 16px 0; box-shadow: inset 0 -1px 0 var(--rule-light); font-weight: 700; font-size: var(--fs-nav-lg); line-height: 1.1875; /* 38 / 32 → 70px rows */ letter-spacing: -.02em; transition: color .25s ease, padding-left .25s ease; } .footer__nav a:hover { color: var(--pale); padding-left: 8px; } .footer__mid { display: grid; grid-template-columns: 50% 25.72% auto; /* 696 / 358 / rest of 1392 */ gap: 0; margin-top: 71px; font-weight: 400; font-size: var(--fs-mono-m); line-height: 1.4; } .footer__list li a { transition: opacity .25s ease; } .footer__list li a:hover { opacity: .65; } .footer__legal { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 68px; padding-top: 11px; border-top: 1px solid var(--rule-light); font-weight: 500; font-size: var(--fs-label); line-height: 1.4; text-transform: uppercase; } /* ========================================================================= */ /* responsive */ /* ========================================================================= */ /* the carousel arrow sits inside the card at 1440; keep it on the seam below */ @media (max-width: 1439px) { .carousel__next { left: auto; right: 4px; top: 40%; } } /* ---- 1180px: nav collapses, ecosystem rows tighten -------------------- */ @media (max-width: 1180px) { .nav__links, .nav__search { display: none; } .nav__burger { display: block; } .nav__left { padding: 12px 8px; } .nav__right { height: auto; padding: 12px 8px; } .eco__row { flex-wrap: wrap; padding: 48px var(--gutter); } .eco__name { width: 100%; } .eco__desc { flex: 1 1 auto; } .case__quote { gap: 48px; } .case__headline { padding-left: var(--pad-80); } } /* ---- 1024px: two-column sections stack ------------------------------- */ @media (max-width: 1024px) { /* The 1440 crop puts the pale part of the photo behind the headline. A portrait viewport can't hold that framing, so below 1024 the photo covers and a scrim in the same pale keeps the type readable over it. */ .hero { height: auto; min-height: 100svh; } .hero__photo img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 8%; transform: scaleX(-1); } .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(216, 255, 255, .95) 0%, rgba(216, 255, 255, .88) 42%, rgba(216, 255, 255, .40) 72%, rgba(216, 255, 255, 0) 100%); } .hero__inner { position: static; transform: none; padding: 168px var(--gutter) 120px; } .why, .ten { grid-template-columns: 1fr; min-height: 0; } .why__right { padding: var(--pad-80) var(--gutter); } .ten__left { min-height: 420px; } .ten__right { padding-bottom: var(--gutter); } .ten__wall { margin-top: 40px; } .split { grid-template-columns: 1fr; } .split--b .split__media { grid-row: 1; } .split__media { min-height: 0; } .split__media img { min-height: 0; height: auto; } .case__top { flex-direction: column; } .case__media { width: 100%; } .case__media img { height: auto; aspect-ratio: 520 / 614; } .case__quote { padding: var(--pad-80) var(--pad-80) 0; width: 100%; } .case__mark { margin: 0; } .case__bottom { flex-direction: column; gap: 32px; padding: 0 var(--pad-80); } .case__headline { width: 100%; padding-left: 0; } .case__body { max-width: none; } .footer__top { grid-template-columns: 1fr; gap: 40px; } .footer__mid { grid-template-columns: 1fr 1fr; margin-top: 48px; } } /* ---- 840px: 3-up grids stack ----------------------------------------- */ @media (max-width: 840px) { .cta3__row { grid-template-columns: 1fr; } .cta3__row .tile + .tile { border-left: 0; border-top: 1px solid var(--white); } .tile { min-height: 0; } .tile__foot { margin-top: 48px; } .final__grid { grid-template-columns: 1fr; } .final__grid > .tile--tall { min-height: 0; border-right: 0; border-bottom: 1px solid var(--white); } .final__stack .tile { min-height: 0; } } /* ---- 640px: phone ----------------------------------------------------- */ @media (max-width: 640px) { .hero__inner { gap: 32px; padding: 140px var(--gutter) 88px; } .hero__actions { width: 100%; } .why__left, .ten__right, .cta3__head, .eco__head, .cases__head, .final__head { gap: 28px; } .cases { gap: 48px; } .carousel__track { gap: 24px; } .case { padding: var(--pad-80) 0 40px; } .case__quote { padding: 32px 24px 0; gap: 32px; } .case__bottom { padding: 0 24px; } .carousel__next { width: 44px; height: 44px; top: 32%; } .footer { padding: 48px 20px 32px; } .footer__mid { grid-template-columns: 1fr; gap: 28px; } .footer__legal { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 40px; } }