html{scroll-behavior:smooth;overflow-x:clip;background:var(--bg-deep)} body{margin:0;background:var(--bg-deep);color:#FFFFFF;font-family:'Inter',sans-serif;line-height:1.5;overflow-x:clip;-webkit-font-smoothing:antialiased} a{color:var(--ss-mint);text-decoration:none} a:hover{color:var(--mint-bright)} ::selection{background:rgba(127,90,240,0.35)} @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes pulseDot{0%,100%{opacity:0.5;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}} @keyframes ringPulse{0%{transform:scale(0.6);opacity:0.7}100%{transform:scale(2.2);opacity:0}} /* The gradient CTA, the nav bar and its dropdowns now live in nav.css, which every page loads alongside this file (kura.html loads it alongside kura.css instead). */ @keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} @keyframes fpIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} @keyframes heroGlow{0%{opacity:0.6}100%{opacity:1}} @keyframes logoScroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 32px))}} @keyframes hiveDrift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} @keyframes quoteScroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 12px))}} .quote-scroll:hover{animation-play-state:paused} @keyframes sphereSpin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}} @keyframes kuraBar{0%,100%{transform:scaleY(0.25)}50%{transform:scaleY(1)}} @keyframes atlasFlow{to{stroke-dashoffset:-60}} @keyframes platStream{to{background-position:-48px 0}} @keyframes consentPop{0%{opacity:0;transform:translateY(115%)}6%,72%{opacity:1;transform:translateY(0)}80%,100%{opacity:0;transform:translateY(115%)}} @keyframes tapMove{0%,26%{opacity:0;transform:translate(77px,487px) scale(0.4)}30%{opacity:1;transform:translate(77px,487px) scale(1)}33%{opacity:1;transform:translate(77px,487px) scale(0.75)}38%{opacity:0.9;transform:translate(77px,487px) scale(1.05)}46%,100%{opacity:0;transform:translate(77px,487px) scale(1.4)}} @keyframes allowPress{0%,30%{box-shadow:0 0 0 0 rgba(44,182,125,0)}33%{box-shadow:0 0 0 6px rgba(44,182,125,0.35)}40%,100%{box-shadow:0 0 0 0 rgba(44,182,125,0)}} @keyframes consentDone{0%,36%{opacity:0;transform:scale(0.94)}44%,68%{opacity:1;transform:scale(1)}76%,100%{opacity:0;transform:scale(0.94)}} #contact input::placeholder, #contact textarea::placeholder{color:rgba(255,255,255,0.75)} #contact select option{color:#0D0C10} @keyframes consentBody{0%,34%{opacity:1}42%,100%{opacity:0}} /* These three drive the soft coloured halos behind the Products / Careers sections. They used to sit on elements carrying filter:blur(44-56px), which made every frame re-run a large-radius Gaussian over ~1.7M pixels inside a masked render surface — by far the biggest GPU-process cost on the page. The blur is gone: the halos are now pre-softened radial gradients (ellipse closest-side, so the falloff reaches zero exactly at the box edge instead of being clipped square), which is what the blur was really hiding. Every scale below is the original multiplied by 1.15 to make up the spread the blur used to add outside the box. Do not put filter: back on these elements. */ @keyframes loopHaloA{0%{transform:translate(-3%,2%) scale(1.15)}50%{transform:translate(4%,-2%) scale(1.32)}100%{transform:translate(-2%,3%) scale(1.09)}} @keyframes loopHaloB{0%{transform:translate(2%,-3%) scale(1.27)}50%{transform:translate(-3%,2%) scale(1.03)}100%{transform:translate(2%,3%) scale(1.38)}} @keyframes loopHaloC{0%{transform:translate(0,0) scale(1.03)}50%{transform:translate(3%,3%) scale(1.44)}100%{transform:translate(-3%,-2%) scale(1.15)}} .lang-switch{display:flex;align-items:center;gap:6px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.06em} .lang-btn{background:none;border:0;padding:2px;margin:0;cursor:pointer;color:#61616C;font:inherit} .lang-btn.is-active{color:#FFFFFF;font-weight:700} .lang-sep{color:#3A3A42} .hv64:hover, .hv65:hover{color:#FFFFFF} @media (max-width:860px){ .lang-switch{justify-content:center;padding:12px 14px;font-size:13px} [data-article]{padding-left:24px !important;padding-right:24px !important} .na-stats{grid-template-columns:1fr 1fr !important} .na-dash{grid-template-columns:1fr !important} .cr-section{padding-left:24px !important;padding-right:24px !important} .job-row{grid-template-columns:1fr !important;gap:8px !important} .job-apply{opacity:1 !important} .cr-culture-grid{grid-template-columns:1fr !important;gap:32px !important} .cr-principles{grid-template-columns:1fr !important} .cr-working{grid-template-columns:1fr 1fr !important} .jd-section{padding-left:24px !important;padding-right:24px !important} .jd-grid{grid-template-columns:1fr !important} .jd-aside{position:static !important;margin-top:40px} .now-grid{grid-template-columns:1fr !important;gap:48px !important} .now-side{position:static !important} .now-pad{padding:140px 24px 70px !important} .pp-grid{grid-template-columns:1fr !important;gap:32px !important} .pp-side{border-right:none !important;padding-right:0 !important} .pp-side-inner{position:static !important} .pp-pad{padding:140px 24px 70px !important} .pp-content{padding-left:0 !important} } .contact-mobile-cta{display:none} @media (max-width:900px){ .hero-fade{width:220px !important} .privacy-grid{grid-template-columns:1fr !important;gap:48px !important} .map-story-grid{grid-template-columns:1fr !important;gap:24px !important} .contact-grid{grid-template-columns:1fr !important;gap:40px !important;padding:40px 24px !important} .hero-actions{flex-direction:column !important} .hero-actions a{width:100% !important} .hero-copy{padding-left:0 !important} .news-grid{grid-template-columns:1fr !important} .news-copy{padding:28px 24px !important} .pillars-grid{grid-template-columns:1fr !important;gap:48px !important} .pillars-cards{grid-template-columns:1fr !important;gap:32px !important} .map-story-pad{padding:64px 20px !important} .signal-badge{right:14px !important;bottom:14px !important;font-size:9px !important;padding:6px 10px !important} .quote-scroll > div{width:min(340px,84vw) !important} .sec-pad{padding-left:24px !important;padding-right:24px !important} .footer-grid{grid-template-columns:1fr !important;gap:32px !important} .footer-pad{padding:56px 24px 40px !important} [data-screen-label="Home · Hero"]{padding:130px 24px 48px !important} [data-screen-label="Home · Pillars"] > div + div{padding:90px 24px !important} [data-screen-label="Home · Proof"]{padding:90px 20px 80px !important} [data-screen-label="Home · Quotes"]{padding:90px 0 32px !important} [data-screen-label="Home · Products"]{padding:90px 0 32px !important} [data-screen-label="Home · Privacy"]{padding:90px 0 0 !important} } @media (max-width:640px){ #contact-form{display:none !important} .contact-mobile-cta{display:flex !important} .contact-grid{border:none !important;border-radius:0 !important;background:transparent !important;padding:0 !important} .contact-word-accent{background:var(--gradient-hero);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .contact-intro{color:var(--fg-3) !important} } @media(max-height:780px){ .loop-grid{margin-top:130px !important} .loop-panel{height:min(520px, calc(100vh - 190px)) !important} .loop-panel [data-loop-text]{padding:22px 28px 20px !important} .loop-panel svg{height:60px;width:150px} .loop-panel h3{font-size:22px !important;margin-top:8px !important} .loop-panel p{font-size:13px !important;margin-top:8px !important} } /* Hover / focus states (converted from the design canvas style-hover / style-focus attributes) */ .hv13:hover{box-shadow:0 0 32px rgba(9,165,233,0.35);color:#FFFFFF} .hv14:hover{border-color:rgba(255,255,255,0.4);color:#FFFFFF} .hv15:hover{background:#1C1C22;color:#FFFFFF} .hv16:hover{border-color:rgba(255,255,255,0.4);color:#FFFFFF} .hv17:hover{border-color:rgba(127,90,240,0.4);background:rgba(8,7,10,0.9)} .hv18:hover{background:rgba(127,90,240,0.12);color:var(--kura-purple)} .hv19:hover{border-color:rgba(44,182,125,0.4);background:rgba(8,7,10,0.9)} .hv20:hover{background:rgba(44,182,125,0.12);color:var(--ss-mint)} .hv21:hover{border-color:rgba(9,165,233,0.4);background:rgba(8,7,10,0.9)} .hv22:hover{background:rgba(9,165,233,0.12);color:var(--atlas-cyan)} .fc24:focus{border-bottom-color:var(--ss-mint)} .fc25:focus{border-bottom-color:var(--ss-mint)} .fc26:focus{border-bottom-color:var(--ss-mint)} .fc27:focus{border-bottom-color:var(--ss-mint)} .fc28:focus{border-color:var(--ss-mint)} .hv29:hover{box-shadow:0 0 32px rgba(255,255,255,0.35);transform:translateY(-2px)} .hv30:hover{color:#FFFFFF} .hv31:hover{color:#FFFFFF} .hv32:hover{color:#FFFFFF} .hv33:hover{color:#FFFFFF} .hv34:hover{color:#FFFFFF} .hv35:hover{color:#FFFFFF} .hv36:hover{color:#FFFFFF} .hv37:hover{background:rgba(127,90,240,0.32);color:#FFFFFF} .hv38:hover{color:#FFFFFF;border-color:rgba(255,255,255,0.3)} .hv39:hover{color:#FFFFFF;border-color:rgba(255,255,255,0.3)} .hv40:hover{color:#FFFFFF} .hv41:hover{color:#FFFFFF} .hv42:hover{color:#FFFFFF} .hv43:hover{color:#FFFFFF} .hv44:hover{color:#FFFFFF} .hv45:hover{color:#FFFFFF} .hv46:hover{color:#FFFFFF} .hv47:hover{color:#FFFFFF} .hv48:hover{color:#FFFFFF} .hv49:hover{box-shadow:0 0 32px rgba(9,165,233,0.35);color:#FFFFFF} /* Now page (converted from Now.dc.html) */ .hv53:hover{color:#FFFFFF} .hv54:hover{color:#FFFFFF} .hv55:hover{color:#FFFFFF} .hv56:hover{color:#FFFFFF} .hv57:hover{color:#FFFFFF} .hv58:hover{color:#FFFFFF} .hv59:hover{border-color:rgba(255,255,255,0.4);color:#FFFFFF} .hv60:hover{color:#FFFFFF} /* Now feed filter chips: active state toggled by app.js via data-now-filter clicks */ .now-chip{border:1px solid rgba(255,255,255,0.15);color:#989898;background:transparent} .now-chip:hover{border-color:rgba(255,255,255,0.3);color:#FFFFFF} .now-chip.is-active,.now-chip.is-active:hover{border-color:transparent;color:#FFFFFF;background:linear-gradient(135deg,#7F5AF0,#09A5E9,#2CB67D,#09A5E9,#7F5AF0);background-size:300% 100%;background-position:0% 50%} .now-chip[data-now-filter="press"].is-active,.now-chip[data-now-filter="press"].is-active:hover{border-color:var(--atlas-cyan);color:#0D0C10;background:var(--atlas-cyan)} .now-chip[data-now-filter="case"].is-active,.now-chip[data-now-filter="case"].is-active:hover{border-color:var(--ss-mint);color:#0D0C10;background:var(--ss-mint)} .now-chip[data-now-filter="article"].is-active,.now-chip[data-now-filter="article"].is-active:hover{border-color:#B9B9C2;color:#0D0C10;background:#B9B9C2} .now-chip[data-now-filter="product"].is-active,.now-chip[data-now-filter="product"].is-active:hover{border-color:var(--kura-purple);color:#FFFFFF;background:var(--kura-purple)} .now-chip.is-active{animation:chipPop .35s cubic-bezier(0.34,1.56,0.64,1)} @keyframes chipPop{0%{transform:scale(0.9)}55%{transform:scale(1.08)}100%{transform:scale(1)}} /* Careers page (converted from Careers.dc.html) */ .job-row:hover{background:rgba(255,255,255,0.03)} .job-row:hover .job-apply{opacity:1} /* Job detail page (converted from JobDirectorKeyAccounts.dc.html) */ .jd-list{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px} .jd-list li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.7;color:#B8B8C0;text-wrap:pretty} .jd-list li::before{content:"";position:absolute;left:2px;top:11px;width:8px;height:2px;border-radius:2px;background:var(--ss-mint)} .hv50:hover{color:#FFFFFF} .hv51:hover{box-shadow:0 0 32px rgba(9,165,233,0.35);color:#FFFFFF} .hv52:hover{box-shadow:0 0 32px rgba(9,165,233,0.35);color:#FFFFFF} .hv60:hover{color:#FFFFFF} .hv61:hover{color:#FFFFFF} .hv62:hover{color:var(--mint-bright)} /* Privacy policy page (converted from the standalone privacy_policy.html doc) */ /* Long-form legal reading palette: cooler and dimmer than the marketing pages, so a full page of body copy stays comfortable. Scoped to this page only. */ .pp-pad{ --pp-heading:#F0F0F5; --pp-body:#C8C8D4; --pp-muted:#8A8A9A; --pp-dim:#5A5A6A; --pp-accent:var(--mint-bright); --pp-accent-dim:rgba(9,229,163,0.12); --pp-accent-glow:rgba(9,229,163,0.06); --pp-violet-glow:rgba(127,90,240,0.06); } .pp-side{border-right:1px solid rgba(255,255,255,0.08);padding-right:24px} .pp-section{scroll-margin-top:96px} .pp-toc-link{display:block;border-radius:8px;color:var(--pp-muted);text-decoration:none;border-left:2px solid transparent;transition:color .2s,background .2s,border-color .2s} .pp-toc-link:hover{color:var(--pp-heading);background:var(--pp-accent-glow);border-left-color:var(--pp-accent)} .pp-toc-link.is-active{color:var(--pp-accent);background:var(--pp-accent-dim);border-left-color:var(--pp-accent);font-weight:500} .hv63:hover{color:var(--pp-heading)} /* ——— Signal Precision media (home) ——— */ /* The story plays as a pre-rendered video (assets/signal-precision.*) recorded from map-story.js; the four steps beside it are its chapter menu. Highlight is a class, not inline styles, so app.js only ever toggles state. */ .map-step{display:block;width:100%;margin:0;padding:10px 14px;border:0;border-left:2px solid transparent;border-radius:12px;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;opacity:0.55;transition:opacity .3s,background-color .3s,border-color .3s} .map-step:hover{opacity:0.85} .map-step.is-active{opacity:1;border-left-color:var(--kura-purple);background:rgba(5,4,8,0.92)} .map-step:focus-visible{outline:2px solid var(--kura-purple);outline-offset:2px} .map-step-label{display:block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:#EDEDED} .map-step-body{display:block;margin:5px 0 0;font-size:12.5px;line-height:1.55;color:#FFFFFF} .signal-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover} /* Pinned over the visited store, at the spot the recording leaves empty for it — percentages, because the panel matches the video's aspect ratio exactly. The anchor is the card's centre, measured directly off the decoded video at a time inside the card's own visible window (CARD_IN..CARD_OUT in app.js) — NOT off tools/record-map-story.html's reported position, which samples whichever frame happened to draw last across the whole loop and can land mid-crossfade, long after the card should have hidden, with the camera already pulling back toward the wide Europe view. The 122px height is the size map-story.js drew this card at; the box stays fixed at every panel width for the same reason the canvas version did: the text has to stay readable when the scene around it scales down. */ .signal-card{position:absolute;left:53.958%;top:42.767%;transform:translate(-50%,-50%);box-sizing:border-box;width:224px;height:122px;padding:13px 16px;border-radius:10px;background:rgba(13,12,16,0.85);border:1px solid rgba(127,90,240,0.5);font-family:'Space Mono',monospace;opacity:0;transition:opacity .3s;pointer-events:none} .signal-card.is-visible{opacity:1} .signal-card-title{font-size:12px;line-height:1.2;font-weight:700;color:#FFFFFF} /* 76px label column matches the gap map-story.js drew this card with (label at cx0+16, value at cx0+92). The card is 12px wider than that canvas version so the value column still clears "4 visits / month" / "4 visites / mois" (both 16 monospace chars, 107.7px at 11px Space Mono) on one line, with the label column left at its original width instead of crowding "frequency" against it. */ .signal-card-rows{display:grid;grid-template-columns:76px 1fr;row-gap:4px;margin-top:10px;font-size:11px;line-height:1.25} .signal-card-rows span:nth-child(odd){color:#8A8A96} .signal-card-rows span:nth-child(even){color:#EDEDED;white-space:nowrap} /* Same corner and styling the canvas version put its phase badge in */ .signal-badge{position:absolute;right:25px;bottom:22px;pointer-events:none;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:#FFFFFF;background:rgba(13,12,16,0.7);border:1px solid rgba(127,90,240,0.7);border-radius:9999px;padding:7px 14px}