/* ============================================================================ HOME-V2 DESKTOP RESPONSIVE BAND — 1100px … 1600px Reversible: delete this file + its (between DESKTOP-1100-1600 markers in index.html) to fully revert. Every rule is scoped body.home-v2 and lives inside @media (min-width:1100px) and (max-width:1600px). Values are tuned so that AT 1600px they equal the base render (no jump crossing 1600). ≥1601px is never touched. Below 1100px keeps the existing tablet/mobile behavior. LEDGER (pass status — update each pass): [1] Header nav/mega-menu ............ DONE (pass2: mega-menu already capped, nav flexes; + user-req: nav labels wrapped 2 lines below 1336px → font 14px+nowrap @ (1025..1335.98px); single-line & no overflow @1100/1300; ≥1336 stays 16px) [2] Sticky sub-nav (7 links) ........ DONE (pass2: gap→clamp(24px,2.4vw,34px)=34@1600; single row to 1100; 1600 gate PASS) [3] Hero side-by-side + media ....... DONE (pass2: override 1280 column-stack → row kept to 1100; art SVG self-scales. + user-req: 1280 rule centred .nh-hero__l1 via auto margins → zeroed them; all 3 heading lines left @16 in 1280..1100, @100 unchanged @1600; gate PASS) [4] Consult row 520/640 ............. DONE (pass2: minmax(0,520)/(0,640) already shrink to fit; no overflow; scales proportionally — no change) [5] Services + AI rows / cards2 ..... DONE (pass1: 550px→min(550px,39.2857%); cards2 1100: 470→600, 1300: 670→722; 1600 gate PASS) [6] Domain cards 385px .............. TODO (fixed 385 in horiz-scroller; scale or accept) [7] Product carousel / prod text .... DONE (user-reported: prod__inner lost its side gutter below 1432 → flush left; fixed via padding max(16px,(100vw-1432)/2)=84@1600, 16 below; head.left 1600:84 1100:16; gate PASS. 602 progress bar accepted as-is) [8] Mid sections (reach…culture) .... TODO (regions/stats3 scale to gutters; check fixed card widths + gaps) [9] Footer 380px left + 6-col ....... DONE (pass1: 380px→min(380px,27.143%); right 1100: 656→746; 1600 gate PASS) [10] Images / SVG / decorative ....... TODO (bg-img/glow/marquee overflow is by-design & present at 1600 too — leave) [11] Global sweep (padding/gutters) .. TODO (final visual sweep across widths) [+] Hero→AI dead gap ............... DONE (user-req: hidden sticky .nh-tabs reserved 74px between hero & #ai-innovation → margin-bottom:-74px, global; gap 74→0 all widths; scroll-reveal intact via offsetTop/offsetHeight; 1600 x-gate PASS) NOTE: 641–1024 range intentionally LEFT AS-IS (base tablet/collapse behavior) per user request — no keep-desktop-composition overrides here. This file only touches 1100–1600. ============================================================================ */ /* Header nav labels ("AI & Innovation", "Insights & Company") wrap to two lines once the row tightens. Per request: below 1336px drop the nav link font to 14px (and nowrap so they can't wrap). Scoped >=1025px so it stays above the hamburger breakpoint and never affects >=1336px (so 1600 is untouched). */ @media (min-width:1025px) and (max-width:1335.98px) { body.home-v2 .nh-nav__link { font-size: 14px; white-space: nowrap; } } /* Global (all desktop widths): the sticky section tab bar (.nh-tabs) sits in flow between the hero and #ai-innovation and is --hidden (translateY(-100%)+opacity:0) at the top of the page, yet still RESERVED its 74px height → an empty navbar- sized gap below the hero. Pull it out of flow with a matching negative margin so it overlays instead of reserving space (same pattern .nh-subnav-bar uses). The scroll-reveal is untouched: the JS keys off tabs.offsetTop / offsetHeight, which margin-bottom does not change. display:none on mobile makes this a no-op there. */ body.home-v2 .nh-tabs { margin-bottom: -74px; } @media (min-width:1100px) and (max-width:1600px) { /* [5] Services + AI rows: the fixed 550px text column crushed the 2-card grid (cards fell 365px→~199px by 1100). Make it proportional — min(550px, 39.2857%) equals 550px at the 1600 container (1400px) and scales down with it, so the card grid keeps the 1600 ratio. */ body.home-v2 .nh-svc, body.home-v2 .nh-ai__row { grid-template-columns: min(550px, 39.2857%) minmax(0, 1fr); } /* [5b] Software Engineering "Services" (+ Domain/green) card grid: the base .nh-techsec--cyan/.nh-techsec--green .nh-cards2 uses a FIXED 150px left pad + justify-content:center — tuned for >=1600, where the right column is wide. In this band that fixed pad shoved the 2-card grid off the right edge (cards clipped) and opened a dead gap beside the text column (see 1100/1300). Make the left pad proportional: 150px at 1600 (== base, continuous across the boundary) easing to 0 at 1100, so the 2x2 cards sit as a balanced grid with even gutters, matching the design image. Styling only — markup/content/decorative bg untouched. */ body.home-v2 .nh-techsec--cyan .nh-cards2, body.home-v2 .nh-techsec--green .nh-cards2 { padding-left: max(0px, calc((100vw - 1100px) * 0.30)); } /* [9] Footer: 380px left column was fixed while the 3-col link rows collapsed. Make left proportional — min(380px, 27.143%) = 380px at the 1600 container and scales down, giving the link columns room instead of cramping/wrapping. */ body.home-v2 .nh-footer__left { width: min(380px, 27.143%); } /* [2] Sticky sub-nav: 7 links + 34px gap barely fit at 1100 and risk wrapping. Scale the gap — clamp caps at 34px (=base) at 1600 and eases to ~26px at 1100 so the row stays single-line. */ body.home-v2 .nh-subnav { gap: clamp(24px, 2.4vw, 34px); } /* [3] Hero: base collapses to a stacked column at <=1280. Keep it side-by-side down to 1100 (composition parity with 1600) by overriding just the 1280 stack declarations. The art is an SVG (max-width:667; width:100%) that already scales itself, so no media resize is needed. At >=1281 these equal the base row layout, so the 1600 render is unchanged. */ body.home-v2 .nh-hero__inner { flex-direction: row; gap: clamp(36px, 4.5vw, 72px); align-items: center; } body.home-v2 .nh-hero__left { align-items: flex-start; text-align: left; } body.home-v2 .nh-hero__right { width: auto; } /* the <=1280 rule centres the fit-content first line (.nh-hero__l1) via auto side-margins, which auto-margins override text-align/align-items. Zero them so the whole heading is left-aligned across the band (base is already 0 at >1280, so 1600 is unchanged). margin-bottom left intact. */ body.home-v2 .nh-hero__l1 { margin-left: 0; margin-right: 0; } /* [7/8] Product carousel text (.nh-prod__inner is .nh-wrap but overrides the wrap's 0 16px padding with 80px 0, so its side gutter came ONLY from the max-width:1432 centering margin. Below ~1432 that margin is 0 → text sits flush to the left edge (reported at 1100). Replace the centering gutter with a padding gutter: max(16px, (100vw-1432)/2) = 84px at 1600 (identical content box: left 84, width 1432) and floors at 16px below 1432, matching every other section. */ body.home-v2 .nh-prodsec .nh-prod__inner { max-width: none; padding-left: max(16px, calc((100vw - 1432px) / 2)); padding-right: max(16px, calc((100vw - 1432px) / 2)); } } /* ============================================================================ USER-SUPPLIED 1100–1600px BAND (added below the band above; overrides it on overlaps since it comes later). Corrected from the source: media query made valid (`screen and (...)`), and `.body.home-v2 .nh-ai` -> `body.home-v2 .nh-ai`. ============================================================================ */ @media screen and (min-width: 1100px) and (max-width: 1600px) { body.home-v2 .nh-tabs__inner { padding: 8px 16px; gap: 10px; } body.home-v2 a.nh-btn--discovery, body.home-v2 button.nh-btn--discovery, body.home-v2 .nh-btn--discovery { font-size: 13px; line-height: 20px; padding: 7px 20px 9px; } body.home-v2 .nh-tab.is-active::after { bottom: -8px; } body.home-v2 .nh-subnav { gap:20px; } body.home-v2 .nh-subnav a { font-size:.875rem; } body.home-v2 .nh-hero { padding: 116px 0 60px; } body.home-v2 .nh-ai { padding: 60px 0; } body.home-v2 .nh-ai__head { margin-bottom:36px; } body.home-v2 .nh-ai__row { gap:24px; } body.home-v2 .nh-num-list { margin-bottom:24px; gap:14px; } body.home-v2 .nh-num { font-size:1rem; gap:12px; } body.home-v2 .nh-num__n { font-size: .875rem; width: 30px; height: 30px; } body.home-v2 #ai-innovation .nh-ai__panels .nh-ai__links, body.home-v2 #industries .nh-ai__panels .nh-ai__links { gap: 12px; } body.home-v2 #ai-innovation .nh-ai__links a, body.home-v2 #industries .nh-ai__links a { font-size: 14px; line-height: 18px; gap: 12px; width: 325px; min-height: 38px; padding: 8px 16px; } body.home-v2 .nh-techsec--cyan .nh-num-list { margin-top:24px; gap:12px; } body.home-v2 .nh-svc { gap:36px; } body.home-v2 .nh-cards2 { gap:16px; } body.home-v2 .nh h3.nh-card__title { font-size:16px; } body.home-v2 .nh-techsec--cyan .nh-techcards::before { left: calc(50% - 160px); width: min(460px, 92%); } body.home-v2 .nh-prod__inner { padding-top:60px; padding-bottom:60px; } body.home-v2 .nh-prod__head { margin-bottom:24px; } body.home-v2 .nh-prod__links { gap:12px; } body.home-v2 .nh-prod-slide:is([data-slide="0"],[data-slide="1"],[data-slide="2"]) .nh-prod__links a { padding: 10px 20px; min-height:42px; } body.home-v2 .nh-prod-slide:is([data-slide="0"],[data-slide="1"],[data-slide="2"]) .nh-prod__links a span { font-size:1rem; } body.home-v2 .nh-techsec--green .nh-techcards::before { left: calc(50% - 160px); width: min(460px, 92%); } body.home-v2 .nh-domain__cards { gap:20px; } body.home-v2 .nh-domain__pin::after { left: 54%; width: 460px; height: 515px; } body.home-v2 .nh-dcard { flex: 0 0 480px; width: 480px; gap: 14px; padding: 20px; } body.home-v2 .nh-dcard h3 { font-size: 1.5rem; } body.home-v2 .nh-dcard__list { gap:6px; } body.home-v2 .nh-sec__head { gap:32px; } body.home-v2 .nh-impact__tabs { gap:10px; } body.home-v2 .nh-impact__tabs { gap:24px; } body.home-v2 .nh-tabicon { padding: 8px 20px; line-height: 1.25; } body.home-v2 .nh-case { gap:32px; } body.home-v2 .nh-case__body { gap:16px; } body.home-v2 .nh-case h3 { font-size:1.5rem; } body.home-v2 .nh-seg__item { padding: 6px 20px; font-size:15px; } body.home-v2 .nh-seg__item.is-active { } body.home-v2 .nh-regions { gap: 16px; } body.home-v2 .nh-region { padding: 20px; } body.home-v2 .nh-region { padding: 20px; } body.home-v2 .nh-map { margin: 24px auto 32px; max-width:760px; } body.home-v2 .nh-awards { gap: 20px; margin-top: 32px; } body.home-v2 .nh-stats3 { gap: 24px; margin-top: 32px; } body.home-v2 .nh-statcell { padding: 20px; gap: 20px; } body.home-v2 .nh-statcell__n { font-size:2rem; } body.home-v2 .nh-statcell__n span { font-size: 1.325rem; } body.home-v2 .nh-leader { padding:16px; height: 415px; } body.home-v2 .nh-leader__inner { align-items: flex-start; gap:10px; } body.home-v2 .nh-leader__name { font-size: 14px; line-height: 20px; } body.home-v2 .nh-leader__role { font-size:13px; } body.home-v2 .nh-leader__body { line-height:18px; } body.home-v2 .nh-leader__qm { font-size: 40px; line-height: 40px; flex: 0 0 20px; width: 20px; } body.home-v2 .nh-brands__cta { margin-top:0; } body.home-v2 .nh-story { gap:24px; } body.home-v2 .nh-story__card { padding: 24px; } body.home-v2 .nh-story__qbody { gap:14px; } body.home-v2 .nh-story__author { padding-top: 14px; } body.home-v2 .nh-roadmap__panel { width: 640px; } body.home-v2 .nh-faq { gap:48px; } body.home-v2 .nh-blog { gap:24px; } } /* ============================================================================ USER-REQUESTED DESKTOP TWEAKS (>=1025px only; mobile keeps its own spacing). 1) remove the Healthcare-Products "Q / vertical-lines" watermark 2) "Wherever You Are, We Deliver" padding-top -> 0 3) zero the gap between #global-reach cards and #recognition 4) padding-top -> 0 on Built.Shipped.Trusted, Led by Experts, Partnering with Leading Brands, Customer Success Stories, Our Latest Blog Reversible: delete this whole @media block. ============================================================================ */ @media (min-width:1025px){ /* 1) Healthcare Products (#solutions.nh-prodsec): drop the decorative Q watermark */ body.home-v2 .nh-prod-slide:is([data-slide="0"],[data-slide="1"],[data-slide="2"])::after{content:none!important} /* 2) "Wherever You Are, We Deliver" — no top padding */ body.home-v2 #global-reach{padding-top:0!important} /* 4) padding-top -> 0 on these sections (two are id-less, matched by a unique child) */ body.home-v2 .nh-sec:has(.nh-trust__title), /* Built. Shipped. Trusted. */ body.home-v2 #leadership, /* Led by Experts Who Have Done It Before */ body.home-v2 #happy-clients, /* Partnering with Leading Brands Across the Globe */ body.home-v2 #testimonials, /* Customer Success Stories */ body.home-v2 .nh-sec:has(.nh-blog){padding-top:0!important} /* Our Latest Blog */ }