inside it, only a bare text node. Bare text inherits the section body type (18px / 400 / 27px line-height) instead of the pill type (16px / 600 / 16px), which made that pill 27+20 = 47px tall. The row is a flex container at the default align-items:stretch, so BOTH siblings stretched to 47px as well. One missing tag moved an entire row. Also stripped two stray and normalised label case (organic growth -> Organic Growth, Brand building -> Brand Building). CAUSE 2 (CSS, fixed below): pill height was derived entirely from the text line box, and .hero-tag-btn-wrap is really a leftover marquee track: min-width/max-width 100%, overflow:hidden, flex-wrap:nowrap, children at flex-shrink 1. That plumbing belongs to IX2 list a-7 "Tag Scroll" (TRANSFORM_MOVE x 0 -> 100% over 20s, looping) which is bound by event e-7 to a specific hero element id that does not exist on this page. Verified live: 0 a-7 instances in the ix2 store. So on the teaser it does nothing except make pills squeeze and then clip as labels get longer. FIX: give the pill its own box (fixed min-height, centred content) and its own type, so height stops tracking the text; stop pills shrinking; let the row wrap instead of squeezing. Typography is declared on the PILL, not only on the inner
, so a pill authored without the
wrapper still renders identically and Cause 1 cannot come back. Left alone deliberately: the wrap's overflow:hidden and min/max-width:100% (harmless once the row wraps), and justify-content, so the template's own centring at <=767 still applies. ========================================================================= */ .teaser-section .hero-tag-btn-wrap._03{ flex-wrap: wrap; /* long labels move to a 2nd line, never squeeze */ align-items: flex-start; /* a rogue tall pill can no longer inflate a row */ align-content: flex-start; /* row-gap intentionally NOT set: the template's own grid-row-gap already tracks the column gap (10px, 20px at <=479), so wrapped rows stay symmetric with the horizontal spacing at every breakpoint. */ } .teaser-section .hero-tag-btn._03{ flex: 0 0 auto; /* was 0 1 auto: pills shrank as text grew */ display: inline-flex; align-items: center; justify-content: center; min-height: 36px; /* the height cards 01 and 03 already had */ padding: 0 16px; /* vertical padding replaced by min-height */ max-width: 100%; white-space: nowrap; font-family: var(--urbanist); color: var(--black); font-size: 16px; font-weight: 600; line-height: 1; } .teaser-section .hero-tag-btn._03 .hero-tag-btn-text{ font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; min-width: 0; /* an over-long label ellipsises inside its own */ overflow: hidden; /* pill instead of blowing out the text column */ text-overflow: ellipsis; } /* ============================================================================= 21. PORTFOLIO TEASER - TAG PILLS SLIDE INSTEAD OF WRAPPING (2026-08-04) Section 20 above made an over-long tag row WRAP to a second line. The ask changed: more tags are coming, and they should slide as a loop instead. Structure is built by custom-js/home.js at runtime (two identical tracks in the wrap) so the Elementor markup keeps ONE copy of each pill - see that file for why, and for the fits/overflows and reduced-motion rules. Section 20 stays exactly as it is. Its flex-wrap:wrap is now the no-JS fallback: without this marquee an over-long row still shows every tag on a second line rather than clipping it behind overflow:hidden. ========================================================================== */ /* THE RULE THAT MAKES [does it overflow?] ANSWERABLE AT ALL - do not drop it. .teaser-wrap (the card's whole text column) is shrink-to-fit, so it sizes to its widest child. Without this, adding tags does not overflow the row, it WIDENS THE CARD - up to whatever space is going - and the marquee can never trigger. Measured: 6 pills grew card 01's column from 426 to 445px and the row still counted as fitting. Size containment takes the pills out of the parent's intrinsic width, so the row is 100% of a column sized by the headline / subtitle / body copy, and extra tags overflow instead of stretch. Zero visual change at today's 3 tags per card - verified identical widths before and after (426.09 / 425 / 445.3, all three driven by their subtitle). It also stops a single long tag from widening a card, which section 20 could not prevent. Falls back to the old stretch-then-wrap on pre-2022 Safari. */ .teaser-section .hero-tag-btn-wrap._03{ contain: inline-size; } .enq-tagmq-track{ display: flex; flex: 0 0 auto; /* must NOT shrink to the wrap, or there is nothing to scroll */ flex-wrap: nowrap; align-items: center; column-gap: var(--enq-tagmq-gap, 10px); /* set inline by the JS from the wrap's own computed gap: 10px, 20px at <=479 */ } .enq-tagmq-track .hero-tag-btn._03{ max-width: none; /* section 20 caps pills at 100%, which resolves against a shrink-to-fit track here and can squeeze the last one. Inside a marquee a pill always sizes to its own label. */ } .teaser-section .hero-tag-btn-wrap._03.enq-tagmq-on{ flex-wrap: nowrap; /* only while the loop is live */ justify-content: flex-start;/* the template centres this row at <=767; centring an OVERFLOWING row pushes its left edge off the card and the first tag is never seen */ overflow: hidden; /* the template already sets this - restated so the block stands alone if that rule is ever touched */ } .enq-tagmq-on .enq-tagmq-track{ animation-name: enq-tagmq-slide; animation-duration: var(--enq-tagmq-dur, 18s); /* inline per row: constant px/s, so a long row is not a fast row */ animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform; } .enq-tagmq-on:hover .enq-tagmq-track{ animation-play-state: paused; } /* Travel is one track PLUS one gap. A bare -100% lands copy 2 one gap to the right of copy 1's start and the loop visibly hitches every lap - the same bug IX2 ships in the client-logo marquee (section 18). */ @keyframes enq-tagmq-slide{ from{ transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-100% - var(--enq-tagmq-gap, 10px)), 0, 0); } } /* Belt and braces: the JS tears the marquee down entirely for reduced motion (pausing it would clip the later tags out of reach). This only matters if the class survives without the JS. */ @media (prefers-reduced-motion: reduce){ .enq-tagmq-on .enq-tagmq-track{ animation: none; } } /* ===== 18. HERO HEADING BLOCK -- ONE LEFT AXIS AT 991px AND BELOW ------ (2026-08-04) Measured bug at 390px: global.css (max-width:991px) gives .hero-left align-items:flex-start, so .hero-heading-wrap SHRINK-WRAPS instead of filling. Its width then came from the widest child -- the kicker, capped at max-width:320px in section 10 -- so the wrap was 320px inside a 350px container, pinned left: a 20px gutter on the left and 50px on the right. Webflow still sets .hero-heading{text-align:center} at max-width:991px, so the two display lines centred INSIDE that off-centre box (axis x=180 against a viewport centre of x=195) while the kicker stayed left-packed. Three lines, three axes. Preet chose flush-left, to match the 992px-and-up composition in section 15, so this is the mobile/tablet counterpart of that section: give the wrap the full column and put every line on the same left edge. Verified 360 / 390 / 900: every box runs 20 to (vw minus 20), ink starts at x=20 on both display lines, the dash leads the kicker at x=20 with its text hanging at x=56, and scrollWidth equals clientWidth (no overflow). The 320px kicker cap in section 10 is inert now -- the wrap is identical with and without it -- so it was left alone. */ @media screen and (max-width:991px){ .hero-heading-wrap{ width: 100%; text-align: left; } .hero-heading-wrap .hero-heading, .hero-heading-wrap .hero-heading._03{ text-align: left; } } /* ===== 19. HERO BLOCK BOTTOM-ANCHORED AT 991px AND BELOW ------------ (2026-08-04) Webflow zeroes .hero-row padding-bottom at 991px and below and switches it to justify-content:center, so the heading block floated in the middle of the hero: measured at 390px it sat 127.8px above the hero bottom edge and 131.8px below the sticky header. Preet asked for it near the bottom edge, which is also what the desktop composition does (Webflow base is align-items:flex-end + padding-bottom:65px; section 13 raises that to 104px at 992px and up). flex-end plus a 48px inset is the whole knob -- 48px is the number to change if it wants to sit higher or lower, and it is measured from the hero bottom edge, so it holds at both mobile hero heights (500px at 479px and below, 650px from 480 to 991px). Left alone deliberately: the readability scrim in section 12 is a horizontal gradient (white at the left edge, transparent by 72%), so it veils the text column at ANY vertical position -- moving the block down does not cost contrast. */ @media screen and (max-width:991px){ .hero-row{ justify-content: flex-end; padding-bottom: 48px; } } /* ========================================================================= SECTION 21 CTA SECTION -- IMAGE FAN REMOVED (.project-section) ------------------------------------------------------------------------- 2026-08-06, at Preet request: the three project-fan images (cta-left / cta-main / cta-right) were removed from _elementor_data on page 10, so .project-item-wrap and all three .project-item cards no longer exist. Rollback row: postmeta _elementor_data_bak_20260806_ctafan (45942 B, md5 4514e59fa72899f49d68ad03b299274c). WHY THIS RULE IS REQUIRED, NOT COSMETIC. The section is a scroll-pinned block. webflow-core.css gives it, at >=992 only: .project-section { height: 310vh; } .project-wrap { height: 300vh; padding-bottom: 100px; } .project-stiky { position: sticky; top: 0; } Those three viewport-heights of scroll runway exist so the title stays pinned while IX2 list a-18 fans the side cards outward. With the fan gone there is nothing to reveal, so the runway renders as roughly three empty screens of white under a pinned heading. Collapsing to auto turns the block back into an ordinary short CTA: heading, paragraph, button. <=991 already sets height:auto in webflow-core.css, so it needs nothing. .project-stiky keeps position:sticky and is now inert -- with the wrap at auto height there is no scroll range for it to stick through. Left in place so restoring the fan is a single _elementor_data rollback with no CSS to undo. SECTION 19 ABOVE IS NOW DEAD but deliberately kept: it is the only record of how the fan was tuned (percentage widths, the translate longhand trick, the rotation bleed) and it costs nothing now that the elements are gone. If the fan is never coming back, 19 can be deleted wholesale along with this note. ========================================================================= */ @media screen and (min-width: 992px){ .project-section{ height: auto; } .project-wrap{ height: auto; padding-bottom: 0; } } /* ========================================================================= SECTION 22 TESTIMONIALS -- SHORTER PINNED SCROLL RUNWAY (2026-08-06) ------------------------------------------------------------------------- Requested by Preet: the testimonials block needed about three full screens of scrolling before its cards finished moving. Webflow builds that section as a 300vh spacer (.testimonials-box) with .testimonials-wrap sticky at top:100px, so the content pins while you scroll three viewport heights. IX2 a-24 (Testimonials Scroll) is a SCROLL_PROGRESS list whose range is section height + one viewport and which finishes at keyframe 70 -- measured 2,156 px of scroll at vh 720. Halving the spacer halves the pin and compresses the motion with it: same animation, same end state, roughly half the scrolling. MUST STAY SCOPED >= 992. Webflow already sets .testimonials-box { height:auto } at <= 991, and home.css loads after webflow-core.css, so an unscoped 150vh here would WIN against that rule and reintroduce a pin on tablet and mobile where there is none today. Reverse = delete this block; the Webflow 300vh takes over again. ========================================================================= */ @media screen and (min-width: 992px){ .testimonials-box{ height: 150vh; } } /* --------------------------------------------------------------- 23. TRUST LINE / CLIENT-LOGO SPLIT (>= 992px) Brief (Preet, 2026-08-07, marked on a screenshot with a vertical line at ~20% of the container): the two trust lines must sit ENTIRELY left of that line, and the logo marquee must start there instead of at 41%. Webflow ships .patner-wrap as a flex row of .text-wrapper.left-contant-wrap { width:70% } .ticket-wrap { width:100% } Both are flex:0 1 auto, so 170% of basis shrinks proportionally to 41.18% / 58.82%: at a 1300px container the text column measured 535.3px and the mask 764.7px, and the paragraphs (394.2 / 421.9px, capped by .patner-exar{max-width:447px}) ran ~160px past the mark. Pinned to a fixed measure, not a percentage: the copy needs a stable line length, and every px a narrower desktop takes off the container should come off the marquee, not the text. 260px = the marked line at the measured 1300px container. Each paragraph then sets as two balanced lines (~200-215px) and the strip gains 275px, about 1.5 more logos in view. MUST stay scoped >= 992px: Webflow cancels this layout at <=991 (.patner-wrap{flex-flow:column} + .left-contant-wrap{width:100%}) and home.css loads after webflow-core.css at higher specificity, so an unscoped rule here would beat that cancel and pin a 260px column on tablet and phone too. Knob: --enq-trust-col, one value. Reverse = delete this block. --------------------------------------------------------------- */ @media screen and (min-width: 992px){ .patner-section{ --enq-trust-col: 260px; } .patner-section .text-wrapper.left-contant-wrap{ flex: 0 0 var(--enq-trust-col); width: var(--enq-trust-col); } /* .text-wrapper is a column flex with align-items:flex-start, so a block child can shrink-wrap to its widest descendant instead of filling. Pin it, or the wrap width becomes unpredictable. */ .patner-section .left-contant-wrap .letter-animation{ width: 100%; } /* Webflow caps each line at 447px, now WIDER than the column, so without this the lines would never re-wrap. */ .patner-section .patner-exar{ max-width: 100%; } /* mask takes the remainder; min-width:0 lets a flex item shrink below its content width, which an overflow:hidden marquee needs. */ .patner-section .ticket-wrap{ flex: 1 1 auto; min-width: 0; } } /* --------------------------------------------------------------- 23b. TRUST LINE - BALANCED WRAP (all widths) The copy is one paragraph in two spans (bold + rest) and the greedy line breaker fills line 1 to the last word that fits: at the 260px column that is `Trusted by teams in education,` (255.2px) leaving an ugly 95.1px orphan `retail & tech`. text-wrap:balance re-splits it evenly -> 167.1 / 183.1px. Measured, not assumed; `pretty` does nothing here (it only protects the LAST line, and 2 lines is already its minimum). Deliberately NOT scoped to a breakpoint: it is a 2-line label at every width and balancing helps at 350px too. Browsers cap balancing at a few lines and simply ignore it past that, and an engine without support falls back to the greedy break above - so there is no width where this can do harm. Reverse = delete this block. --------------------------------------------------------------- */ .patner-section .patner-exar{ text-wrap: balance; } /* ========================================================================== SECTION 24 PORTFOLIO TEASER - STICKY PHOTO POSITION + CARD-LOCKED CROSSFADE .teaser-column-02 .p-teaser-img-wrap / .teaser-img._1 ._2 ._3 (>=992) Pairs with the "portfolio teaser photo lock" block in custom-js/home.js. -------------------------------------------------------------------------- SYMPTOM (Preet, 2026-08-08): the photos are not centred, they stick to the top as you scroll, and the next picture starts fading in the moment you begin scrolling onto the next project. CAUSE 1 - POSITION. webflow-core.css pins .p-teaser-img-wrap at position:sticky; top:100px with a fixed height:520px. The sticky header is 84px, so at 1440x900 the photo occupies 100-620px of a 900px viewport: 16px of clearance under the header and 280px of dead space below it. It reads as stuck to the top, not held in the middle. CAUSE 2 - TIMING. The crossfade was IX2 list a-43 (event e-662, SCROLLING_IN_VIEW, smoothing 95) driven continuously off the section's own scroll progress. Keyframes: 0 (._2=0, ._3=0), 33 (._1=1), 53 (._1=0), 58 (._2=1), 76 (._2=0), 80 (._3=1), 100 (._3=1, a no-op tail). Because ._2 and ._3 had no HOLD keyframe after 0, BOTH RAMPED LINEARLY UP FROM PROGRESS 0. Measured against the real geometry (section 1632px, vh 900, continuous range = height + vh = 2532px; the three cards sit dead-centre at progress 28.9 / 50.0 / 71.1): progress 50 - card 02 centred -> ._1 0.15 ._2 0.86 ._3 0.63 progress 71 - card 03 centred -> ._2 0.27 ._3 0.89 So at the exact moment a project was centred you were looking at three stacked photos at once, and the next one was already most of the way in before the current one had begun to leave. No photo was ever clean, which is both halves of the report. FIX. e-662 is retired by renaming .teaser-section's data-w-id to data-enq-w-id in _elementor_data - the same reversible trick as the header dropdown - so IX2 stops writing inline opacity/transform onto .teaser-img and the cascade owns them again. home.js then marks exactly one photo .enq-teaser-on: the one belonging to the card nearest the viewport centre. The dissolve is a plain CSS transition, so it is TIME-based rather than scroll-linked - nothing moves until you cross the half-way point between two projects, then it swaps in 0.5s and holds still. The blanket opacity:0 is gated behind [data-enq-teaser="on"], which only home.js ever sets. With JS off this file is inert and webflow-core's own baseline stands - ._1 opaque, ._2/._3 transparent - which is the correct static first frame. Scoped >=992 because webflow-core hides .p-teaser-img-wrap AND the whole .teaser-column-02 at <=991, where each project shows its own .teaser-img-tablet-down copy instead (and where ._2/._3 are forced back to opacity:1). Nothing in here may reach those. ========================================================================== */ @media screen and (min-width: 992px) { .teaser-column-02 .p-teaser-img-wrap { /* Mirrors of numbers that live elsewhere - if either moves, move it here: --enq-teaser-h = webflow-core.css .p-teaser-img-wrap{height:520px} --enq-teaser-hdr = measured height of the sticky header at >=992. */ --enq-teaser-h: 520px; --enq-teaser-hdr: 84px; /* Centre the frame in the band BELOW the header instead of jamming it under it: at vh 900 this resolves to 232px (was 100px), leaving 148px of air above and below. The max() is the short-viewport guard - under about 604px of height there is no room to centre and the frame would slide up behind the header, so it falls back to clearing it by 12px. */ top: max( calc(var(--enq-teaser-hdr) + 12px), calc(var(--enq-teaser-hdr) + (100vh - var(--enq-teaser-hdr) - var(--enq-teaser-h)) / 2) ); } /* Both rules are gated on the attribute so they cannot fire before home.js has picked a winner - otherwise the frame would blank for a frame. */ .p-teaser-img-wrap[data-enq-teaser="on"] .teaser-img { opacity: 0; transform: scale(1.04); /* the outgoing photo eases back as it leaves */ transition: opacity .5s ease, transform .8s ease; } .p-teaser-img-wrap[data-enq-teaser="on"] .teaser-img.enq-teaser-on { opacity: 1; transform: scale(1); } } /* The cross-dissolve is decoration. With Reduce Motion the swap is instant and nothing scales - the photo still tracks the project, it just cuts. */ @media screen and (min-width: 992px) and (prefers-reduced-motion: reduce) { .p-teaser-img-wrap[data-enq-teaser="on"] .teaser-img, .p-teaser-img-wrap[data-enq-teaser="on"] .teaser-img.enq-teaser-on { transition: none; transform: none; } } /* =================================================================== 25 · TESTIMONIALS TOP ROW — stat, avatar line, decorative pull-quote ------------------------------------------------------------------- Shipped 2026-08-08. The odometer that rolled to "145+" is gone from the markup (and with it IX2 a-14 and one [data-w-id]); the left column is now a static "100%" + "Client-Focused Approach". Two things follow from that. .counter-wrap was built as an ODOMETER WINDOW - height:60px with overflow:hidden and taller digit strips sliding behind it. A single static 64px/105% line is 67.2px tall, so that window would clip the glyphs by ~7px. The wrap is kept, because it is the flex item the stacked breakpoint centres; only its window behaviour is undone. The quote is the "decorative, clear to read" treatment. It is a system SERIF ITALIC, not a script face, and that is a constraint not a preference: this site has no @font-face anywhere, so a cursive stack resolves to Segoe Script on Windows, Snell Roundhand on Mac and NOTHING on Android. Georgia -> Times -> serif gives a real serif with a real italic on every platform, for zero bytes. The oversized opening quote is a TEXT GLYPH, never a background image. Elementor's lazy-load prints ".e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded) * {background-image:none!important}" inline in
, and the trailing * would erase a background ornament this far down the page (the same rule that once ate the select chevron). A glyph is immune to it. It also sits inside the paragraph's IX2 entrance, so the ornament fades in with the copy instead of ahead of it. Nothing here writes opacity or transform on an element IX2 owns - the .16 lives on a pseudo-element, which IX2 cannot address. ⚠ THIS SECTION STACKS AT 767, NOT 991. webflow-core flips .testimonials-top-item-wrap to flex-flow:column and gives .testimonials-top-item-right-exar text-align:center inside "screen and (max-width:767px)". Shipping the centred ornament at 991 put it above LEFT-aligned copy for the whole 768-991 band, where the layout is still two columns. That band gets its own rule instead: same left gutter, trimmed for a ~397px column. =================================================================== */ .testimonials-top-item-left .counter-wrap{ height: auto; overflow: visible; } .testimonials-top-item-left .counter{ margin: 0; } .testimonials-top-item-left .counter-exar{ margin-top: 8px; } /* Measured at 390: "Partnering with teams across the globe" broke as "...across the" / "globe" - a 39px orphan in a 242px box. Same fix and same reason as section 23b's trust line, scoped to this wrapper so it cannot reach .patner-section's copy. */ .patner-img-text-wrap .join-text, .patner-img-text-wrap .patner-exar{ text-wrap: balance; } .testimonials-top-item-right-exar{ position: relative; padding-left: 52px; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; font-size: 21px; line-height: 1.72; letter-spacing: .002em; color: #1c1c22; } .testimonials-top-item-right-exar::before{ content: '\201C'; position: absolute; left: -4px; top: -26px; font-family: Georgia, 'Times New Roman', serif; font-style: normal; font-weight: 400; font-size: 118px; line-height: 1; color: #0f054d; opacity: .16; pointer-events: none; } /* 768-991: still two columns, still left-aligned, but each column is only ~397px - so the gutter and the ornament come down with it. */ @media (min-width: 768px) and (max-width: 991px){ .testimonials-top-item-right-exar{ padding-left: 38px; font-size: 19px; line-height: 1.7; } .testimonials-top-item-right-exar::before{ left: -3px; top: -22px; font-size: 92px; } } /* <=767 webflow-core stacks the row and centres this paragraph, so the ornament leaves the gutter and sits directly above the copy. */ @media (max-width: 767px){ .testimonials-top-item-right-exar{ padding-left: 0; padding-top: 40px; font-size: 20px; line-height: 1.7; } .testimonials-top-item-right-exar::before{ left: 50%; top: -18px; transform: translateX(-50%); font-size: 100px; } } @media (max-width: 479px){ .testimonials-top-item-right-exar{ padding-top: 34px; font-size: 18px; line-height: 1.68; } .testimonials-top-item-right-exar::before{ top: -22px; font-size: 88px; } } /* ============================================================ §26 — MOBILE REDESIGN OF 4 SECTIONS (2026-08-10) Preet's picks: A1 compact rows · B4 swipe cards · C4 four-up + one line · D1 swipe carousel. Live @390 before: features 1518 · service 1331 · choose 1454 · testimonials 3120 = 7423 px. BREAKPOINT IS 767, deliberately: "on phone". 768-991 is left exactly as it was. Read RULES -> Testimonials top row before assuming 991 anywhere in this file. IX2 owns inline opacity AND transform on .features-item, .cloneable-area and everything inside the service cards. NOTHING in this section sets either property. ============================================================ */ /* .choose-short is new markup: oneinside each .c-card-front .choose-item-text-wrap on page 10. Phone-only, hidden everywhere else so 768+ is untouched. It REPLACED .choose-summary (one shared line under all four tiles), which is gone from the markup as of 2026-08-10. */ .choose-short{display:none} @media (max-width:767px){ /* ---------- A1 · WHO WE HELP — compact rows ---------- Was 4 glass cards, 274px each, to carry 4 sentences. Now one row per sector: 40px icon left, copy right, hairline between. Card chrome was doing nothing here. */ .features-item-wrap{display:flex;flex-direction:column;gap:0} .features-item-wrap .features-item{ flex-flow:row nowrap; align-items:flex-start; gap:15px; padding:17px 0; background:none; border:0; border-radius:0; box-shadow:none; } .features-item-wrap .features-item + .features-item{ border-top:1px solid rgba(0,0,0,.13); } .features-item-wrap .features-img-box{flex:0 0 40px;width:40px;height:40px} .features-item-wrap .features-text-wrap{flex:1 1 auto;gap:3px} .features-item-wrap .features-item-title{ font-size:17px;line-height:1.25;letter-spacing:-.01em; } .features-item-wrap .feature-exar{font-size:14px;line-height:1.5} /* ---------- B4 · OUR SERVICES — swipe cards ---------- Horizontal snap rail, one card at a time, next peeking. The 6 .service-img files are template stock in 5 clashing styles (and card-website.avif serves BOTH 05 and 06), so the art panel is a brand ground + the service number. display:none here + loading="lazy" in the markup is what actually stops the 166,383 B of invisible image fetches — display:none ALONE does not (RULES -> srcset). */ .service-item-wrap-02{ display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-inline-start:20px; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 -20px; padding:2px 20px 6px; } .service-item-wrap-02::-webkit-scrollbar{display:none} .service-item-wrap-02 > .service-collection{ flex:0 0 280px; width:280px; scroll-snap-align:start; } .service-item-wrap-02 .service-collection-list, .service-item-wrap-02 .service-collection-item{height:100%} .service-item-wrap-02 .service-collection-item-box{ height:100%; flex-flow:column nowrap; padding:0; border:1px solid rgba(255,255,255,.41); border-bottom:1px solid rgba(255,255,255,.41); border-radius:16px; overflow:hidden; background:rgba(255,255,255,.53); box-shadow:inset 0 4px 4px rgba(255,255,255,.2),0 4px 8px rgba(0,0,0,.11); } /* the two invisible assets */ .service-item-wrap-02 .service-img, .service-item-wrap-02 .service-bg{display:none} /* .service-collection-item-left holds the number + title: it becomes the coloured art panel. */ .service-item-wrap-02 .service-collection-item-left{ display:flex; flex-flow:column nowrap; justify-content:space-between; gap:12px; min-height:104px; padding:14px 18px 16px; background:linear-gradient(150deg,#0f054d,#2a1a6e); } .service-item-wrap-02 .service-number{ font-size:12px;line-height:1.2;letter-spacing:.08em; color:rgba(255,255,255,.62); } .service-item-wrap-02 .service-title{ font-size:19px;line-height:1.2;letter-spacing:-.014em;color:#fff; } /* 3 coordinated grounds rotated across the 6 cards — navy, rose-plum and periwinkle-indigo, all derived from the two brand blobs. Never 4+ grounds. */ .service-item-wrap-02 > .service-collection:nth-child(3n+2) .service-collection-item-left{ background:linear-gradient(150deg,#4d1030,#7d2350); } .service-item-wrap-02 > .service-collection:nth-child(3n+3) .service-collection-item-left{ background:linear-gradient(150deg,#2e2a80,#5750b8); } .service-item-wrap-02 .service-collection-item-right{ flex:1 1 auto; display:flex; flex-flow:column nowrap; gap:10px; padding:14px 18px 16px; } .service-item-wrap-02 .service-exar{ font-size:13.5px;line-height:1.5; display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical; overflow:hidden; } /* .service-arrow-02 is the hover twin. display, never opacity — IX2 owns opacity on these. */ .service-item-wrap-02 .service-arrow-02{display:none} .service-item-wrap-02 .service-arrow{margin-top:auto} /* ---------- C4 (v5) - WHY CHOOSE US - four-up, each tile carrying its own short line ---------- .c-card-back is display:none UNSCOPED in webflow-core and nothing re-shows it, so the 4 long .choose-exar sentences are unreachable at EVERY width. Un-hiding them is not the fix - they are far too long for a 170px tile - so each front now carries a short
of its own, and the single shared .choose-summary line this replaced is deleted from the markup. Measured @390: 599 -> 584 px, and 4 of 4 reasons are explained instead of 0 of 4. */ .c-flipping-cards-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:stretch; } .c-flipping-cards-list .cloneable-area{ display:flex;width:auto;height:auto;min-height:0; } .c-flipping-cards-list .c-flip-card, .c-flipping-cards-list ._w-flip-card, .c-flipping-cards-list .c-card-front{ display:flex;flex:1 1 auto;width:100%;height:auto;min-height:0; } /* NO TAP-FLIP ON PHONE. Webflow ships e-456 MOUSE_CLICK + e-457 MOUSE_SECOND_CLICK bound BY CLASS to ._w-flip-card on breakpoints medium/small/tiny, to give touch what a mouse gets from e-454/e-455 (hover, main only). But .c-card-back is display:none in webflow-core, so on a phone a tap just spun the card and showed nothing. pointer-events is the scalpel: no pointer event can reach the element, so the click listeners never fire. IX2 is untouched, which is why the entrance still runs. HOME ONLY - home.css is enqueued for page 10 alone, and the 6 service pages MUST keep their tap-flip: their card backs carry copy a phone has no other way to read. Rollback: delete this one rule. */ .c-flipping-cards-list ._w-flip-card{pointer-events:none} .c-flipping-cards-list .choose-item{ flex:1 1 auto; width:100%; height:auto; min-height:118px; padding:16px 14px; gap:11px; align-items:flex-start; justify-content:flex-start; } /* webflow-core gives .choose-item-top-icon-wrap width:100% AND justify-content:flex-end, so the icon sits top-RIGHT on the live card. align-self cannot move it - the wrap is already full width. The flip has to be justify-content. */ .c-flipping-cards-list .choose-item-top-icon-wrap{ width:100%; justify-content:flex-start; } .c-flipping-cards-list .choose-icon-wrap{ width:36px;height:36px;padding:9px; } .c-flipping-cards-list .choose-icon{width:18px;height:18px} .c-flipping-cards-list .choose-item-text-wrap{ margin-top:auto; display:flex; flex-direction:column; gap:6px; } .c-flipping-cards-list .choose-item-text{ margin:0; font-size:16px;line-height:1.2;letter-spacing:-.01em; } .choose-short{ display:block; margin:0; font-size:13.5px; line-height:19px; font-weight:500; color:#2c2c2c; } /* ---------- D1 · TESTIMONIALS — swipe carousel ---------- 2349px of stacked cards -> one card at a time. The stat strip above it (.testimonials-top-item-wrap, the 08-08 pass) is untouched. Card internals keep their live order (avatar, stars, quote, name), tightened — reordering to the mockup's face-at-the-bottom would need markup surgery for no reader benefit. Full quotes kept, nothing clamped. .testimonials-box's 150vh pin is >=992 only, so the rail leaves no runway behind. */ .testimonials-item-wrap{ display:flex; grid-template-columns:none; gap:14px; /* Three inherited rules have to be cancelled here, and each one broke something measurable before it was: - justify-content:center (webflow-core, unscoped) centres an OVERFLOWING flex row, which pushes the first cards to negative x where no amount of scrolling can reach them. Measured: card 01 at x=-418 with scrollLeft already 0. - align-items:center stops the cards stretching, so a 4-line quote and a 6-line quote sat at different heights in the rail. - the parent .testimonials-wrap is a COLUMN flex box with align-items:center, so the rail shrink-wrapped to 350px and the -20px margins had nothing to pull against. align-self is what makes the full-bleed work; the margins alone did not. The services rail needs none of this - .service-row is a plain flex column with normal alignment. */ justify-content:flex-start; align-items:stretch; align-self:stretch; width:auto; max-width:none; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-inline-start:20px; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 -20px; padding:2px 20px 6px; } .testimonials-item-wrap::-webkit-scrollbar{display:none} .testimonials-item-wrap .testimonials-item{ flex:0 0 296px; width:296px; height:auto; scroll-snap-align:start; display:flex; flex-flow:column nowrap; gap:14px; padding:24px 22px; } .testimonials-item-wrap .testimonials-img{width:42px;height:42px} .testimonials-item-wrap .testimonials-text-wrap{ display:flex;flex-flow:column nowrap;gap:12px; } .testimonials-item-wrap .testimonials-exar{font-size:15px;line-height:1.6} .testimonials-item-wrap .testimonial-name{font-size:20px;line-height:1.15} .testimonials-item-wrap .testimonial-name-exar{font-size:12.5px;line-height:1.4} /* ---------- shared rail dots (built by home.js) ---------- */ .enq-dots{ display:flex; gap:6px; justify-content:center; margin-top:14px; } .enq-dots button{ width:6px;height:6px;padding:0;border:0;border-radius:50%; background:rgba(0,0,0,.2);cursor:pointer; transition:width .2s ease,background-color .2s ease,border-radius .2s ease; } .enq-dots button[aria-current="true"]{ width:20px;border-radius:3px;background:#0f054d; } }/* end max-width:767 */ /* The dots element only ever exists on phone, but belt and braces for the resize case before home.js tears it down. */ @media (min-width:768px){ .enq-dots{display:none} } @media (prefers-reduced-motion:reduce){ .enq-dots button{transition:none} } /* ---------- C4 (v5) FIX - equal-height tiles, phone only (2026-08-10) The 2x2 grid stretches .cloneable-area, so all four CELLS measure 163px. But webflow-core sets align-items:center on EVERY flex level between the cell and the painted .choose-item, i.e. .cloneable-area then .c-flip-card then ._w-flip-card then .c-card-front. align-items is the CROSS axis, and on a row flex container that is the axis that carries height - the flex:1 1 auto declared above only governs the MAIN axis, so it never grew them. Result: the tile with the shortest copy (04 Always Available, a 1-line title and a 1-line .choose-short) painted 125px and sat centred in its 163px cell with 19px of air above and below it. Stretch has to be set at ALL FOUR levels - the first center left in the chain stops it. Measured @390 after: 4 tiles 170 x 163.4, section still 623px. Rollback: delete this block. ---------- */ @media (max-width:767px){ .c-flipping-cards-list .cloneable-area, .c-flipping-cards-list .c-flip-card, .c-flipping-cards-list ._w-flip-card, .c-flipping-cards-list .c-card-front{align-items:stretch} } /* Text block sits at the TOP of the tile, under the icon. The C4 block above gives .choose-item-text-wrap margin-top:auto, which was harmless while every tile was exactly its content height. Now that the tiles stretch to a common 163px, auto pushed tile 04's copy to the floor and opened a 49px hole between its icon and its title while the other three kept 11px. Slack belongs at the bottom of the card, not in the middle of it. Measured @390: all four now icon then 11px then title, tile 04 carries its 38px of slack below. Rollback: delete this block. */ @media (max-width:767px){ .c-flipping-cards-list .choose-item-text-wrap{margin-top:0} } /* ---------- B4 FIX - the numeral IS the graphic, phone only (2026-08-10) Preet: "what can we use instead of colours for our services section on phone" -> option 1, the big faint number. B4 painted .service-collection-item-left as a coloured art panel (navy / plum / periwinkle gradients rotated 3n+1/2/3) because the 6 .service-img files are off-brand template stock. This removes the panel entirely: the card is the same pale glass as every other card on the page, .service-number becomes the graphic at 40px in navy at .16, and a hairline draws the edge the colour block used to draw. Title goes back to #000 to match every other card title. TWO reasons this scores the way it does: 1. B4's nth-child(3n+2)/(3n+3) ground rules score (0,4,0), so a plain two-class override would LOSE on cards 2,3,5,6. The same three selectors are repeated here and win on source order alone - no !important anywhere, same as global.css S20. 2. A gradient is a background-IMAGE, so Elementor's inline lazy-load rule (.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded) * {background-image:none!important}, which matches at max-height:1024px i.e. every phone) could blank those grounds until the IntersectionObserver fires. color + border are immune. No opacity is set on anything here - IX2 owns inline opacity on these elements (RULES -> mobile snap rails). Rollback: delete this block, the colour grounds come straight back. ---------- */ @media (max-width:767px){ .service-item-wrap-02 > .service-collection .service-collection-item-left, .service-item-wrap-02 > .service-collection:nth-child(3n+2) .service-collection-item-left, .service-item-wrap-02 > .service-collection:nth-child(3n+3) .service-collection-item-left{ background:none; min-height:0; justify-content:flex-start; gap:2px; padding:16px 18px 13px; border-bottom:1px solid rgba(15,5,77,.10); } .service-item-wrap-02 .service-number{ font-size:40px; line-height:1; letter-spacing:-.02em; font-weight:600; color:rgba(15,5,77,.16); } .service-item-wrap-02 .service-title{color:#000} } /* ========================================================== SECTION 27 GROUND SEQUENCE -- THE HOMEPAGE BANDS 2026-08-10. Pairs with global.css section 21, which retints the default page ground to --enq-ground (#e5e4f0) site-wide. This file carries only the bands specific to the home page. Full sequence, in DOM order: hero white <- here (fallback under the video) partners white <- here features tint inherited, no rule services tint inherited, no rule project CTA navy <- here, plus its type inverted below portfolio white already var(--white), no rule choose tint inherited, no rule testimonials white <- here, gradient dropped footer tint global.css section 21 Variant B out of mockups/bg-variants.html: six ground changes, longest unbroken run about 2,100 px, and navy appears exactly ONCE so the CTA is the only dark stop on the page. .hero is painted even though an opaque 850px