/* ============================================================================ QSS Homepage — Mobile responsive layer (375px → 640px) Design reference: Figma "QSS-2026" node 2021-1453 (mobile homepage). REVERSIBLE BY DESIGN: - This file only adds rules inside `@media (max-width:640px)`, scoped to `body.home-v2`. It never changes desktop/tablet behaviour and never touches page content. - It is wired in via ONE in index.html between the markers ... . - To fully revert: delete that line and this file. Nothing else. ============================================================================ */ @media (max-width: 640px) { /* ---- 0. Overflow guard + consistent 16px gutters --------------------- */ /* The page's horizontal scrollbar came from absolutely-positioned decorative elements bleeding out of their sections — the 560px `.nh-glow-blue` in the Consulting section and the 701px `.nh-domain__pin::after` watermark in the Domain section (both sit in position:relative sections that are overflow:visible on mobile). overflow on / does NOT remove the resulting document scroll-width — only clipping the element's OWN section (its containing block) does. So clip every section horizontally on mobile. `overflow-x:clip` keeps vertical flow normal and never creates a scroll container (so sticky/internal sliders are unaffected). */ html, body.home-v2 { overflow-x: clip; } body.home-v2 .nh-sec, body.home-v2 .nh-hero, body.home-v2 .nh-prodsec, body.home-v2 .nh-domainsec, body.home-v2 .nh-consult, body.home-v2 .nh-techsec { overflow-x: clip; } body.home-v2 .nh-wrap, body.home-v2 .nh-hero__inner, body.home-v2 .nh-tabs__inner, body.home-v2 .nh-header__inner { padding-left: 16px; padding-right: 16px; } /* ---- Header (Figma node 2021:1454) ----------------------------------- */ /* 50px bar · 86x36 logo LEFT · 20x16 white hamburger RIGHT · 16px gutters. space-between pushes the menu icon to the right edge (desktop nav is hidden on mobile, so without this the burger packs next to the logo). */ body.home-v2 .nh-header__inner { height: 50px; gap: 16px; padding: 0 16px; justify-content: space-between; } body.home-v2 .nh-logo { flex: none; } body.home-v2 .nh-logo img { height: 36px; } body.home-v2 .nh-burger { flex: none; margin-left: auto; } body.home-v2 .nh-burger { padding: 6px; gap: 5px; } body.home-v2 .nh-burger span { width: 20px; height: 2px; background: #fff; } /* slide-in mobile nav now starts below the shorter (50px) header */ body.home-v2 .nh-mobile-nav { inset: 50px 0 0; } /* keep the header "Book a Discovery Call" CTA hidden on mobile — the full-width .nh-btn--discovery rule (section 13) would otherwise reveal it */ body.home-v2 .nh-header__cta { display: none !important; } /* hide the sticky scroll-spy section menus on mobile — they overlapped the content (Our Approach / Industry Expertise / … / Happy Clients). The hero category tab bar (.nh-tabs) is already hidden at <=768. */ body.home-v2 .nh-subnav-bar { display: none !important; } /* loader logo — on mobile the full-bleed object-fit:cover video crops the Q at the edges. The video is 16:9, so contain it at near-full width (big, but a small margin so it never touches the screen edges), centred by the .nh-loader flex container. */ body.home-v2 .nh-loader__video { width: auto; height: auto; max-width: 90vw; max-height: 80vh; object-fit: contain; } /* ---- 1. Typography + section rhythm (match Figma) -------------------- */ /* Consistent gap between ALL sections (hero excluded). Using padding-TOP only (not top+bottom) means each boundary = exactly one section's top padding — no doubling, so every gap is identical (40px). Horizontal gutters stay via .nh-wrap. Every section uses .nh-sec except the products section (.nh-prodsec), so both are targeted. */ body.home-v2 .nh-sec, body.home-v2 .nh-prodsec { padding: 48px 0; } /* Exception: #industries (FinTech) is a dark, full-bleed bg-image section that flows straight into the equally-dark .nh-consult section. A 40px gap between two dark sections reads as an empty void/seam, not a clean break — so MERGE them: drop the consult section's top gap so the two dark sections are continuous (per user: "merge the sections in clean manner, no empty space"). The consult content keeps its own internal top breathing room below. */ body.home-v2 .nh-consult { padding-top: 0 !important; padding-bottom: 0 !important; } body.home-v2 .nh-consult .nh-consult-stage { padding-top: 48px !important; } /* Task 2: Consult ("A Consulting Framework") — per Figma 2021:1706 the mobile layout shows the active phase photo as an inline rounded CARD (aspect 304/189) between the phase tabs and the Discover detail, NOT a full-bleed background. Hide the full-bleed bg; the card is injected + kept in sync by the MOBILE-CONSULT-CARD script (display:none inline → shown only here on mobile). */ body.home-v2 #insights .nh-consult__bg { display: none !important; } body.home-v2 .nh-consult__card { display: block !important; width: 100%; aspect-ratio: 304 / 189; object-fit: cover; border-radius: 12px; margin: 0 0 4px; } body.home-v2 .nh-consult__detail { gap: 24px !important; } /* Same case for the .nh-techsec sections ("Software Engineering Services" = #services, which follows the dark #ai-innovation section; and the green one which follows the products carousel). Both originally shipped padding:0 to flow from the previous section — the blanket 40px rule above re-introduced an empty dark seam. Drop their top gap so they MERGE with the previous dark section; the 28px stage padding (set in the techstage rule below) keeps the heading's internal breathing room. */ body.home-v2 .nh-techsec { padding-top: 0 !important; } /* "End-to-End AI Innovation" (#ai-innovation) — explicit 48px top & bottom padding (overrides the 40px .nh-sec default via the id's higher specificity). */ body.home-v2 #ai-innovation { padding-top: 48px; padding-bottom: 48px; } /* "Software Engineering Services" (#services) + "Healthcare Engineering" (#healthcare) — give the heading ~28px breathing room INSIDE the section (techstage top padding), so the gap to the section above matches the reference image (prev section's 48px bottom + this 28px). */ body.home-v2 #services .nh-techstage, body.home-v2 #healthcare .nh-techstage { padding-top: 48px !important; } body.home-v2 #services { padding-bottom: 0 !important; } body.home-v2 .nh-sec__head { margin-bottom: 28px; max-width: 100%; } body.home-v2 .nh-sec__title { font-size: clamp(1.55rem, 7vw, 1.95rem); line-height: 1.2; } /* several titles ship inline `white-space:nowrap`; !important lets them wrap on mobile without editing the markup/content */ body.home-v2 .nh-sec__title, body.home-v2 .nh-culture__title, body.home-v2 .nh-faq__title span { white-space: normal !important; } body.home-v2 .nh p.nh-sec__sub { font-size: .9rem; line-height: 1.55; margin-top: 12px; } body.home-v2 .nh-eyebrow { font-size: .66rem; margin-bottom: 10px; } /* ALL section headings + their paragraphs are LEFT-aligned on mobile (per request: "do this for all headings and paragraphs which are not left align"). */ body.home-v2 .nh-sec__head, body.home-v2 .nh-sec__title, body.home-v2 .nh p.nh-sec__sub, body.home-v2 .nh-trust__title, body.home-v2 .nh-trust .nh-sec__sub, body.home-v2 .nh-mq__head, body.home-v2 .nh-culture__title { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } /* "Built. Shipped. Trusted." stays on one line (override the wrap above). */ body.home-v2 .nh-trust__title { white-space: nowrap !important; font-size: clamp(1.3rem, 6.5vw, 1.7rem); } /* ---- 2. Hero (Figma node 2021:1468) ---------------------------------- */ /* clears the 50px fixed header; 20px side padding + 20px stack gap per Figma. Hero is the ONLY section that fills the viewport (100vh) on mobile. */ /* Hero: equal VISIBLE gaps top & bottom (48px each). Because the 50px fixed header overlaps the hero's top, the CSS top padding must be ~header+48 so the gap BELOW the header equals the 48px gap below the artwork. */ body.home-v2 .nh-hero { padding: 98px 0 48px; min-height: auto; justify-content: center; } /* every OTHER section sizes to its content (no forced viewport height), so there are no giant empty gaps and the height adjusts when content swaps. */ body.home-v2 .nh-ai { min-height: 0 !important; } body.home-v2 .nh-techsec .nh-techstage {padding: 0 !important;} body.home-v2 .nh-techsec.is-pinscroll .nh-techstage { min-height: 0 !important; height: auto !important; padding: 28px 0 0 !important; } body.home-v2 .nh-consult-stage { min-height: 0 !important; padding: 0 !important; } body.home-v2 .nh-hero__inner { flex-direction: column; gap: 20px; padding: 0 20px; align-items: center; } /* badge + heading both LEFT-aligned (badge matches the left-aligned title); only the artwork (in .nh-hero__right) stays centred. */ body.home-v2 .nh-hero__left { align-items: flex-start; text-align: left; width: 100%; } body.home-v2 .nh-hero__badge { align-self: flex-start; } /* badge — 13px Plus Jakarta Sans, 22px icon, pill border kept */ body.home-v2 .nh-hero__badge { font-size: .73rem; gap: 6px; padding: 10px 12px; margin-bottom: 18px; white-space: nowrap; } /* title spans — 32 / 36 / 36px per Figma (fluid, capped at the Figma value). Per Figma 2021:1474 the heading is LEFT-aligned (full-width block, text starts at the left edge) even though the badge + artwork stay centered. */ body.home-v2 .nh-hero__title { max-width: 100%; width: 100%; text-align: left; } /* l1 is a fit-content block with auto side-margins (centred) in the base CSS; reset the left margin so it left-aligns with l2/l3 per Figma 2021:1474. */ body.home-v2 .nh-hero__l1 { font-size: clamp(1.65rem, 8vw, 2rem); margin: 0 auto .18em 0; } body.home-v2 .nh-hero__l2 { font-size: clamp(1.9rem, 9.2vw, 2.25rem); } body.home-v2 .nh-hero__l3 { font-size: clamp(1.9rem, 9.2vw, 2.25rem); } /* artwork below the title, centred and contained */ body.home-v2 .nh-hero__right { width: 100%; justify-content: center; } body.home-v2 .nh-hero__artwrap { max-width: 100%; overflow: visible; margin: 0 auto; } body.home-v2 .nh-hero__chat { width: 100%; } /* ---- 3. AI Innovation + Financial Technology numbered sections --------- Same Figma pattern for both (AI: 2021:2734 / :2739 / :2752). #ai-innovation toggles panels via display:none; #industries via visibility — handled separately below where it matters. */ body.home-v2 .nh-ai__row { grid-template-columns: 1fr; gap: 20px; } body.home-v2 .nh-ai__glow { display: none; } /* the JS stabilize() reserves the TALLEST category's height (min-height set inline) so desktop doesn't shake on switch — on mobile that leaves a big empty gap under shorter categories. Let the section size to its active content instead (height adjusts when you tap a category). */ body.home-v2 .nh-ai__inner { min-height: 0 !important; } /* FinTech (#industries) only: its category panels are stacked in ONE grid cell (grid-row:1/grid-column:1) and toggled via `visibility` — so the cell always reserves the TALLEST category's height. When the shorter "Financial & Regulated" (3 links) is active, the taller hidden "Commercial" panel leaves a dead empty band below the last link that reads as a gap before the next section. (AI Innovation is fine — it uses display:none.) On mobile, toggle these panels with display:none too, so the section sizes to the ACTIVE category only and merges cleanly with the next section. */ body.home-v2 #industries .nh-ai__panels .nh-ai__links { display: none; } body.home-v2 #industries .nh-ai__panels .nh-ai__links.is-active { display: flex; } /* AI Innovation + FinTech — full-cover background photo at ~22% opacity so it reads as a subtle backdrop (Figma 2021:2734 / 2021:1669), not a masked sliver */ body.home-v2 #ai-innovation .nh-ai__bgimg, body.home-v2 #industries .nh-ai__bgimg { width: 100% !important; height: 100% !important; object-fit: cover; object-position: center; -webkit-mask-image: none !important; mask-image: none !important; } body.home-v2 #ai-innovation .nh-ai__bgimg.is-active { opacity: .5 !important; } /* Task 1: Financial Technology Systems (#industries) bg image per Figma 2021:1669 — full-cover photo at .25 opacity with a dark navy RADIAL gradient anchored top-left (replacing the heavy left→right linear overlay), so the heading/copy stay readable while the photo shows through on the lower-right. */ body.home-v2 #industries .nh-ai__bgimg.is-active { opacity: .25 !important; } body.home-v2 #industries .nh-ai__bg::after { background: radial-gradient(135% 115% at 15% 7%, rgba(5,5,43,.97) 0%, rgba(3,3,22,.5) 50%, rgba(5,5,43,0) 100%) !important; } body.home-v2 .nh-num-list { margin-top: 24px; gap: 18px; } /* gap above the numbered category tabs (AI Innovation + FinTech) → 20px (was the .nh-ai__head 64px bottom margin). */ body.home-v2 .nh-ai__head { margin-bottom: 20px !important; } body.home-v2 .nh-num { font-size: 1rem; } body.home-v2 .nh-num__n { width: 32px; height: 32px; font-size: .9rem; } /* title 32px / subtitle 16px per Figma */ body.home-v2 #ai-innovation .nh-sec__title, body.home-v2 #industries .nh-sec__title { font-size: 2rem; } body.home-v2 #ai-innovation .nh-sec__sub, body.home-v2 #industries .nh-sec__sub { font-size: 1rem; } /* categories → SINGLE horizontal swipe row of numbered pills (matches Figma 2021:2739 — pills run off the edge and are reachable by swiping). The scroll happens INSIDE this element (min-width:0 keeps it from widening the grid cell, so the page never gets a horizontal scrollbar), and the row's own scrollbar is fully hidden in every engine. */ body.home-v2 #nh-ai-cats, body.home-v2 #nh-fin-cats { /* Figma node 2021:2739 — category row: 20px gap between categories, 14px vertical padding */ flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 20px; margin: 6px 0 0; padding: 10px 0; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } body.home-v2 #nh-ai-cats::-webkit-scrollbar, body.home-v2 #nh-fin-cats::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Figma node 2021:2740 — 6px gap between the number bullet and its label */ body.home-v2 #nh-ai-cats .nh-num, body.home-v2 #nh-fin-cats .nh-num { flex: 0 0 auto; gap: 6px; font-size: .95rem; white-space: nowrap; } body.home-v2 #nh-ai-cats .nh-num__n, body.home-v2 #nh-fin-cats .nh-num__n { width: 24px; height: 24px; font-size: .8rem; } /* category links → full-width rows: label left, thin → arrow right. overrides the desktop 2-col grid (a{display:contents}) that put arrows on their own line on mobile */ body.home-v2 #ai-innovation .nh-ai__panels .nh-ai__links.is-active, body.home-v2 #industries .nh-ai__panels .nh-ai__links.is-active { display: flex !important; flex-direction: column; gap: 14px; width: 100%; max-width: 100%; } /* #industries stacks all panels (visibility) → reserves the tallest height; hide inactive ones so the section sizes to the active category (no gap) */ body.home-v2 #industries .nh-ai__panels .nh-ai__links:not(.is-active) { display: none !important; } body.home-v2 #ai-innovation .nh-ai__links a, body.home-v2 #industries .nh-ai__links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; font-size: .875rem; line-height: 1.1; font-weight: 600; } body.home-v2 #ai-innovation .nh-ai__links a .nh-ai__txt, body.home-v2 #industries .nh-ai__links a .nh-ai__txt { flex: 1 1 auto; min-width: 0; } body.home-v2 #ai-innovation .nh-ai__links a svg, body.home-v2 #industries .nh-ai__links a svg { width: 14px; height: auto; flex: none; } /* no sub-category is auto-highlighted at rest — only on tap/hover */ body.home-v2 #ai-innovation .nh-ai__links a:active, body.home-v2 #industries .nh-ai__links a:active { color: var(--nh-cyan) !important; } /* ---- 4. Tech sections (Software Engineering / Healthcare Engineering) -- */ /* desktop ships padding-left:150px + centred 2-col card grids; reset both */ body.home-v2 .nh-svc { grid-template-columns: 1fr; gap: 24px; min-width: 0; } /* the heading/category wrapper is an unclassed grid item; min-width:0 lets the category swipe-row inside it stay at viewport width and scroll (instead of expanding to its content width and running off-screen) */ body.home-v2 .nh-svc > div { min-width: 0; } body.home-v2 .nh-cards2 { grid-template-columns: 1fr; gap: 16px; justify-content: stretch; } body.home-v2 .nh-techsec--cyan .nh-cards2, body.home-v2 .nh-techsec--green .nh-cards2 { padding-left: 0; justify-content: stretch; } body.home-v2 .nh-techsec--cyan .nh-techcards::before, body.home-v2 .nh-techsec--green .nh-techcards::before { display: none; } body.home-v2 .nh-techstage::after { display: none; } /* Software Engineering + Healthcare Engineering cards — size to CONTENT (no fixed height; the previous 135px cropped the title/desc/link top & bottom). Column, left-aligned, 16px gap, full-width. Child margins reset so the 16px gap is the only spacing (the base uses margins). */ body.home-v2 .nh-card { height: auto; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px; padding: 20px 16px; align-self: stretch; } body.home-v2 .nh-card > * { max-width: 100%; margin: 0; } body.home-v2 .nh-card .nh-link { margin-top: 0; } body.home-v2 .nh-card__desc { min-height: 0; } body.home-v2 .nh-card__title { font-size: 1.15rem; } /* Software Engineering Services cards — 10px gap between the heading and its paragraph (all cards in the section). The title ships a margin-bottom:10px that isn't reset by the generic .nh-card>* rule, so it's zeroed here — leaving the 10px flex gap as the only spacing. */ body.home-v2 #services .nh-card, body.home-v2 #healthcare .nh-card { gap: 10px; } body.home-v2 #services .nh-card__title, body.home-v2 #healthcare .nh-card__title { margin-bottom: 0 !important; } /* numbered category list → horizontal wrapping row of 24px pills, matching the AI/FinTech sections (Figma 2021:1518 / :1522). Wraps (no scrollbar); active pill keeps its red ring via the existing ::before, others 50% opacity. Slightly smaller text than AI/FinTech because these labels are longer. */ body.home-v2 #nh-svc-cats, body.home-v2 #nh-hc-cats { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 22px; margin: 18px 0 0; padding: 4px 0; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } body.home-v2 #nh-svc-cats::-webkit-scrollbar, body.home-v2 #nh-hc-cats::-webkit-scrollbar { width: 0; height: 0; display: none; } body.home-v2 #nh-svc-cats .nh-num, body.home-v2 #nh-hc-cats .nh-num { flex: 0 0 auto; gap: 8px; font-size: .9rem; white-space: nowrap; } body.home-v2 #nh-svc-cats .nh-num__n, body.home-v2 #nh-hc-cats .nh-num__n { width: 24px; height: 24px; font-size: .8rem; } /* ---- 5. Healthcare Products / Compliance / Operations slider --------- Full mobile-carousel rules live in the dedicated @media(max-width:768px) block at the bottom of this file (matches the JS mobile breakpoint). */ /* Reusable hidden-scrollbar helper is applied per-section below. */ /* ---- 6. Consulting Framework (Figma 2021:1706 / :1711 / :1728) ------ */ body.home-v2 #insights .nh-sec__title { font-size: 2rem; } body.home-v2 #insights .nh-sec__sub { font-size: 1rem; } body.home-v2 .nh-consult__row { grid-template-columns: 1fr; gap: 24px; } /* phase list → horizontal swipe row of numbered pills (like the AI categories) */ body.home-v2 #nh-phase-list { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 20px; margin: 6px 0 0; padding: 4px 0; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } body.home-v2 #nh-phase-list::-webkit-scrollbar { width: 0; height: 0; display: none; } body.home-v2 .nh-consult__row #nh-phase-list .nh-num { flex: 0 0 auto; font-size: 1rem; gap: 8px; white-space: nowrap; } body.home-v2 #nh-phase-list .nh-num__n { width: 24px; height: 24px; font-size: .8rem; } body.home-v2 .nh-consult__detail { gap: 18px; } body.home-v2 .nh-consult__detail h3 { font-size: 1.6rem; } /* ---- 7. Domain Depth (Figma 2021:1740) — horizontal sliding cards --- */ body.home-v2 #industry-expertise .nh-sec__title { font-size: 2rem; } body.home-v2 #industry-expertise { padding-bottom: 0 !important; } /* Task 3: remove the big striped 'Q' watermark (.nh-domain__pin::after) on mobile — per Figma 2021:1740 it is not shown at this width (it bled in as a vertical-line shape). The radial glow (::before) stays. */ body.home-v2 .nh-domain__pin::after { display: none !important; } body.home-v2 .nh-domain__viewport { flex: none; /* desktop flex:1 1 0 collapses to height:0 in the mobile column */ overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; } body.home-v2 .nh-domain__viewport::-webkit-scrollbar { width: 0; height: 0; display: none; } body.home-v2 .nh-domain__cards { flex-direction: row !important; flex-wrap: nowrap; width: max-content !important; transform: none !important; gap: 16px; padding-right: 0; } /* Domain Depth cards — 340px wide, 24px/20px padding, column, 16px gap (per request). */ body.home-v2 .nh-dcard { flex: 0 0 auto !important; width: 340px !important; max-width: calc(100vw - 32px); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; scroll-snap-align: start; padding: 24px 20px; } body.home-v2 .nh-dcard h3 { font-size: 1.4rem; } /* ---- 8. Proven Impact / case study (Figma 2021:1806 / :1820 / :1831) -- green tab pills swipe horizontally; clicking one swaps the case content (handled by existing JS, which already runs on mobile). */ body.home-v2 #transformation-stories .nh-sec__title { font-size: 2rem; } body.home-v2 #transformation-stories { padding-bottom: 0 !important; } /* padding-bottom: 0 for these sections (mobile only, per request): Wherever You Are / Recognition / Built.Shipped.Trusted / Led by Experts / Partnering with Brands / Customer Success Stories / Common Questions. */ body.home-v2 #global-reach, body.home-v2 #recognition, body.home-v2 .nh-sec:has(.nh-trust__title), body.home-v2 #leadership, body.home-v2 #happy-clients, body.home-v2 #testimonials, body.home-v2 #contact.nh-faqsec { padding-bottom: 0 !important; } /* "Built. Shipped. Trusted." paragraph left-aligned; "Led by Experts" paragraph left-aligned + wraps (it shipped inline white-space:nowrap = one line). */ body.home-v2 .nh-trust__sub { text-align: left !important; } body.home-v2 #leadership .nh-sec__sub { text-align: left !important; white-space: normal !important; max-width: 100%; } /* paragraph under the heading wraps to multiple lines (was forced one-line) */ body.home-v2 #transformation-stories .nh-sec__sub { white-space: normal !important; max-width: 100%; color: #BDC0CD; font-size: 16px; font-weight: 400; line-height: 150%; } body.home-v2 .nh-impact__tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 12px; margin-bottom: 22px; scrollbar-width: none; -ms-overflow-style: none; } body.home-v2 .nh-impact__tabs::-webkit-scrollbar { width: 0; height: 0; display: none; } /* green tab pills — 10px/12px padding, 10px gap (per request) */ body.home-v2 .nh-tabicon { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: .875rem; line-height: 1.2; } body.home-v2 #transformation-stories .nh-sec__head { margin-bottom: 24px; } body.home-v2 .nh-case { grid-template-columns: 1fr; gap: 22px; } body.home-v2 .nh-case__media { min-height: 200px; } body.home-v2 .nh-case__body { padding: 0; } /* case-study content font sizes per Figma 2021:1830 (on green-tab click) */ body.home-v2 .nh-case__tag { font-size: 1rem; line-height: 1.5; } body.home-v2 .nh-case h3 { font-size: 1.375rem; line-height: 1.2; } body.home-v2 .nh-stat__n { font-size: 1.375rem; line-height: 1.2; } body.home-v2 .nh-stat__l { font-size: .875rem; line-height: normal; } /* Task 4: on mobile, the CTA copy reads "Read case study" (not "Explore more case studies here"). The original text node is collapsed via font-size:0 and replaced by ::before; the 16px arrow svg keeps its fixed size. */ /* match the base `.nh a.nh-case__more` specificity (+!important) so font-size:0 actually collapses the original "Explore more case studies here" text — otherwise both the old label AND the ::before "Read case study" show. */ body.home-v2 .nh a.nh-case__more { font-size: 0 !important; } body.home-v2 .nh a.nh-case__more::before { content: "Read case study"; font-size: 1.125rem; font-weight: 600; } /* ---- 9. Global Reach (Figma 2021:1893 / :2357) --------------------- */ body.home-v2 #global-reach .nh-sec__title { font-size: 2rem; } /* Global heading + paragraph LEFT-aligned per Figma 2021:1893 (was centred). */ body.home-v2 .nh-global .nh-sec__head { text-align: left; margin-left: 0; margin-right: 0; max-width: 100%; } body.home-v2 .nh-global .nh-sec__head .nh-sec__sub { margin-left: 0; margin-right: 0; } /* Task 5a: stat pills redesigned per Figma 2021:1897 — NO outer wrapper bar/ border; each pill is INDIVIDUALLY bordered, separated by a 16px gap, and the row swipes if it overflows. Inactive = 1px #192a42 border + white text; active = cyan gradient fill + 1.6px #55cefe border + black text. */ body.home-v2 .nh-global__pills { max-width: 100%; justify-content: flex-start; } body.home-v2 .nh-seg { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; gap: 16px; border: 0 !important; border-radius: 0 !important; padding: 14px 0; scrollbar-width: none; -ms-overflow-style: none; } body.home-v2 .nh-seg::-webkit-scrollbar { width: 0; height: 0; display: none; } /* trailing inset only (survives an iOS scroll-to-end). No ::before — a leading 0-width item + the 16px gap would push the first pill 16px right of the paragraph, breaking left alignment. */ body.home-v2 .nh-seg::after { content: ""; flex: 0 0 0px; } body.home-v2 .nh-seg__item { flex: 0 0 auto; font-size: 14px; font-weight: 500; line-height: 1.5; padding: 10px 12px; border: 1px solid #192a42; border-radius: 69px; background: transparent; color: #fff; } body.home-v2 .nh-seg__item.is-active { padding: 10px 12px; border: 1.6px solid #55cefe; border-radius: 59px; color: #010202; background: linear-gradient(270deg, #00b3fb 0%, #0695ce 25.96%, #078abe 100%); } /* region cards → horizontal sliding */ body.home-v2 .nh-regions { display: flex; flex-wrap: nowrap; grid-template-columns: none; gap: 20px; text-align: left; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; } body.home-v2 .nh-regions::-webkit-scrollbar { width: 0; height: 0; display: none; } /* region cards per Figma 2021:2357 — 270px wide, 20px padding, 12px radius, left-aligned */ body.home-v2 .nh-region { flex: 0 0 270px; max-width: 270px; padding: 20px; border-radius: 12px; text-align: left; scroll-snap-align: start; } body.home-v2 .nh-region::before { border-radius: 12px; } body.home-v2 .nh-region h4 { font-size: 18px; line-height: 1.5; margin-bottom: 4px; } body.home-v2 .nh-region p { font-size: 14px; font-weight: 500; line-height: 1.5; color: #fff; } body.home-v2 .nh-region__meta { margin-top: 10px; gap: 6px; font-size: 14px; font-weight: 500; color: #fff; justify-content: flex-start; } /* ---- 10. Recognition / Trust / Leaders — one-line sliding cards ----- */ /* Recognition awards (Figma 2021:2387) — auto-slides (JS); NO scroll-snap, which would otherwise snap the small auto-scroll increments back to 0 */ body.home-v2 .nh-awards { display: flex !important; flex-wrap: nowrap; grid-template-columns: none !important; gap: 14px; margin-top: 28px; overflow-x: auto; scroll-snap-type: none; scrollbar-width: none; -ms-overflow-style: none; } body.home-v2 .nh-awards::-webkit-scrollbar { width: 0; height: 0; display: none; } body.home-v2 .nh-mqcard { flex: 0 0 46%; } /* Built. Shipped. Trusted. stats (Figma 2021:2405) */ body.home-v2 .nh-stats3 { display: flex !important; flex-wrap: nowrap; grid-template-columns: none !important; gap: 20px; margin-top: 28px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; } body.home-v2 .nh-stats3::-webkit-scrollbar { width: 0; height: 0; display: none; } body.home-v2 .nh-stats3 > * { flex: 0 0 80%; max-width: 320px; scroll-snap-align: start; } /* stat cards per Figma 2021:2401 — 16px padding, 20px inner gap, 32px number */ body.home-v2 .nh-statcell { padding: 16px; gap: 20px; } body.home-v2 .nh-statcell__n { font-size: 32px; } /* Led by Experts cards (Figma 2021:2422) */ body.home-v2 .nh-leaders { display: flex !important; flex-wrap: nowrap; grid-template-columns: none !important; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } body.home-v2 .nh-leaders::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Task 5b: leader cards per Figma 2021:2422 — the photo FILLS the card and the name/role/bio are OVERLAID at the bottom over a dark gradient, with a red accent bar and the LinkedIn icon top-right. (Replaces the earlier photo-on-top / text-below stacking.) Cards swipe horizontally. */ body.home-v2 .nh-leader { flex: 0 0 85%; max-width: 330px; height: 400px !important; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 20px; overflow: hidden; border-radius: 12px; border: 1px solid #414141; } body.home-v2 .nh-leader__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* dark gradient for legibility (Figma: transparent 40% → rgba(0,0,0,.8) ~83%) */ body.home-v2 .nh-leader::after { display: block; content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: 12px; background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.8) 83%); } body.home-v2 .nh-leader__inner { position: relative; z-index: 3; align-items: stretch; gap: 12px; padding: 0; width: 100%; } body.home-v2 .nh-leader__qm { display: none; } /* Figma 2021:2422 has no quote mark */ body.home-v2 .nh-leader__rule { flex: 0 0 2px; width: 2px; height: auto; align-self: stretch; background: #c21c1c; } body.home-v2 .nh-leader__col { gap: 10px; justify-content: center; } body.home-v2 .nh-leader__txt { gap: 4px; } body.home-v2 .nh-leader__name { font-size: 19px; line-height: 26px; font-weight: 500; } body.home-v2 .nh-leader__role { font-size: 12px; font-style: italic; font-weight: 400; line-height: 1.5; } body.home-v2 .nh-leader__body { font-size: 10px; line-height: 1.5; } /* Partnering with Brands per Figma 2021:2444 — 2-col grid, 20px gap, 90px tiles */ body.home-v2 .nh-brands .nh-sec__title { font-size: 2rem; white-space: normal !important; } body.home-v2 .nh-brands__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } body.home-v2 .nh-brands__cell { height: 90px; padding: 20px 14px; } /* ---- 11a. Customer Success Stories (Figma 2021:2461 / :2465) -------- horizontal sliding WHITE cards; hide the media image, cyan wrapper, dots */ body.home-v2 #testimonials .nh-sec__title { font-size: 2rem; } body.home-v2 .nh-stories { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } body.home-v2 .nh-stories::-webkit-scrollbar { width: 0; height: 0; display: none; } /* flex column + stretch so every card is the SAME height (tallest in the row) */ body.home-v2 .nh-stories { align-items: stretch; } body.home-v2 .nh-story { display: flex !important; flex-direction: column; grid-template-columns: none; flex: 0 0 86%; max-width: 340px; scroll-snap-align: start; } body.home-v2 .nh-story__media { display: none; } body.home-v2 .nh-story__cardwrap { flex: 1 1 auto; padding: 0; border: 0; background: none; min-height: 0; border-radius: 12px; } /* white testimonial card per Figma 2021:2466 — 16px padding, 12px radius, 1px #192a42 */ body.home-v2 .nh-story__card { padding: 16px; height: 100%; border: 1px solid #192a42; border-radius: 12px; } body.home-v2 .nh-story__qicon { width: 26px; height: 24px; } body.home-v2 .nh-story__title { font-size: 18px; line-height: 24px; margin-bottom: 14px; } body.home-v2 .nh-story__text { font-size: 16px; line-height: 24px; } body.home-v2 .nh-story__author { padding-top: 14px; gap: 14px; } body.home-v2 .nh-story__author img { width: 54px; height: 54px; border-radius: 100px; border: 1px solid #002054; } body.home-v2 .nh-story__name { font-size: 16px; font-weight: 700; line-height: 1.5; } body.home-v2 .nh-story__role { font-size: 14px; color: #6b7280; } body.home-v2 .nh-story__dots { display: none; } /* ---- 11b. Roadmap quiz / FAQ ---------------------------------------- */ body.home-v2 .nh-testi { grid-template-columns: 1fr; } /* "Build Your Enterprise Transformation Roadmap" — remove the section bg image and the quiz panel's background + padding (per request); resize heading + questions; radio-option text always white with NO hover effect. */ body.home-v2 .nh-roadmap__bg { display: none !important; } body.home-v2 .nh-roadmap__panel { background: none !important; padding: 0 !important; border-radius: 0 !important; } body.home-v2 .nh-roadmap__title { font-size: 1.5rem !important; } /* per Figma 2021:2511 — step label 18px/700 cyan, question 18px, options 14px w/ 14px 20px padding */ body.home-v2 .nh-roadmap__step { font-size: 1.125rem; font-weight: 700; } body.home-v2 .nh-roadmap__q { font-size: 1.125rem !important; } body.home-v2 .nh-ropt { color: #fff !important; padding: 14px 20px; font-size: 14px; } body.home-v2 .nh-ropt:not(.is-sel):hover { color: #fff !important; border-color: rgba(255,255,255,.5) !important; } /* FAQ accordion items per Figma 2021:2548 — 16px padding (from 24px) */ body.home-v2 .nh-acc__item { padding: 16px; } body.home-v2 .nh-acc__a p { padding-top: 14px; } /* ---- 11c. Our Latest Blog (Figma 2021:2579) — sliding cards --------- */ body.home-v2 .nh-blog { display: flex; flex-direction: row; flex-wrap: nowrap; grid-template-columns: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } body.home-v2 .nh-blog::-webkit-scrollbar { width: 0; height: 0; display: none; } /* blog card per Figma 2021:2580 — 16px padding, 20px gap, 1px #192a42 border */ body.home-v2 .nh-post { flex: 0 0 86%; max-width: 340px; scroll-snap-align: start; padding: 16px; gap: 20px; border: 1px solid #192a42; } /* Remove the "View all blogs" button on mobile. The blog section keeps its 48px bottom padding and the next section (Culture) drops its top padding (below), so the gap between the blog and the section below it is exactly 48px. */ body.home-v2 .nh-blog__cta { display: none !important; } /* ---- 11d. Culture heading (Figma 2021:2619) — left-aligned, 3 lines -- */ /* Culture is the last section before the footer; drop its bottom padding so the image meets the footer. Also drop its TOP padding so the gap up to the blog section above it is just the blog's 48px bottom padding (= a clean 48px). */ body.home-v2 .nh-culture { text-align: left; padding-top: 0 !important; padding-bottom: 0 !important; } body.home-v2 .nh-culture .nh-sec__head { text-align: left; max-width: 100%; margin-left: 0; margin-right: 0; } body.home-v2 .nh-culture p.nh-sec__sub { text-align: left; margin-left: 0; margin-right: 0; } body.home-v2 .nh-culture__title { text-align: left; font-size: clamp(1.7rem, 7.5vw, 2rem) !important; white-space: normal !important; } /* Task 7: culture image per Figma 2021:2617 — a rounded 12px card, 450px tall, image cover-cropped (was shown full-width at natural aspect). 20px from the copy above. */ /* On mobile the culture photo is REPLACED by the Figma 2021:2617 image (QSS anniversary), shown as a 450px rounded cover card. The desktop is hidden and the Figma asset is painted as the wrapper background, so this is mobile-only + reversible (delete the asset + these rules to revert). */ body.home-v2 .nh-culture__img { margin: 20px 16px 0; height: 450px; border-radius: 12px; background: url(/assets/pages/home/culture-mobile.webp) center / cover no-repeat; } body.home-v2 .nh-culture__img img { display: none !important; } /* ---- 12. Footer (Figma 2021:2629) ---------------------------------- logo + socials on one row; link columns in a 2-col grid; address full width; Clutch/certs at the bottom. */ body.home-v2 .nh-footer { padding: 56px 0 28px; } body.home-v2 .nh-footer__top { display: flex; flex-direction: column; gap: 36px; } body.home-v2 .nh-footer__left { display: contents; } body.home-v2 .nh-footer__brand { order: 1; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; width: 100%; } body.home-v2 .nh-footer__right { order: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 16px; width: 100%; } body.home-v2 .nh-footer__row { display: contents; } /* footer column headings ("AI Solutions & Consulting", "Healthcare & Compliance", …) on ONE line — nowrap + a font size that fits the column. */ body.home-v2 .nh-fcol h4 { white-space: nowrap; font-size: .825rem; } body.home-v2 .nh-footer__addr { grid-column: 1 / -1; } /* Clutch badge — centred, with the divider line above it (Figma) */ body.home-v2 .nh-footer__clutch { order: 3; width: 100%; align-items: center; text-align: center; border-top: 1px solid rgba(255,255,255,.14); padding-top: 30px; padding-bottom: 16px; gap: 12px; } /* Clutch wordmark → 24px tall (Figma) */ body.home-v2 .nh-clutch__word { height: 24px; } body.home-v2 .nh-footer__divider { display: none; } /* bottom — ISO cert pills row + copyright, both stacked & centred */ body.home-v2 .nh-footer__bottom { justify-content: center; margin-top: 6px; } body.home-v2 .nh-footer__bottominner { width: 100% !important; flex-direction: column; align-items: center; gap: 18px; } body.home-v2 .nh-footer__certs { order: 1; justify-content: center; flex-wrap: wrap; } body.home-v2 .nh-footer__copy { order: 2; flex: none; text-align: center; } /* ---- 13. CTA buttons → full width on mobile ------------------------- */ body.home-v2 .nh-hero__chat { width: 100%; } /* prominent "Book a Discovery Call" / section CTAs span the full width. EXCLUDE the header + sticky-tabs CTAs (hidden on mobile) so this doesn't re-reveal them. */ body.home-v2 .nh-btn--discovery:not(.nh-header__cta):not(.nh-tabs__cta), body.home-v2 .nh-rm-cta { display: flex !important; width: 100%; box-sizing: border-box; justify-content: center; align-items: center; text-align: center; } /* "See How We Deliver Impact" (brands) + "People Also Ask" (FAQ) buttons — FULL-WIDTH; 48px radius, cyan #00B3FB fill, inset shadow. */ body.home-v2 .nh-brands__cta, body.home-v2 .nh-faq__cta, body.home-v2 .nh-brands__cta:hover, body.home-v2 .nh-faq__cta:hover { display: flex !important; width: 100% !important; max-width: 100%; box-sizing: border-box; padding: 10px 16px !important; justify-content: center; align-items: center; gap: 10px; align-self: stretch; font-size: 14px !important; font-weight: 600 !important; line-height: 24px !important; border-radius: 48px !important; background: #00B3FB !important; color: #010202 !important; box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.30) !important; transform: none !important; } /* Smooth fade-in replayed on each category/tab switch (Consult phases + Story impact tabs) by the MOBILE-SWITCH-FADE script. */ body.home-v2 .nh-swap-anim { animation: nhSwapFade .38s ease both; } /* Task 6: FAQ — remove the extra spacing after the intro paragraph. On mobile the 2-col .nh-faq grid collapses to one column but kept the desktop gap:100px, which became a huge row gap between the paragraph and the first question. Figma 2021:2544 uses 20px between the head block and the list. */ body.home-v2 .nh-faq { gap: 20px; } /* Reduce the large space above the "Common Questions, Expert Answers" heading: the FAQ section's own 48px top padding stacked on the previous (#roadmap) section's 48px bottom (~96px total). Drop the FAQ top padding so the heading sits closer; the roadmap's bottom padding still gives a clean ~48px break. */ body.home-v2 #contact.nh-faqsec { padding-top: 0 !important; } } /* ============================================================================ Healthcare Products / Compliance & Security / Operations & Tracking — mobile carousel (Figma 2021:1576). Text on top, plain links with → arrows, a contained image with ←/→ nav buttons, and the 01…0X progress bar below. Uses the desktop cross-fade animation. Placed at the JS mobile breakpoint (≤768px) so it overrides the inline "stacked" fallback in index.html. ============================================================================ */ /* injected ←/→ buttons exist in the DOM at all widths; only shown on mobile */ body.home-v2 .nh-prod__navbtn { display: none; } @media (max-width: 768px) { body.home-v2 .nh-prodsec .nh-prod-pin { height: auto !important; } body.home-v2 .nh-prodsec .nh-prod-stage { position: relative !important; height: auto !important; min-height: 0 !important; overflow: visible !important; display: grid; grid-template-columns: 1fr; padding: 0 16px; } /* stack the 3 slides in one grid cell so they cross-fade */ body.home-v2 .nh-prodsec .nh-prod-slide { position: relative !important; inset: auto !important; grid-column: 1; grid-row: 1; min-height: 0 !important; display: flex; flex-direction: column; opacity: 0 !important; visibility: hidden !important; transition: opacity .55s ease, visibility .55s; } body.home-v2 .nh-prodsec .nh-prod-slide.is-active { opacity: 1 !important; visibility: visible !important; } /* text block first */ /* flex:none + justify-start (override base flex:1/justify-center) so the links sit directly above the image with the SAME gap on every slide — otherwise a grown, vertically-centred inner adds variable space on shorter-subtitle slides. */ body.home-v2 .nh-prodsec .nh-prod__inner { order: 1; padding: 0 !important; min-height: 0; gap: 0; max-width: none; flex: 0 0 auto; justify-content: flex-start; } body.home-v2 .nh-prodsec .nh-prod__head { margin-bottom: 16px; max-width: 100%; } body.home-v2 .nh-prodsec .nh-sec__title { font-size: 2rem; } body.home-v2 .nh-prodsec .nh-sec__sub { font-size: 1rem; } /* links → plain white rows with a → arrow (Figma), not the gold buttons */ body.home-v2 .nh-prodsec .nh-prod__links { gap: 14px; } body.home-v2 .nh-prodsec .nh-prod-slide .nh-prod__links a { width: 100% !important; max-width: 100% !important; justify-content: space-between; gap: 16px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; } body.home-v2 .nh-prodsec .nh-prod-slide .nh-prod__links a:last-child { padding-bottom: 20px !important; } body.home-v2 .nh-prodsec .nh-prod-slide .nh-prod__links a span { flex: 1 1 auto; width: auto !important; color: #fff !important; font-size: .875rem !important; } body.home-v2 .nh-prodsec .nh-prod-slide .nh-prod__links a i { width: 18px !important; height: 18px !important; border-radius: 0 !important; background: none !important; color: #fff; } body.home-v2 .nh-prodsec .nh-prod-slide .nh-prod__links a i svg { width: 16px; height: 16px; } body.home-v2 .nh-prodsec .nh-prod-slide .nh-prod__links a:hover i { background: none !important; } /* no hover effect on the links — text stays white (no cyan), icon unchanged */ body.home-v2 .nh-prodsec .nh-prod-slide .nh-prod__links a:hover span, body.home-v2 .nh-prodsec .nh-prod-slide .nh-prod__links a:hover { color: #fff !important; } body.home-v2 .nh-prodsec .nh-prod-slide .nh-prod__links a:hover i svg { color: #fff !important; stroke: #fff !important; } /* image → contained card below the text, with ←/→ nav overlaid */ body.home-v2 .nh-prodsec .nh-prod__bg { position: relative; order: 2; margin-top: 8px; height: 190px !important; border-radius: 14px; overflow: hidden; } body.home-v2 .nh-prodsec .nh-prod__bg img { height: 190px !important; width: 100% !important; object-fit: cover !important; } body.home-v2 .nh-prodsec .nh-prod__bg::after { background: linear-gradient(180deg, rgba(5,5,43,.12), rgba(5,5,43,.42)) !important; } body.home-v2 .nh-prodsec .nh-prod__navbtn { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); background: rgba(5,5,43,.5); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: background .2s, border-color .2s; } body.home-v2 .nh-prodsec .nh-prod__navbtn:hover { background: rgba(5,5,43,.78); border-color: var(--nh-cyan); } body.home-v2 .nh-prodsec .nh-prod__navbtn--prev { left: 12px; } body.home-v2 .nh-prodsec .nh-prod__navbtn--next { right: 12px; } body.home-v2 .nh-prodsec .nh-prod__navbtn svg { width: 16px; height: 16px; } /* progress bar → shown, static, below the image (Figma 01 ▸ 0X) */ body.home-v2 .nh-prodsec .nh-prod__carousel { display: flex !important; position: static !important; transform: none !important; grid-column: 1; grid-row: 2; width: 100%; max-width: 100%; left: auto; bottom: auto; margin-top: 26px; } } /* ============================================================================ Mobile slide-in MENU — 3 levels (Figma 2765-151 / 2765-520 / 2765-882) menus → sub-menus → categories, in one right-side panel. The panel content is generated by JS from the desktop mega-menu (single source of truth) — see the marked