/* ═══════════════════════════════════════════════════════════════════ labs.css — shared stylesheet for every /labs/* page ───────────────────────────────────────────────────────────────────── Scoped under the .labs-page wrapper so nothing leaks to other pages. How to use: - Add class="labs-page" to - Include partials/lab-hero.ejs at the top (uses .home-new wrapper for the hero itself so it inherits the homepage hero exactly) - Use .lb-section-* wrappers + .lb-inner for content sections One change here changes every lab page. ═══════════════════════════════════════════════════════════════════ */ /* Breadcrumb treatment moved to public/css/breadcrumb.css. */ /* Tighten the vertical rhythm inside the hero copy: less gap under the headline, and less gap under the lede before the CTA stack. */ .labs-page-hero .hn-headline { margin-bottom: 14px; } .labs-page-hero .hn-lede { margin-bottom: 18px; } /* On phones the labs hero has space under the CTA stack; move the buttons lower into that empty zone. Homepage keeps its 50px lift. */ @media (max-width: 720px) { .labs-page-hero .hn-cta-col { margin-bottom: 16px !important; } /* Homepage dims the bottom of the card with a 58% navy overlay so the buttons read against the artwork — but on labs it also dulls the score ring. Lighten the bottom stops so the ring stays crisp. */ .labs-page-hero .hn-card-fade { background: linear-gradient(180deg, rgba(18,28,58,0.90) 0%, rgba(18,28,58,0.82) 30%, rgba(18,28,58,0.16) 46%, rgba(18,28,58,0.05) 68%, rgba(18,28,58,0.10) 100%) !important; } } /* ── Impact bento icons + title sizing (matches case-studies) ──── */ .labs-page .lb-bento-icon { color: inherit; margin-bottom: 18px; line-height: 0; position: relative; z-index: 1; } .labs-page .lb-bento-icon svg { display: block; color: #ffffff; } .labs-page .home-new .hn-bento-0 .lb-bento-icon svg { color: var(--navy, #1a2857); } /* Decorative corner ring was removed sitewide — kept as a hidden hook so existing markup doesn't need surgery. */ .labs-page .lb-bento-ring { display: none !important; } /* Match the case-studies title font size (22px) on the impact bento cards, overriding the homepage's larger clamp. */ .labs-page .home-new .hn-bento-name { font-size: 22px !important; line-height: 1.2 !important; } /* Hold the 3-column desktop bento at iPad widths — the case-studies impact grid holds its 3-column layout down to 900px, and this bento matches. Overrides the homepage's own 1100px collapse rule (which flips to 2-col too early for tablet users). */ @media (max-width: 1100px) and (min-width: 901px) { .labs-page .home-new .hn-bento { grid-template-columns: 1.15fr 0.95fr 1.05fr !important; grid-template-rows: 300px 300px !important; } .labs-page .home-new .hn-bento-0 { grid-column: 1 / 3 !important; grid-row: 1 !important; } .labs-page .home-new .hn-bento-1 { grid-column: 3 !important; grid-row: 1 / 3 !important; } .labs-page .home-new .hn-bento-2 { grid-column: 1 !important; grid-row: 2 !important; } .labs-page .home-new .hn-bento-3 { grid-column: 2 !important; grid-row: 2 !important; } } /* ── "Where voice AI works" — matches case-studies' "What It Connects" (.ecosystem-section + .eco-card). Navy→white gradient ground with solid brand-cycle bento cards; the first card flips white as the lead tile. Same rules the case-study page uses, ported here so they apply without the body:has(.svc-hero-wrap) gate. */ .labs-page .ecosystem-section { background: linear-gradient(180deg, #1a2857 0%, #16214a 12%, #121c3a 30%, #eef1f6 58%, #ffffff 100%) !important; padding: 80px 72px 100px !important; } .labs-page .ecosystem-section > div:not(.eco-grid) { max-width: 1200px !important; margin: 0 auto !important; padding: 0 !important; } .labs-page .ecosystem-section .sec-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7) !important; margin-bottom: 14px; } .labs-page .ecosystem-section .sec-eyebrow::before { content: ''; display: block; width: 28px; height: 2px; background: currentColor; } .labs-page .ecosystem-section .sec-title, .labs-page .ecosystem-section h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(28px, 3.5vw, 42px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: #ffffff !important; margin: 0 0 16px; } .labs-page .ecosystem-section > div > p { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,0.7) !important; max-width: 780px; margin: 0; } /* Grid: 3-col brand-cycle bento with 20px gutter. */ .labs-page .ecosystem-section .eco-grid { max-width: 1200px !important; margin: 32px auto 0 !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; } /* Cards — flat brand colour + top-left dark bloom, 18px rounded corners, content anchored to the bottom. */ .labs-page .ecosystem-section .eco-card { border-radius: 18px !important; border: 0 !important; padding: 24px 22px !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; overflow: hidden; position: relative; min-height: 200px; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; } .labs-page .ecosystem-section .eco-card:nth-child(5n+1) { background-color: var(--lb-teal) !important; } .labs-page .ecosystem-section .eco-card:nth-child(5n+2) { background-color: var(--lb-orange) !important; } .labs-page .ecosystem-section .eco-card:nth-child(5n+3) { background-color: var(--lb-green) !important; } .labs-page .ecosystem-section .eco-card:nth-child(5n+4) { background-color: var(--lb-blue) !important; } .labs-page .ecosystem-section .eco-card:nth-child(5n+5) { background-color: var(--lb-navy) !important; } .labs-page .ecosystem-section .eco-card, .labs-page .ecosystem-section .eco-card * { color: #ffffff !important; } /* Card 0 flips to white as the lead tile — same treatment case-studies use. */ .labs-page .ecosystem-section .eco-card:first-child { background-color: #ffffff !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.18), transparent 55%) !important; } .labs-page .ecosystem-section .eco-card:first-child, .labs-page .ecosystem-section .eco-card:first-child * { color: var(--lb-navy) !important; } .labs-page .ecosystem-section .eco-name { font-size: 18px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.01em !important; margin: 0 0 8px !important; color: #ffffff !important; } .labs-page .ecosystem-section .eco-desc { font-size: 14.5px !important; line-height: 1.6 !important; color: rgba(255,255,255,0.88) !important; margin: 0 !important; } .labs-page .ecosystem-section .eco-card:first-child .eco-name { color: var(--lb-navy) !important; } .labs-page .ecosystem-section .eco-card:first-child .eco-desc { color: rgba(26,40,87,0.72) !important; } /* CTA sits inline with the header copy on the navy ground. Explicit layout + svg size because the `.home-new .hn-work-btn` rules don't reach this section (it's outside the .home-new wrapper). */ .labs-page .ecosystem-section .eco-lead-cta { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; padding: 0 0 6px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.86) !important; text-decoration: none; } .labs-page .ecosystem-section .eco-lead-cta svg { width: 17px !important; height: 17px !important; flex: 0 0 auto; transition: transform 0.2s ease; } .labs-page .ecosystem-section .eco-lead-cta:hover svg { transform: translateX(4px); } /* Kill the decorative pulse circle on labs pages — the gradient carries the section without needing an animated ring. */ .labs-page .ecosystem-section::before { display: none !important; } @media (max-width: 900px) { .labs-page .ecosystem-section { padding: 60px 24px 80px !important; } .labs-page .ecosystem-section .eco-grid { grid-template-columns: 1fr !important; } } /* Mobile override for the "Where voice AI works" bento — entexis.css at 768px converts .eco-grid into a horizontal scroll strip with 75vw cards, which visually adds extra space on the right. Force the labs bento back to a plain vertical stack so both edges hit the same 24px section padding. */ @media (max-width: 768px) { .labs-page .ecosystem-section .eco-grid { display: grid !important; grid-template-columns: 1fr !important; overflow: visible !important; scroll-snap-type: none !important; gap: 16px !important; padding-bottom: 0 !important; } .labs-page .ecosystem-section .eco-card { min-width: 0 !important; width: auto !important; flex-shrink: 1 !important; scroll-snap-align: none !important; } } /* ── "Inside this voice AI build" — case-studies' "What's Possible" pattern (.roadmap-section + .rm-step). Navy→white gradient ground, 3-col bento with row-rhythm modifiers (--wide, --light, --green, --lead). Same rules the case-study page uses, ported so they apply without the body:has(.svc-hero-wrap) gate. */ .labs-page .roadmap-section { background: linear-gradient(180deg, #1a2857 0%, #16214a 12%, #121c3a 30%, #eef1f6 58%, #ffffff 100%) !important; padding: 100px 72px 100px !important; margin-top: 0 !important; position: relative; overflow: hidden; } .labs-page .roadmap-section > .fade-in { max-width: 1200px !important; margin: 0 auto !important; padding: 0 !important; } .labs-page .roadmap-section .sec-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7) !important; margin-bottom: 14px; } .labs-page .roadmap-section .sec-eyebrow::before { content: ''; display: block; width: 28px; height: 2px; background: currentColor; } .labs-page .roadmap-section .sec-title, .labs-page .roadmap-section h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(28px, 3.5vw, 42px) !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; color: #ffffff !important; margin: 0 0 16px !important; } .labs-page .roadmap-section > .fade-in > p { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,0.7) !important; max-width: 780px; margin: 0; } .labs-page .roadmap-section .rm-steps { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; margin-top: 32px !important; } .labs-page .roadmap-section .rm-steps::before { display: none !important; } .labs-page .roadmap-section .rm-step { padding: 32px 28px !important; border-radius: 18px !important; overflow: hidden; position: relative; min-height: 240px; border: 0 !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; } .labs-page .roadmap-section .rm-step::after { display: none !important; } .labs-page .roadmap-section .rm-step:hover { transform: none !important; box-shadow: none !important; } /* Palette cycle. */ .labs-page .roadmap-section .rm-step:nth-child(5n+1) { --rm-color: var(--lb-teal); background: var(--lb-teal) !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; } .labs-page .roadmap-section .rm-step:nth-child(5n+2) { --rm-color: var(--lb-orange); background: var(--lb-orange) !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; } .labs-page .roadmap-section .rm-step:nth-child(5n+3) { --rm-color: var(--lb-green); background: var(--lb-green) !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; } .labs-page .roadmap-section .rm-step:nth-child(5n+4) { --rm-color: var(--lb-blue); background: var(--lb-blue) !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; } .labs-page .roadmap-section .rm-step:nth-child(5n+5) { --rm-color: var(--lb-navy); background: var(--lb-navy) !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; } .labs-page .roadmap-section .rm-step, .labs-page .roadmap-section .rm-step * { color: #ffffff !important; } /* Row rhythm — wide/light/lead/green modifiers. */ .labs-page .roadmap-section .rm-step--wide { grid-column: span 2; } .labs-page .roadmap-section .rm-step--lead { grid-column: 1 / -1; } .labs-page .roadmap-section .rm-step.rm-step--light { background: #ffffff !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.08), transparent 55%) !important; } .labs-page .roadmap-section .rm-step.rm-step--light, .labs-page .roadmap-section .rm-step.rm-step--light * { color: var(--lb-navy) !important; } .labs-page .roadmap-section .rm-step.rm-step--lead { background: var(--lb-navy) !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; } .labs-page .roadmap-section .rm-step.rm-step--green { background: var(--lb-green) !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; } /* Dot / status / name / desc typography inside a card. */ .labs-page .roadmap-section .rm-dot { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 0 16px !important; background: rgba(255,255,255,0.14) !important; border: 2px solid rgba(255,255,255,0.28) !important; } .labs-page .roadmap-section .rm-dot svg { width: 18px; height: 18px; } .labs-page .roadmap-section .rm-step.rm-step--light .rm-dot { background: rgba(26,40,87,0.08) !important; border-color: rgba(26,40,87,0.20) !important; } .labs-page .roadmap-section .rm-status { display: inline-block; padding: 4px 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px !important; background: rgba(255,255,255,0.18) !important; border-radius: 999px; } .labs-page .roadmap-section .rm-step.rm-step--light .rm-status { background: rgba(26,40,87,0.08) !important; } .labs-page .roadmap-section .rm-name { font-family: 'Space Grotesk', sans-serif; font-size: 20px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; margin: 0 0 8px !important; } .labs-page .roadmap-section .rm-desc { font-size: 14.5px !important; line-height: 1.65 !important; color: rgba(255,255,255,0.85) !important; margin: 0 !important; } .labs-page .roadmap-section .rm-step.rm-step--light .rm-desc { color: rgba(26,40,87,0.72) !important; } @media (max-width: 900px) { .labs-page .roadmap-section { padding: 64px 24px 80px !important; } .labs-page .roadmap-section .rm-steps { grid-template-columns: 1fr !important; } .labs-page .roadmap-section .rm-step--wide, .labs-page .roadmap-section .rm-step--lead { grid-column: 1 !important; } } /* ── "How this voice AI works" — homepage's "How We Work" bento, but with one tall left card + three stacked on the right (4 steps). Navy gradient ground so the section reads as a dark spine between the two white bento sections. */ .labs-page .lb-how { background: linear-gradient(180deg, #121c3a 0%, #16214a 45%, #1a2857 100%); padding: 110px 40px 104px; position: relative; overflow: hidden; } .labs-page .lb-how-head { max-width: 1440px; margin: 0 auto 60px; } .labs-page .lb-how-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin-bottom: 14px; } .labs-page .lb-how-rule { display: block; width: 28px; height: 2px; /* White, matching the kicker text beside it. This section is a dark navy gradient, and every other dark section on the site uses a white rule (.hn-news, .hn-work). The green was the only one of its kind and read as a stray line rather than part of the kicker. */ background: #ffffff; } .labs-page .lb-how-title { margin: 0 0 20px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: #ffffff; } .labs-page .lb-how-lede { margin: 0; max-width: 62ch; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.7; color: rgba(255,255,255,0.72); } .labs-page .lb-how-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 0; } /* One tall left card spans all three rows; three cards stacked right. */ .labs-page .lb-how-c1 { grid-column: 1; grid-row: 1 / 4; } .labs-page .lb-how-c2 { grid-column: 2; grid-row: 1; } .labs-page .lb-how-c3 { grid-column: 2; grid-row: 2; } .labs-page .lb-how-c4 { grid-column: 2; grid-row: 3; } .labs-page .lb-how-card { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 36px 32px 32px; min-height: 180px; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%); transition: filter 0.25s ease; } .labs-page .lb-how-card:hover { filter: brightness(1.08); } .labs-page .lb-how-body { width: 100%; } /* Per-step "Talk to the demo" button — same navy pill treatment as the hero primary CTA, sized down for the compact card footer. */ .labs-page .lb-how-cta { margin-top: 24px !important; padding: 11px 22px !important; font-size: 12.5px !important; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; text-decoration: none !important; } .labs-page .lb-how-cta:hover, .labs-page .lb-how-cta:focus { text-decoration: none !important; } .labs-page .lb-how-cta svg { width: 15px !important; height: 15px !important; } .labs-page .lb-how-c1 { background-color: var(--lb-teal); } .labs-page .lb-how-c2 { background-color: var(--lb-orange); } .labs-page .lb-how-c3 { background-color: var(--lb-green); } .labs-page .lb-how-c4 { background-color: #ffffff; } .labs-page .lb-how-c4 .lb-how-n { color: rgba(26,40,87,0.55); } .labs-page .lb-how-c4 .lb-how-name { color: var(--lb-navy); } .labs-page .lb-how-c4 .lb-how-desc { color: rgba(26,40,87,0.72); } /* Round the outer four corners only, so the mosaic reads as one panel. */ .labs-page .lb-how-grid > .lb-how-c1 { border-top-left-radius: 18px; border-bottom-left-radius: 18px; } .labs-page .lb-how-grid > .lb-how-c2 { border-top-right-radius: 18px; } .labs-page .lb-how-grid > .lb-how-c4 { border-bottom-right-radius: 18px; } .labs-page .lb-how-n { font-size: clamp(28px, 3vw, 40px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: rgba(255,255,255,0.72); } .labs-page .lb-how-name { margin: 18px 0 12px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: #ffffff; } .labs-page .lb-how-desc { margin: 0; max-width: 42ch; font-size: clamp(14.5px, 1.15vw, 16px); line-height: 1.62; color: rgba(255,255,255,0.88); } @media (max-width: 1100px) { .labs-page .lb-how { padding: 92px 40px 88px; } .labs-page .lb-how-head { margin-bottom: 44px; } .labs-page .lb-how-card { padding: 30px 26px 26px; } } @media (max-width: 900px) { .labs-page .lb-how { padding: 72px 24px 72px; } .labs-page .lb-how-grid { grid-template-columns: 1fr; grid-template-rows: none; } .labs-page .lb-how-c1, .labs-page .lb-how-c2, .labs-page .lb-how-c3, .labs-page .lb-how-c4 { grid-column: 1; grid-row: auto; } .labs-page .lb-how-grid > .lb-how-c1 { border-radius: 18px 18px 0 0; } .labs-page .lb-how-grid > .lb-how-c2, .labs-page .lb-how-grid > .lb-how-c3 { border-radius: 0; } .labs-page .lb-how-grid > .lb-how-c4 { border-radius: 0 0 18px 18px; } .labs-page .lb-how-card { min-height: 200px; } } /* ── Suppress the section-level fade-in on backgrounds so the coloured grounds (navy gradients + grey FAQ ground) stay painted from first frame. Without this, `.fade-in { opacity: 0 }` briefly hides the entire section (background and all) on page load and the underlying body shows through as a white flash below the hero. Cards + copy inside these sections can still use their own fade-in animations. */ .labs-page .hn-work.fade-in, .labs-page .ecosystem-section.fade-in, .labs-page .roadmap-section.fade-in, .labs-page .lb-how.fade-in, .labs-page .lb-faq-section.fade-in, .labs-page section.cta-band.fade-in, .labs-page .rs-stage.fade-in, .labs-page .ca-stage.fade-in, .labs-page .dq-stage.fade-in, .labs-page .ci-stage.fade-in, .labs-page .yd-stage.fade-in { opacity: 1 !important; transform: none !important; } /* ── Body reset ─────────────────────────────────────────────────── */ .labs-page { --lb-navy: #1a2857; --lb-navy-2: #0d1540; --lb-teal: #0096c7; --lb-orange: #f77f00; --lb-green: #4aaa57; --lb-blue: #1565c7; --lb-ink: #111827; --lb-body: #374151; --lb-mute: #6b7280; --lb-line: #e5e7eb; --lb-bg: #f7f7f8; } /* ── Section wrappers ──────────────────────────────────────────── */ .labs-page .lb-section-white, .labs-page .lb-section-dark, .labs-page .lb-section-light { padding: 72px 72px 48px; position: relative; overflow: hidden; } .labs-page .lb-section-white { background: #ffffff; } .labs-page .lb-section-light { background: var(--lb-bg); } .labs-page .lb-section-dark { background: linear-gradient(135deg, var(--lb-navy) 0%, var(--lb-navy-2) 100%); color: rgba(255,255,255,0.85); } .labs-page .lb-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; } /* Decorative layers used only in dark sections */ .labs-page .lb-bloom-a, .labs-page .lb-bloom-b { position: absolute; width: 400px; height: 400px; border-radius: 50%; pointer-events: none; filter: blur(80px); opacity: 0.35; } .labs-page .lb-bloom-a { top: -120px; right: -100px; background: rgba(0,150,199,0.35); } .labs-page .lb-bloom-b { bottom: -140px; left: -80px; background: rgba(247,127,0,0.22); } /* ── Eyebrow + heading + section description ───────────────────── */ .labs-page .lb-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lb-teal); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; } .labs-page .lb-eyebrow::before { content: ''; display: block; width: 28px; height: 2px; background: currentColor; } .labs-page .lb-section-dark .lb-eyebrow { color: #29b6f6; } .labs-page .lb-h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(28px, 3.5vw, 42px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--lb-navy); margin: 0 0 18px; } .labs-page .lb-section-dark .lb-h2 { color: #ffffff; } .labs-page .lb-section-desc { font-size: 15.5px; line-height: 1.75; color: var(--lb-body); max-width: 780px; margin: 0 0 32px; } .labs-page .lb-section-dark .lb-section-desc { color: rgba(255,255,255,0.78); } /* ── Impact bento (row of stat cards) ──────────────────────────── */ .labs-page .lb-impact-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 36px; } .labs-page .lb-impact-card { padding: 32px 26px; color: #ffffff; position: relative; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s; } .labs-page .lb-impact-card:nth-child(5n+1) { background: var(--lb-teal); } .labs-page .lb-impact-card:nth-child(5n+2) { background: var(--lb-green); } .labs-page .lb-impact-card:nth-child(5n+3) { background: var(--lb-orange); } .labs-page .lb-impact-card:nth-child(5n+4) { background: var(--lb-blue); } .labs-page .lb-impact-card:nth-child(5n) { background: var(--lb-teal); } .labs-page .lb-impact-card:hover { transform: translateY(-3px); box-shadow: 0 12px 48px rgba(0,0,0,0.25); } .labs-page .lb-impact-num { font-family: 'Space Grotesk', sans-serif; font-size: 36px; font-weight: 700; line-height: 1; margin-bottom: 12px; } .labs-page .lb-impact-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; } .labs-page .lb-impact-desc { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.85); } /* ── Industries bento (headline + 6-card grid) ────────────────── */ .labs-page .lb-industries { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: center; } .labs-page .lb-industries-copy .lb-h2 { font-size: clamp(24px, 3vw, 36px); } .labs-page .lb-industries-copy p { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,0.6); margin-bottom: 24px; } .labs-page .lb-industries-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .labs-page .lb-industry-card { padding: 24px; border-left: 3px solid var(--lb-teal); background: rgba(0,150,199,0.08); } .labs-page .lb-industry-card:nth-child(6n+2) { background: rgba(247,127,0,0.08); border-left-color: var(--lb-orange); } .labs-page .lb-industry-card:nth-child(6n+3) { background: rgba(74,170,87,0.08); border-left-color: var(--lb-green); } .labs-page .lb-industry-card:nth-child(6n+4) { background: rgba(74,170,87,0.08); border-left-color: var(--lb-green); } .labs-page .lb-industry-card:nth-child(6n+5) { background: rgba(0,150,199,0.08); border-left-color: var(--lb-teal); } .labs-page .lb-industry-card:nth-child(6n) { background: rgba(247,127,0,0.08); border-left-color: var(--lb-orange); } .labs-page .lb-industry-card h4 { font-size: 15px; font-weight: 700; color: #ffffff; margin: 0 0 6px; } .labs-page .lb-industry-card p { font-size: 14.5px; color: rgba(255,255,255,0.62); line-height: 1.65; margin: 0; } /* ── Feature gradient cards ────────────────────────────────────── */ .labs-page .lb-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 32px 0; } .labs-page .lb-feature-card { padding: 28px 24px; position: relative; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; background: linear-gradient(160deg, var(--lb-teal) 0%, var(--lb-navy) 120%); } .labs-page .lb-feature-card:nth-child(4n+2) { background: linear-gradient(160deg, var(--lb-orange) 0%, var(--lb-navy) 120%); } .labs-page .lb-feature-card:nth-child(4n+3) { background: linear-gradient(160deg, var(--lb-green) 0%, var(--lb-navy) 120%); } .labs-page .lb-feature-card:nth-child(4n) { background: linear-gradient(160deg, var(--lb-blue) 0%, var(--lb-navy) 120%); } .labs-page .lb-feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.15); } .labs-page .lb-feature-card .lb-ico { width: 32px; height: 32px; margin-bottom: 14px; color: rgba(255,255,255,0.85); } .labs-page .lb-feature-card .lb-ico svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.5; } .labs-page .lb-feature-card h4 { font-size: 17px; font-weight: 700; color: #ffffff; margin: 0 0 10px; line-height: 1.25; } .labs-page .lb-feature-card p { font-size: 15px; color: rgba(255,255,255,0.78); line-height: 1.65; margin: 0; } /* ── Timeline (numbered steps) ─────────────────────────────────── */ .labs-page .lb-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 40px 0; } .labs-page .lb-step { padding: 24px; background: rgba(0,150,199,0.08); border-left: 3px solid var(--lb-teal); } .labs-page .lb-step:nth-child(4n+2) { background: rgba(247,127,0,0.08); border-left-color: var(--lb-orange); } .labs-page .lb-step:nth-child(4n+3) { background: rgba(74,170,87,0.08); border-left-color: var(--lb-green); } .labs-page .lb-step:nth-child(4n) { background: rgba(21,101,199,0.08); border-left-color: var(--lb-blue); } .labs-page .lb-section-dark .lb-step { background: rgba(255,255,255,0.06); } .labs-page .lb-step-num { font-size: 24px; font-weight: 700; line-height: 1; margin: 0 0 6px; color: var(--lb-teal); } .labs-page .lb-step:nth-child(4n+2) .lb-step-num { color: var(--lb-orange); } .labs-page .lb-step:nth-child(4n+3) .lb-step-num { color: var(--lb-green); } .labs-page .lb-step:nth-child(4n) .lb-step-num { color: var(--lb-blue); } .labs-page .lb-step h4 { font-size: 15px; font-weight: 700; color: var(--lb-navy); margin: 0 0 6px; } .labs-page .lb-step p { font-size: 15px; color: var(--lb-body); line-height: 1.65; margin: 0; } .labs-page .lb-section-dark .lb-step h4 { color: #ffffff; } .labs-page .lb-section-dark .lb-step p { color: rgba(255,255,255,0.72); } /* ── FAQ (homepage pattern: grey ground + 1200px white rounded card) ── */ .labs-page .lb-faq-section { background: var(--lb-bg); padding: 24px 72px 80px; } .labs-page .lb-faq-card { max-width: 1200px; margin: 0 auto; background: #ffffff; border-radius: 18px; padding: 48px 48px; } .labs-page .lb-faq-title { font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 700; color: var(--lb-navy); margin: 0 0 36px; text-align: center; letter-spacing: -0.01em; display: flex; align-items: center; justify-content: center; gap: 10px; } .labs-page .lb-faq-section .ent-faq-item { display: block; } .labs-page .lb-faq-section .ent-faq-item.open .ent-faq-q { background: #f7f8fb; } .labs-page .lb-faq-section .ent-faq-item.open .ent-faq-q::after { content: '\2212'; color: var(--lb-teal); } .labs-page .lb-faq-section .ent-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .labs-page .lb-faq-section .ent-faq-item.open .ent-faq-a { max-height: 600px; } .labs-page .lb-faq-section .ent-faq-a-inner { padding: 18px 24px 22px; font-size: 15px; line-height: 1.8; color: var(--lb-body); border-top: 1px solid rgba(0,0,0,0.04); background: #ffffff; } @media (max-width: 900px) { .labs-page .lb-faq-section { padding: 24px 20px 60px; } .labs-page .lb-faq-card { padding: 32px 24px; } } /* ── Final CTA band above the footer — light grey outer ground with a navy gradient rounded card holding the content. Experiment: if this reads well, roll the same "card-in-section" treatment across the other coloured sections. */ .labs-page section.cta-band { padding: 40px max(40px, calc((100% - 1200px) / 2)) 40px !important; gap: 0 !important; align-items: stretch !important; background: #eff0f2 !important; position: relative !important; margin-top: -56px !important; } .labs-page section.cta-band::before { content: '' !important; display: block !important; position: absolute !important; top: 40px !important; bottom: 40px !important; left: max(40px, calc((100% - 1200px) / 2)) !important; right: max(40px, calc((100% - 1200px) / 2)) !important; background: linear-gradient(180deg, #121c3a 0%, #16214a 45%, #1a2857 100%) !important; border-radius: 24px !important; z-index: 0 !important; pointer-events: none !important; } .labs-page section.cta-band > * { position: relative; z-index: 1; width: 100%; min-width: 0; padding: 48px !important; } /* Tighten the gap between heading block and form block ONLY when the layout has collapsed to a single stacked column (below 1100px). At desktop the .cta-band is a 2-column grid — heading left, form right — and trimming these paddings just makes the form sit higher than the heading instead of tightening any vertical gap. */ @media (max-width: 1100px) { .labs-page section.cta-band > *:nth-child(2) { padding-top: 8px !important; } .labs-page section.cta-band > *:nth-child(1) { padding-bottom: 12px !important; } } .labs-page section.cta-band .cta-sub { margin-bottom: 18px !important; } .labs-page section.cta-band .ca-cta-list { margin-bottom: 20px !important; } .labs-page section.cta-band .ca-cta-eyebrow { margin-bottom: 10px !important; } /* Content on the navy card — restore the dark-ground palette. */ .labs-page section.cta-band h2, .labs-page section.cta-band h2 span, .labs-page section.cta-band .cta-sub, .labs-page section.cta-band .cta-note, .labs-page section.cta-band .ca-cta-note { color: #ffffff !important; } .labs-page section.cta-band h2 span { color: #ffffff !important; } .labs-page section.cta-band .cta-sub { color: rgba(255,255,255,0.72) !important; } .labs-page section.cta-band .cta-note, .labs-page section.cta-band .ca-cta-note { color: rgba(255,255,255,0.5) !important; } .labs-page section.cta-band h2 { margin: 0 0 20px; font-family: 'Space Grotesk', sans-serif; } .labs-page section.cta-band .ca-cta-eyebrow { color: rgba(255,255,255,0.6) !important; } .labs-page section.cta-band .ca-cta-list li { color: rgba(255,255,255,0.78) !important; } .labs-page section.cta-band .ca-cta-list li strong { color: #ffffff !important; } .labs-page section.cta-band .ca-cta-list li svg { color: #ffffff !important; } .labs-page section.cta-band .ca-cta-stat-lbl { color: rgba(255,255,255,0.4) !important; } /* Form inputs — solid white cards on the navy ground with navy text. */ .labs-page section.cta-band .ca-cta-form-input { background: #ffffff !important; color: var(--lb-navy) !important; border: 1px solid #ffffff !important; border-radius: 10px !important; } .labs-page section.cta-band .ca-cta-form-input::placeholder { color: rgba(26,40,87,0.45) !important; } .labs-page section.cta-band .ca-cta-form-input:focus { border-color: #ffffff !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(255,255,255,0.18); } .labs-page section.cta-band textarea.ca-cta-form-input { min-height: 108px !important; } .labs-page section.cta-band .ca-country-select { color: var(--lb-navy) !important; } .labs-page section.cta-band .ca-country-select.is-empty { color: rgba(26,40,87,0.45) !important; } /* Submit button — site-wide navy pill (navy fill + white border), matches every other primary CTA on the page. */ .labs-page section.cta-band .ca-cta-submit { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; background: var(--lb-navy) !important; color: #ffffff !important; border: 1.5px solid #ffffff !important; border-radius: 999px !important; padding: 14px 32px !important; } .labs-page section.cta-band .ca-cta-submit:hover { background: var(--lb-navy) !important; color: #ffffff !important; border-color: #ffffff !important; opacity: 0.9; } /* Stats row + success check — all white for a single-tone CTA. */ .labs-page section.cta-band .ca-cta-stat-num, .labs-page section.cta-band .ca-cta-stat-num.teal, .labs-page section.cta-band .ca-cta-stat-num.orange, .labs-page section.cta-band .ca-cta-stat-num.green { color: #ffffff !important; } .labs-page section.cta-band .ca-cta-form-success svg { color: #ffffff !important; } .labs-page section.cta-band .ca-cta-note { margin-top: 12px !important; } @media (max-width: 900px) { .labs-page section.cta-band { padding: 28px 24px !important; gap: 0 !important; } .labs-page section.cta-band::before { top: 28px !important; bottom: 28px !important; left: 24px !important; right: 24px !important; border-radius: 20px !important; } .labs-page section.cta-band > * { padding: 40px 28px !important; } .labs-page section.cta-band .ca-cta-form-row { grid-template-columns: 1fr !important; } } @media (max-width: 560px) { .labs-page section.cta-band { padding: 20px 20px !important; } .labs-page section.cta-band::before { top: 20px !important; bottom: 20px !important; left: 20px !important; right: 20px !important; border-radius: 18px !important; } .labs-page section.cta-band > * { padding: 32px 22px !important; } .labs-page section.cta-band h2 { font-size: 26px !important; } .labs-page section.cta-band .cta-sub { font-size: 15px !important; } } /* ── CTA buttons (voice-lab + generic) ─────────────────────────── */ .labs-page .lb-cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .labs-page .lb-btn-demo, .labs-page .lb-btn-build, .labs-page .lb-btn-ghost { display: inline-flex; align-items: center; gap: 10px; padding: 13px 32px; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; border: 0; cursor: pointer; transition: opacity 0.2s; } .labs-page .lb-btn-demo { color: #ffffff; background: var(--lb-teal); } .labs-page .lb-btn-build { color: #ffffff; background: var(--lb-green); } .labs-page .lb-btn-ghost { color: #ffffff; background: transparent; border: 1px solid rgba(255,255,255,0.28); } .labs-page .lb-btn-demo:hover, .labs-page .lb-btn-build:hover { opacity: 0.85; text-decoration: none; color: #ffffff; } .labs-page .lb-btn-ghost:hover { border-color: #ffffff; text-decoration: none; color: #ffffff; } .labs-page .lb-btn-demo .lb-pulse { width: 8px; height: 8px; border-radius: 50%; background: #ffffff; animation: lbPulse 1.6s infinite; flex-shrink: 0; } @keyframes lbPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } /* ── Responsive ────────────────────────────────────────────────── */ @media (max-width: 1180px) { .labs-page .lb-impact-grid { grid-template-columns: repeat(3, 1fr); } .labs-page .lb-industries { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 900px) { .labs-page .lb-feature-grid { grid-template-columns: repeat(2, 1fr); } .labs-page .lb-timeline { grid-template-columns: repeat(2, 1fr); } .labs-page .lb-industries-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .labs-page .lb-section-white, .labs-page .lb-section-dark, .labs-page .lb-section-light { padding: 48px 24px; } .labs-page .lb-impact-grid { grid-template-columns: 1fr; } .labs-page .lb-feature-grid { grid-template-columns: 1fr; } .labs-page .lb-timeline { grid-template-columns: 1fr; } .labs-page .lb-industries-grid { grid-template-columns: 1fr; } .labs-page .lb-cta-row { flex-direction: column; align-items: stretch; } .labs-page .lb-btn-demo, .labs-page .lb-btn-build, .labs-page .lb-btn-ghost { justify-content: center; } } /* ── AI Document Q&A hero canvas, phones ───────────────────────────── The shared phone rule in home-new.css lifts .hn-face 50px so it sits between the copy and the buttons. The docqa artwork reads better 35px lower than that, so it nets out at -15px. Scoped to .dq-page (set on by the lab) so no other lab hero moves. Specificity 0-3-0 beats the shared 0-2-0 rule regardless of file order. */ @media (max-width: 720px) { .dq-page .labs-page-hero .hn-face { top: -15px; bottom: 15px; } /* AI for Hiring (resume screener): 25px higher than the shared -50px, so the artwork clears the copy above it. */ .rs-page .labs-page-hero .hn-face { top: -75px; bottom: 75px; } } /* ── Hero CTAs: keep both on one line ──────────────────────────────── The lab labels are far longer than the homepage's ("Build one for my team" / "See the front-desk dashboard" vs "See our work"), so the pair measures 526-591px against a copy column capped at 620px on desktop and 500px below 1100px. That pushed the second button onto its own line on every lab while the homepage still fitted. Trimming the type and padding on lab heroes only brings the widest pair under the narrowest column; the homepage keeps its larger buttons. */ .labs-page-hero .hn-cta-primary, .labs-page-hero .hn-cta-secondary { padding: 14px 20px !important; font-size: 14px !important; gap: 8px; } .labs-page-hero .hn-cta-primary svg, .labs-page-hero .hn-cta-secondary svg { width: 15px; height: 15px; } .labs-page-hero .hn-cta-col { gap: 12px; }