/* An original satin texture. Only its light layer moves. */
:root{--bg:#0b0c0e;--line:#383a3b;--muted:#b4b5b1}
body{position:relative;isolation:isolate;background:var(--bg)}
.material-surface{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#0b0c0e url('/assets/graphite-satin-v1.webp') center/cover no-repeat;contain:strict}
.material-surface::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,7,.12),rgba(5,6,7,.3) 70%,rgba(5,6,7,.42))}
.material-reflection{position:absolute;inset:-20%;background:linear-gradient(118deg,transparent 21%,rgba(205,214,217,.025) 31%,rgba(220,228,230,.085) 39%,rgba(205,214,217,.027) 46%,transparent 61%);transform:translate3d(0,0,0);opacity:.85}
.site-header{border-color:#484b4d}
.hero{padding-bottom:18px}
.hero-title-line{display:block;overflow:clip;padding-bottom:.06em;margin-bottom:-.06em}
.hero-title-line>span{display:block}
.hero-copy h1 em{color:#c8cccb;background:linear-gradient(112deg,#eeefea 4%,#a5abaa 42%,#d0d5d3 70%,#929998);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.experience-ready .hero-title-line>span{animation:hero-line-arrive 950ms cubic-bezier(.16,1,.3,1) both}
.experience-ready .hero-title-line:nth-child(2)>span{animation-delay:85ms}
.experience-ready .hero-title-line:nth-child(3)>span{animation-delay:170ms}
@keyframes hero-line-arrive{from{transform:translateY(28%);opacity:.62}to{transform:translateY(0);opacity:1}}
.hero-project{perspective:1400px}
.hero-project figure{position:relative;background:#111314;border:1px solid #565a5c;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 30px 65px -28px #000,0 6px 12px -7px #000;transform:rotateX(var(--plane-rx,0deg)) rotateY(var(--plane-ry,0deg)) translate3d(0,var(--plane-lift,0px),0);transition:transform 400ms cubic-bezier(.2,.75,.25,1),border-color 400ms,box-shadow 400ms;transform-style:preserve-3d}
.hero-project figure::after{content:'';position:absolute;inset:0;pointer-events:none;border:1px solid transparent;border-image:linear-gradient(130deg,rgba(255,255,255,.3),transparent 45%,rgba(255,255,255,.12)) 1}
.hero-project:is(:hover,:focus-visible) figure{border-color:#8a9193;box-shadow:0 1px 0 rgba(255,255,255,.17) inset,0 40px 75px -26px #000,0 10px 18px -8px #000}
.hero-project .project-strip,.hero-project figcaption{background:rgba(10,11,12,.8)}
.hero-description,.case-foot>p:not(.data-note),.narrative-row p{color:#c4c5c0}
.button{position:relative;overflow:hidden;transition:transform 250ms cubic-bezier(.16,1,.3,1),background 220ms,color 220ms,box-shadow 220ms;border-color:#5a5d5e;transform:translate3d(var(--magnet-x,0px),var(--magnet-y,0px),0)}
.button.light{box-shadow:0 1px 0 #fff inset,0 10px 22px -16px #000}
.button .arrow-icon{transition:transform 350ms cubic-bezier(.16,1,.3,1)}
.button:is(:hover,:focus-visible) .arrow-icon{transform:translateX(4px)}
.text-link:focus-visible .arrow-icon{transform:translate(3px,-3px)}
.sector-shortlist a{position:relative;transition:color 250ms}
.sector-shortlist a::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:#d6dddc;transform:scaleX(0);transform-origin:left;transition:transform 450ms cubic-bezier(.16,1,.3,1)}
.sector-shortlist a:is(:hover,:focus-visible)::after{transform:scaleX(1)}
.sector-shortlist .arrow-icon{transition:transform 350ms cubic-bezier(.16,1,.3,1)}
.sector-shortlist a:is(:hover,:focus-visible) .arrow-icon{transform:translate(4px,-4px)}
.product-row{position:relative;background:transparent}
.product-row h3,.product-row p{transition:transform 450ms cubic-bezier(.16,1,.3,1)}
.product-row::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,rgba(213,221,223,.065),transparent 70%);opacity:0;transition:opacity 350ms}
.product-row:is(:hover,:focus-visible) h3{transform:translateX(12px)}
.product-row:is(:hover,:focus-visible) p{transform:translateX(6px)}
.product-row:is(:hover,:focus-visible)::before{opacity:1}
.product-row>.arrow-icon,.work-row .arrow-icon{transition:transform 350ms cubic-bezier(.16,1,.3,1)}
.product-row:is(:hover,:focus-visible)>.arrow-icon,.work-row:is(:hover,:focus-visible) .arrow-icon{transform:translate(4px,-4px)}
.case-ui,.calma-menu-plane>img,.product-demo{box-shadow:0 25px 55px -36px #000,0 1px 0 rgba(255,255,255,.06) inset}
.case-process:before{background:#565b5c}
.case-process li::before{background:#858c8c;transition:background 300ms,box-shadow 300ms}
.case-process li.is-current::before{background:#edf1ed;box-shadow:0 0 0 4px rgba(229,237,233,.08)}
.case-process li h3{transition:color 300ms}
.case-process li.is-current h3{color:#fff}
@media(min-width:1000px){.motion-ready .calma-logo-plane{transform:translate(calc(var(--calma-p,var(--p,0))*var(--logo-dx,0px)),calc(var(--calma-p,var(--p,0))*var(--logo-dy,0px))) scale(calc(1 + var(--calma-p,var(--p,0))*(var(--logo-scale,1) - 1)))}.motion-ready .calma-logo-plane span{opacity:calc(1 - var(--calma-p,var(--p,0)))}}
.proof-image{display:block;overflow:hidden;background:#121414}
.proof-image img{transition:transform 1100ms cubic-bezier(.16,1,.3,1);transform:scale(1);transform-origin:50% 55%}
.proof-main:is(:hover,:focus-visible) img{transform:scale(1.035)}
.proof-secondary:is(:hover,:focus-visible) img{transform:scale(1.025);transition-duration:1500ms}
.proof-spread h3 .arrow-icon{transition:transform 350ms cubic-bezier(.16,1,.3,1)}
.proof-spread a:is(:hover,:focus-visible) .arrow-icon{transform:translate(4px,-4px)}
/* Native switch: the public menu physically closes around the same item. */
.product-demo [data-demo-menu-product=toast]{display:grid;grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows 350ms cubic-bezier(.16,1,.3,1),opacity 220ms,border-color 350ms,visibility 0s}
.product-demo .menu-item-reveal{min-height:0;overflow:hidden}
.product-demo:has([data-demo-visibility]:not(:checked)) [data-demo-menu-product=toast]{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;border-bottom-color:transparent;border-bottom-width:0;transition:grid-template-rows 350ms cubic-bezier(.16,1,.3,1),opacity 220ms,border-color 350ms,visibility 0s linear 350ms}
.product-demo .demo-menu-hidden-message{animation:menu-message-arrive 350ms ease both}
@keyframes menu-message-arrive{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(hover:none),(pointer:coarse){.material-surface{background-position:43% center}.material-reflection{opacity:.7;transform:none!important}.hero-project figure{transform:none!important}.button{transform:none!important}.product-row:is(:hover,:focus-visible) h3,.product-row:is(:hover,:focus-visible) p{transform:none}}
@media(max-width:760px){.material-surface::after{background:linear-gradient(180deg,rgba(5,6,7,.04),rgba(5,6,7,.2))}.hero-project figure{box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 20px 38px -23px #000}.hero-title-line{overflow:visible}}
@media(prefers-reduced-motion:reduce){.material-reflection,.hero-project figure,.button,.proof-image img{transform:none!important}.experience-ready .hero-title-line>span{animation:none;opacity:1;transform:none}.motion-ready .calma-logo-plane{transform:none!important}.case-process li.is-current::before{box-shadow:none}.product-row:is(:hover,:focus-visible) h3,.product-row:is(:hover,:focus-visible) p{transform:none}.product-demo [data-demo-menu-product=toast]{transition:none}}
@media(forced-colors:active){.material-surface{display:none}.hero-copy h1 em{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}}
@media print{.material-surface{display:none}}