carries inline background:var(--dark) on dark-hero pages; on mobile the flush sections' rounded corners expose it at every junction ("black sides"). Cream page behind the cards; dark heroes/footers paint their own backgrounds. */ main{background:#FBF8EF !important} /* corner radius must not exceed the -28px card tuck, or the corner cutaway digs past the previous card and exposes the page (white/cream crescents "on the sides") */ body{--r:28px} /* uniform section rhythm on phone + tablet (keeps each section's horizontal padding) */ section[style*="padding:clamp("],section[style*="padding: clamp("]{padding-top:clamp(52px,7vw,76px) !important;padding-bottom:clamp(52px,7vw,76px) !important} #cinehero{padding:0 !important} /* 3-col inline grids → 2-col on tablet */ [style*="grid-template-columns:1fr 1fr 1fr"],[style*="grid-template-columns: 1fr 1fr 1fr"],[style*="grid-template-columns:repeat(3,1fr)"],[style*="grid-template-columns: repeat(3, 1fr)"]{grid-template-columns:1fr 1fr !important} } @media(max-width:900px){ /* featured story card: photo top, text below (tablet portrait + phones) */ .fs-img{left:0 !important;right:0 !important;top:0 !important;bottom:auto !important;width:100% !important;height:44% !important} .fs-scrim{background:linear-gradient(180deg,rgba(245,243,239,0) 26%,#F5F3EF 46%) !important} .fs-txt{top:auto !important;bottom:0 !important;left:0 !important;width:100% !important;height:auto !important;max-height:62% !important;padding:22px 22px 54px !important;justify-content:flex-end !important} } @media(max-width:700px){ /* phones: single column everywhere */ [style*="grid-template-columns:1fr 1fr 1fr"],[style*="grid-template-columns: 1fr 1fr 1fr"],[style*="grid-template-columns:repeat(3,1fr)"],[style*="grid-template-columns: repeat(3, 1fr)"],[style*="grid-template-columns:1fr 1fr"],[style*="grid-template-columns: 1fr 1fr"],[style*="grid-template-columns:repeat(2,1fr)"],[style*="grid-template-columns: repeat(2, 1fr)"]{grid-template-columns:1fr !important} } /* phone final overrides */ @media(max-width:700px){ [style*="grid-template-columns:1fr 1fr 1fr"],[style*="grid-template-columns: 1fr 1fr 1fr"],[style*="grid-template-columns:repeat(3,1fr)"],[style*="grid-template-columns: repeat(3, 1fr)"],[style*="grid-template-columns:1fr 1fr"],[style*="grid-template-columns: 1fr 1fr"],[style*="grid-template-columns:repeat(2,1fr)"],[style*="grid-template-columns: repeat(2, 1fr)"]{grid-template-columns:1fr !important} } @media(max-width:1025px){ ::-webkit-scrollbar{width:0;height:0} html{scrollbar-width:none} } /* kira out loud: photo banner on phones, panels below on solid ground */ @media(max-width:700px){ /* Backstop color while the photo loads; the pre-boxed template image (110%/120% box) fully covers the section - no height cap, no band. */ #kiravoice{background:#17130F !important} #kiravoice .kv-acc{background:rgba(42,38,36,.78) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important} } /* ---- Notch / safe-area hardening (all widths, portrait + landscape) ---- */ .nav-wrap{left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);width:calc(100% - 28px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))} .indbar{max-width:calc(100vw - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))} #cinecue{bottom:calc(28px + env(safe-area-inset-bottom,0px)) !important} @media(max-width:860px){html.rz-framed .nav-wrap{top:64px !important}} /* ============================================================ MOBILE LOGO WALLS (customer / integration / trust badges) These sit on light cream sections. Kill any baked-in white box with multiply, lay every ragged flex row out as an even 3-up grid, and give every mark ONE modest uniform size so nothing is oversized or misaligned. ============================================================ */ @media(max-width:1024px){ img[style*="grayscale"]{mix-blend-mode:multiply !important;height:42px !important;width:auto !important} .logowall, div:has(> img[style*="grayscale"]){display:flex !important;flex-wrap:wrap !important;justify-content:center !important;align-items:center !important;gap:26px 30px !important;max-width:560px !important;margin-left:auto !important;margin-right:auto !important;grid-template-columns:none !important} .logowall > img{max-height:44px !important;height:44px !important} } /* channel "Every channel, one Kira" card: the tagline was jammed against the chat bubbles. Give it clear air below the conversation on phones. */ @media(max-width:1024px){ .chan-tag{margin-top:0 !important;padding-top:clamp(18px,5vw,28px) !important} } /* tighten section rhythm on phones - no oversized empty gaps between sections */ @media(max-width:700px){ body section[style*="padding:clamp("],body section[style*="padding: clamp("]{padding-top:clamp(44px,11vw,60px) !important;padding-bottom:clamp(60px,15vw,84px) !important} .two{margin-bottom:22px !important} /* speed-race rows: keep label · bar · time on ONE line (exempt from the generic auto-1fr collapse) */ #speedrace [style*="grid-template-columns:auto 1fr auto"],#speedrace [style*="grid-template-columns: auto 1fr auto"]{grid-template-columns:auto 1fr auto !important;gap:12px !important} #speedrace span[style*="min-width:108px"],#speedrace span[style*="min-width: 108px"]{min-width:0 !important} #speedrace .scbig{font-size:17px !important} #speedrace .scwave{display:none !important} } /* proof section: keep the person clear of the headline + a scrim for legibility */ @media(max-width:700px){ .proof-sec > img{object-position:47% 34% !important} .proof-sec::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,7,10,.52),rgba(6,7,10,.2) 42%,rgba(6,7,10,.6))} .proof-sec > *:not(img){position:relative;z-index:1} } /* On phones the desktop -44px "card lifts over the previous section" overlap makes sections collide (e.g. a cream card riding up over the hero's subtitle). Flatten it so every section starts cleanly at the previous one's edge - the rounded top corners still soften the seam. */ @media(max-width:1024px){ /* card-on-card: each section tucks OVER the previous one (like desktop's -44px), so rounded corners overlap the card below — never the page background. Bottom padding is compensated below so no content hides under the next card. */ section[style*="margin-top:-44px"],section[style*="margin-top: -44px"],footer[style*="margin-top:-44px"],footer[style*="margin-top: -44px"]{margin-top:-28px !important} } /* Parallax is disabled on touch/small screens (see parallax.js), but a stale engine state can leave a shrunken box or translate behind - e.g. the Kira field image cut off mid-section with content spilling past it. These beat inline styles, guaranteeing full-bleed imagery covers its section and content columns sit where the layout put them. */ /* Parallax is disabled on touch/small screens (see parallax.js). Full-bleed [data-par] imagery is pre-boxed in the templates (110%/120% box) so it always over-covers its section; on mobile we only need transforms gone. These beat any inline transform left behind by a stale engine state. */ @media(max-width:1024px){ [data-py]{transform:none !important} } /* ---- mobile motion pass: cinematic drift (phones/tablets) ---- NOTE: the old rzHeroInM heading/hwave entrance was removed on purpose. site.css loads AFTER first paint, so a late-applied entrance animation made the hero heading disappear and fade back in ~1-3s after load ("two headings"). The heading now renders once, statically, at its final size. Do not re-add. */ @media(max-width:1024px){ @keyframes rzKenBurns{0%{transform:scale(1.05)}100%{transform:scale(1.16) translateY(-1.8%)}} #cinehero video{animation:rzKenBurns 17s ease-in-out infinite alternate;will-change:transform} } /* Tablet-portrait (iPad): 2-up card grids (stakeholder Q&A, who-it's-for, channel pairs) stay cramped with one-word-per-line text. Collapse them to a single readable column through iPad-portrait width. */ @media(max-width:820px){ [style*="grid-template-columns:1fr 1fr;"],[style*="grid-template-columns: 1fr 1fr;"],[style*="grid-template-columns:repeat(2,1fr)"],[style*="grid-template-columns: repeat(2, 1fr)"]{grid-template-columns:1fr !important} } /* Who-it's-for gallery: the desktop horizontal-EXPAND row (cards grow/shrink via flex) collapses to unreadable slivers on touch - the narrow items don't even render their image (looked "broken"). Stack it: every card full width with a fixed aspect, image filling, and its text always shown. */ } /* team bios: pin LinkedIn buttons to equal height */ .team-card{display:flex;flex-direction:column;align-items:flex-start} .team-card>a{margin-top:auto !important;padding-top:16px} @media(max-width:860px){.wkd-bub{max-width:200px}} /* colored logo marquee */ .logotrack{display:flex;align-items:center;width:max-content;animation:logoscroll 30s linear infinite} .logotrack:hover{animation-play-state:paused} @keyframes logoscroll{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.logotrack{animation:none;flex-wrap:wrap;width:auto;justify-content:center}} /* suppress nav transitions until first paint settles (refresh shrink glitch) */ html:not(.nav-ready) .nav-wrap,html:not(.nav-ready) .nav-wrap *{transition:none !important} /* static mobile-nav rules — first paint correct on refresh (JS injectNavCSS remains as fallback) */ @media(min-width:861px){.rzmenu,.rzmenu-btn{display:none!important}} @media(max-width:860px){ .nav-bar .nav-links{display:none!important} .nav-toggle{display:none!important} .nav-bar .nav-cta-d{display:none!important} .rzmenu-btn{display:flex!important;flex:0 0 auto;width:44px;height:44px;background:transparent!important;border:none!important;border-radius:12px;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;cursor:pointer} .rzmenu-btn span{display:block!important;width:18px;height:2px;background:#fff!important;border-radius:2px;transition:transform .3s,opacity .3s} .rzmenu-btn[data-open="1"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .rzmenu-btn[data-open="1"] span:nth-child(2){opacity:0} .rzmenu-btn[data-open="1"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .rzmenu[data-open="1"]{display:flex!important} } .logomark img[src*="asahi"],.logotrack img[src*="asahi"]{padding:8px 16px;box-sizing:border-box} /* Global logo/badge sizing — bigger & full-colour on every page (recurring feedback) */ .logotrack img,.logomark img{height:48px !important;max-height:none !important;width:auto !important;max-width:180px !important;object-fit:contain;filter:none !important;opacity:1 !important;mix-blend-mode:normal !important} .certwall img{height:56px !important;max-height:none !important;width:auto !important;max-width:172px !important;object-fit:contain;filter:none !important;opacity:1 !important;mix-blend-mode:normal !important} @media(max-width:1024px){.logotrack img,.logomark img{height:44px !important}.certwall img{height:50px !important}} @media(max-width:560px){.logotrack img,.logomark img{height:40px !important}.certwall img{height:44px !important}} .logowall img{filter:none !important;opacity:1 !important} /* integration marquee: contain each logo in its equal cell so gaps stay even */ .logotrack .ilmark img{height:auto !important;max-height:38px !important;max-width:100% !important;width:auto !important} /* mobile type calm: Apple-scale headings + breathing line-height (heroes included) */ @media(max-width:680px){ .sec-pad h2:where(:not(.mayo-card *)){font-size:clamp(23px,6.8vw,28px) !important;line-height:1.14 !important;letter-spacing:-.025em !important} .sec-pad h3{font-size:clamp(16.5px,4.8vw,19px) !important;line-height:1.28 !important} .h-hero{font-size:clamp(28px,8.4vw,36px) !important;line-height:1.1 !important} .h-big{font-size:clamp(26px,7.8vw,33px) !important;line-height:1.12 !important} .eyebrow{font-size:12px !important;padding:6px 12px !important} } @keyframes nwtshift{from{background-position:0% 50%}to{background-position:100% 50%}} @media(prefers-reduced-motion:reduce){[style*="nwtshift"]{animation:none !important}} /* industries dropdown */ .navitem{position:relative} .navchev{width:12px;height:12px;transition:transform .25s;opacity:.6} .navitem:hover .navchev{transform:rotate(180deg)} .navdrop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);opacity:0;visibility:hidden;transition:opacity .24s,transform .24s;padding-top:14px;min-width:236px;z-index:220} .navitem:hover .navdrop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .navdrop-in{position:relative;overflow:hidden;background:rgba(17,18,22,.78);backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:8px;box-shadow:0 30px 70px -30px rgba(0,0,0,.7)} .drop-link{display:block;padding:11px 16px;border-radius:13px;text-decoration:none;color:rgba(255,255,255,.92);font-size:14px;font-weight:600;transition:background .2s} .drop-link:hover{background:rgba(255,255,255,.1);color:#fff} .drop-link.cur{background:rgba(255,255,255,.13);color:#fff} @media(max-width:860px){.navdrop{display:none}} /* standardized hero tagline — premium 29b */ @keyframes nwtpan{0%{background-position:0% 50%}100%{background-position:200% 50%}} @keyframes nwtwv{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}} .nwt-pan{background:linear-gradient(100deg,#fff 18%,#CBB2FF 38%,#FF8A7A 50%,#FF9D50 60%,#fff 82%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#fff;animation:nwtpan 8.5s linear infinite;filter:drop-shadow(0 2px 18px rgba(8,10,14,.4))} .nwt-wf{display:inline-flex;align-items:center;gap:3px;height:1em;opacity:.9} .nwt-wf i{display:block;width:2px;border-radius:9px;background:#fff;transform-origin:center;animation:nwtwv 1.3s ease-in-out infinite} @media(prefers-reduced-motion:reduce){.nwt-pan,.nwt-wf i{animation:none !important}} @keyframes nwteq{0%,100%{transform:scaleY(.68)}50%{transform:scaleY(1.06)}} @media(prefers-reduced-motion:reduce){[data-nwt-bars] i{animation:none !important}} /* mobile: center section headers */ @media(max-width:680px){ .two{justify-items:center;text-align:center} .two .eyebrow{margin-left:auto;margin-right:auto} .two h2,.two p{margin-left:auto !important;margin-right:auto !important} /* eyebrow wrapper direct in flow: center it and its following heading/copy */ .sec-pad div:has(>.eyebrow){text-align:center} .sec-pad div:has(>.eyebrow)+h2,.sec-pad div:has(>.eyebrow)+h2+p{text-align:center;margin-left:auto !important;margin-right:auto !important} /* header block with an intermediate wrapper (eyebrow one level down) */ .sec-pad div:has(>div>.eyebrow){text-align:center} .sec-pad div:has(>div>.eyebrow)>h2,.sec-pad div:has(>div>.eyebrow)>p{text-align:center;margin-left:auto !important;margin-right:auto !important} /* captioned card blocks (Every channel, one Kira etc.) */ .chx{text-align:center !important;justify-content:center !important;margin-left:auto;margin-right:auto} .chx+p.chx,p.chx{margin-left:auto;margin-right:auto} } /* integrations row: calm scale on phones */ @media(max-width:680px){ .intlogos{gap:20px 28px !important;max-width:320px !important} .intlogos img{height:22px !important;max-width:92px !important} .intlogos span{font-size:13.5px !important} } @keyframes nwtflow{to{stroke-dashoffset:-160}} @keyframes nwtflow2{to{stroke-dashoffset:-280}} @media(prefers-reduced-motion:reduce){footer svg path{animation:none !important}} /* mobile: proof ledger rows center-stack */ @media(max-width:680px){ .ledger>div{flex-direction:column !important;align-items:center !important;text-align:center;gap:10px !important} /* live-demo picker: chips as centered wrap row */ .kvx .kvx-chips{flex-direction:row !important;flex-wrap:wrap !important;justify-content:center !important;gap:8px !important} .kvx .kvx-chip{font-size:13px !important;padding:8px 14px !important} .kvx .kvx-name,.kvx .kvx-foot{text-align:center !important} } @keyframes cuearrow{0%{transform:translateY(-5px);opacity:0}35%{opacity:.95}70%{transform:translateY(5px);opacity:.95}100%{transform:translateY(9px);opacity:0}} @media(prefers-reduced-motion:reduce){#cinecue svg{animation:none !important}} @keyframes nwtdrift{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.nwt-ripples svg{animation:none !important}} /* Chat FAB temporarily removed site-wide */ .rzfab,.rzchat{display:none !important} html{background:#0E0D0B} @media(max-width:640px){#cinehero,#cinehero>div{background-color:var(--dark) !important}} /* Scroll reveals are DISABLED here: content paints visible immediately and never gates on JS. The reveal-on/IntersectionObserver entrance system leaves [data-rv] stuck at opacity:0 on the cinematic pages (home/sports/healthcare/business), whose elements sit inside cine.js-transformed sticky containers the observer never marks in-view — so we force everything visible. Motion stays via parallax, hover, hero scrub, counters and marquees. !important beats per-page inline [data-rv] rules. */ [data-rv]{opacity:1 !important;transform:none !important;filter:none !important;will-change:auto !important} [data-rv][data-in="1"]{animation:none !important} /* Center all parallax hero/CTA photos on tablet & mobile (parallax is desktop-only; the desktop -5%/110% offset otherwise crops the subject off to one side). */ @media(max-width:1024px){ [data-par-box]{inset:0 !important;left:0 !important;top:0 !important;width:100% !important;height:100% !important;transform:none !important;object-position:center !important} } /* ---- premium hover pass (desktop pointers only) ---- */ .team-card{transition:transform .4s cubic-bezier(.2,.8,.3,1),box-shadow .4s ease} .cscard{transition:transform .4s cubic-bezier(.2,.8,.3,1)} .certwall img{transition:transform .35s ease} @media(hover:hover){ .team-card:hover{transform:translateY(-8px);box-shadow:0 34px 64px -40px rgba(20,18,14,.4)} .cscard:hover{transform:translateY(-6px)} .certwall img:hover{transform:translateY(-4px) scale(1.06)} .faq summary:hover{background:rgba(20,16,11,.03)} } /* Keyboard-focus ring — on-brand, only for :focus-visible so mouse/touch users never see it. Subtle premium + accessibility. */ a:focus-visible,button:focus-visible,[role="button"]:focus-visible{outline:2px solid rgba(226,104,62,.85);outline-offset:3px;border-radius:10px}