:root{--acid:#FFE800;--ink:#24292b;--ink-2:#303638;--paper:#f3f1eb;--paper-2:#e9e6de;--white:#fff;--muted:#777e80;--line:rgba(36,41,43,.17);--line-dark:rgba(255,255,255,.16);--display:'Funnel Display',sans-serif;--body:'Plus Jakarta Sans',sans-serif;--shell:min(1660px,calc(100vw - 48px))}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:92px}body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}body.menu-open{overflow:hidden}a{color:inherit}img,video{display:block;max-width:100%}button,input,textarea{font:inherit}.shell{width:var(--shell);margin-inline:auto}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;left:16px;top:-80px;z-index:9999;background:var(--acid);padding:12px 18px;font-weight:800}.skip-link:focus{top:16px}:focus-visible{outline:2px solid var(--acid);outline-offset:4px}
.site-header{position:fixed;inset:0 0 auto;z-index:100;padding:18px 0;color:#fff;border-bottom:1px solid transparent;transition:.25s ease}.site-header.scrolled{padding:10px 0;background:rgba(36,41,43,.93);backdrop-filter:blur(16px);border-color:var(--line-dark)}.header-inner{display:flex;align-items:center;gap:28px}.brand{margin-right:auto}.brand img{width:174px;height:auto}.main-nav{display:flex;align-items:center;gap:27px}.main-nav a{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;text-decoration:none;color:rgba(255,255,255,.72);transition:.2s}.main-nav a:hover{color:var(--acid)}.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;text-decoration:none;text-transform:uppercase;letter-spacing:.09em;font-size:.73rem;font-weight:800;transition:.25s}.button-header{padding:11px 15px;border:1px solid rgba(255,255,255,.45)}.button-header:hover{background:var(--acid);border-color:var(--acid);color:var(--ink)}.menu-toggle{display:none;background:none;border:1px solid var(--line-dark);width:44px;height:44px;padding:11px}.menu-toggle span:not(.sr-only){display:block;width:100%;height:2px;background:#fff;margin:5px 0;transition:.2s}
.hero{position:relative;min-height:860px;height:100svh;display:flex;align-items:center;background:#111819;color:#fff;overflow:hidden}.hero-media,.hero-wash,.hero-grid{position:absolute;inset:0}.hero-media video{width:100%;height:100%;object-fit:cover}.hero-wash{background:linear-gradient(90deg,rgba(15,22,24,.84) 0%,rgba(18,24,26,.62) 45%,rgba(18,24,26,.16) 78%,rgba(18,24,26,.03) 100%),linear-gradient(0deg,rgba(15,22,24,.34),transparent 48%)}.hero-grid{opacity:.13;background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(90deg,#000,transparent 72%)}.hero-inner{position:relative;z-index:2;padding-top:90px}.hero-copy{max-width:980px;margin-left:clamp(0px,3vw,55px)}.eyebrow{display:flex;align-items:center;gap:13px;color:rgba(255,255,255,.63);font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin-bottom:28px}.eyebrow:before{content:'';width:32px;height:1px;background:var(--acid)}.eyebrow span{color:var(--acid)}.eyebrow.dark{color:#71787a}.eyebrow.dark span{color:var(--ink)}.hero h1,.section-heading h2,.section-intro h2,.contact-copy h2{font-family:var(--display);font-weight:600;line-height:.98;letter-spacing:-.045em}.hero h1{font-size:clamp(3.5rem,5.7vw,6.5rem);max-width:920px}.hero h1 em,.section-heading h2 em,.section-intro h2 em,.contact-copy h2 em{font-style:normal;color:var(--acid)}.hero-lead{font-size:clamp(1.03rem,1.4vw,1.28rem);max-width:760px;margin:30px 0 34px;color:rgba(255,255,255,.9)}.hero-actions{display:flex;align-items:center;gap:30px}.button-primary{padding:17px 21px;background:var(--acid);color:var(--ink);min-width:220px}.button-primary:hover{background:#fff;transform:translateY(-2px)}.text-link{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;font-weight:800;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.metrics{background:var(--acid);padding:28px 0}.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr)}.metrics-grid>div{padding:0 36px;border-left:1px solid rgba(36,41,43,.28);display:flex;flex-direction:column}.metrics-grid>div:first-child{border:0;padding-left:0}.metrics strong{font-family:var(--display);font-size:2.25rem;line-height:1}.metrics span{font-size:.67rem;text-transform:uppercase;letter-spacing:.09em;margin-top:7px}
.section-pad{padding:130px 0}.section-heading h2,.section-intro h2,.contact-copy h2{font-size:clamp(2.8rem,4.5vw,5rem)}.section-heading h2 em,.section-intro h2 em{color:#737a7c}.section-intro{display:grid;grid-template-columns:.75fr 2fr;gap:6vw;align-items:start;margin-bottom:75px}.section-intro>div>p{margin-top:25px;max-width:660px;color:var(--muted)}
.about{padding-bottom:0;background:#eeece8}.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw}.statement{font-family:var(--display);font-size:clamp(1.7rem,2.5vw,2.7rem);line-height:1.18;margin-bottom:55px}.statement mark{background:var(--acid);padding:0 .12em}.pillars{border-top:1px solid var(--line)}.pillars article{display:grid;grid-template-columns:50px .7fr 1fr;gap:22px;padding:25px 0;border-bottom:1px solid var(--line);align-items:start}.pillars span{font-size:.63rem;letter-spacing:.1em;color:#7d8485;padding-top:5px}.pillars h3{font-family:var(--display);font-size:1.35rem}.pillars p{font-size:.86rem;color:var(--muted)}.about-media{margin-top:100px;height:min(57vw,720px);overflow:hidden;background:#15191a}.about-media img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.9);transition:transform 1s ease}.about-media:hover img{transform:scale(1.025)}.about-media.scroll-video{position:relative;height:calc(100vh - 68px);height:calc(100svh - 68px);min-height:0;max-height:none;isolation:isolate;contain:paint;background:#eeece8}.scroll-video video,.scroll-video-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}.scroll-video video{z-index:1;display:block;opacity:0;pointer-events:none;transition:opacity .45s ease}.scroll-video-fallback{z-index:0;opacity:1;transition:opacity .45s ease!important;transform:none!important}.scroll-video.is-video-ready video{opacity:1}.scroll-video.is-video-ready .scroll-video-fallback{opacity:0}.scroll-video:hover .scroll-video-fallback{transform:none}
.work{background:var(--ink);color:#fff}.work .section-intro>div>p{color:rgba(255,255,255,.62)}.case-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}.case-card{position:relative;display:flex;flex-direction:column;background:var(--ink);padding:0 24px 27px;text-decoration:none;overflow:hidden;min-width:0}.case-card img{width:calc(100% + 48px);max-width:none;height:auto;aspect-ratio:4/3;margin:0 -24px 22px;object-fit:cover;filter:saturate(.78);transition:.45s}.case-card:hover img{transform:scale(1.025);filter:saturate(1)}.case-wide{grid-column:span 2}.case-wide img{aspect-ratio:2/1}.case-meta{font-size:.58rem;letter-spacing:.12em;color:var(--acid)}.case-card h3{font-family:var(--display);font-size:1.65rem;font-weight:600;margin:7px 42px 2px 0}.case-card p{font-size:.76rem;color:rgba(255,255,255,.58);min-height:2.4em}.case-card i{position:absolute;right:24px;bottom:27px;font-style:normal;font-size:1.25rem;opacity:.5;transition:.2s}.case-card:hover i{opacity:1;color:var(--acid);transform:translate(3px,-3px)}
.services{background:var(--paper)}.services-heading{margin-bottom:35px}.services-heading h2{font-family:var(--display);font-size:clamp(2.8rem,4.6vw,5rem);font-weight:600;line-height:.98;letter-spacing:-.045em}.services-heading h2 em{font-style:italic;color:#72797a}.services-heading h2 mark{background:var(--acid);padding:0 .12em}.service-rows{border-top:1px solid var(--line)}.service-row{display:grid;grid-template-columns:80px .9fr 1.35fr;gap:38px;padding:44px 0;border-bottom:1px solid var(--line);align-items:start}.service-num,.service-head>p,.service-body b{font-size:.62rem;letter-spacing:.1em;font-weight:500;color:var(--muted)}.service-num{padding-top:10px}.service-head h3{font-family:var(--display);font-size:2.15rem;line-height:1.1;margin-bottom:15px}.service-head h3 a{text-decoration:none;background-image:linear-gradient(var(--acid),var(--acid));background-position:0 100%;background-repeat:no-repeat;background-size:0 8px;transition:.25s}.service-row:hover .service-head h3 a{background-size:100% 8px}.service-head>p{line-height:1.85}.service-body>p{color:#535a5c;margin-bottom:14px;max-width:760px}.service-body b{color:var(--ink);margin-right:7px}.service-more{display:inline-block;margin-top:8px;padding:12px 22px;border:1px solid var(--ink);text-decoration:none;font-size:.78rem;font-weight:800;transition:.2s}.service-more:hover{background:var(--acid);border-color:var(--acid)}
.method{background:var(--ink);color:#fff;position:relative;overflow:hidden}.method:before{content:'IDEA';position:absolute;right:-2vw;bottom:-9vw;font-family:var(--display);font-size:25vw;font-weight:700;color:rgba(255,255,255,.018);line-height:1}.method .section-intro>div>p{color:rgba(255,255,255,.58)}.method-list{position:relative;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}.method-list li{min-height:260px;padding:26px;border-left:1px solid var(--line-dark);transition:.25s}.method-list li:first-child{border-left:0}.method-list li:hover{background:var(--acid);color:var(--ink)}.method-list span{font-size:.63rem;letter-spacing:.12em;color:var(--acid)}.method-list li:hover span{color:var(--ink)}.method-list h3{font-family:var(--display);font-size:2.15rem;margin:85px 0 8px}.method-list p{font-size:.8rem;color:rgba(255,255,255,.58)}.method-list li:hover p{color:var(--ink)}
.clients{background:var(--paper-2)}.logo-grid{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line);background:var(--line);gap:1px}.logo-grid figure{background:var(--paper-2);height:155px;padding:25px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.logo-grid img{width:100%;height:62px;object-fit:contain;filter:grayscale(1);opacity:.78;transition:.25s}.logo-grid figure:hover img{filter:none;opacity:1}.logo-grid figcaption{font-size:.54rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:center}
.faq{background:var(--paper)}.faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:9vw}.dark-link{display:inline-block;margin-top:40px;color:var(--ink)}.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line)}.faq-list summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 30px;gap:25px;align-items:center;padding:25px 5px;font-family:var(--display);font-size:1.35rem;font-weight:600}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{font-family:var(--body);font-weight:400;text-align:right}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list details p{max-width:700px;padding:0 55px 27px 5px;color:var(--muted);font-size:.87rem}
.contact{background:#171b1c;color:#fff}.contact-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(55px,7vw,110px);align-items:start}.contact-copy h2 mark{display:inline;background:var(--acid);color:var(--ink);padding:0 .12em}.contact-copy>p:not(.eyebrow){color:rgba(255,255,255,.73);max-width:600px;margin:28px 0 38px}.contact-data{list-style:none;border-top:1px solid var(--line-dark);margin-top:20px}.contact-data li{display:grid;grid-template-columns:100px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--line-dark);font-size:.88rem}.contact-data a{text-decoration:none}.contact-data span{color:rgba(255,255,255,.45);font-size:.62rem;letter-spacing:.09em;padding-top:4px}.contact-data b{font-weight:500}.contact-social{display:flex;gap:25px;margin-top:34px}.contact-social a{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;text-decoration:none}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px;padding:clamp(28px,3vw,45px);border:1px solid var(--line-dark);background:transparent;color:#fff}.honeypot{position:absolute!important;left:-9999px!important}.contact-form label>span:first-child{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;font-weight:500;color:rgba(255,255,255,.57);margin-bottom:8px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid var(--line-dark);background:transparent;color:#fff;padding:13px 14px;outline:none;border-radius:0}.contact-form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F7F7F7' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}.contact-form select:invalid{color:rgba(255,255,255,.45)}.contact-form option{color:var(--ink)}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--acid)}.contact-form textarea{resize:vertical}.contact-form .full{grid-column:1/-1}.contact-form .consent{display:flex;gap:10px;font-size:.67rem;color:rgba(255,255,255,.68)}.contact-form .consent input{width:auto;accent-color:var(--acid);margin-top:3px}.contact-form .consent span{display:block!important;text-transform:none!important;letter-spacing:0!important;font-weight:400!important;margin:0!important;color:inherit!important}.contact-form .consent a{color:#fff}.submit-button{border:0;background:var(--acid);color:var(--ink);padding:17px 19px;display:flex;justify-content:center;gap:20px;text-transform:uppercase;font-size:.72rem;letter-spacing:.09em;font-weight:800;cursor:pointer}.submit-button:hover{background:#fff}.submit-button:disabled{opacity:.6;cursor:wait}.form-status{min-height:20px;font-size:.72rem}.form-status.success{color:#7ee0a2}.form-status.error{color:#ff9c8c}
.footer{background:#171d1e;color:#fff;padding:70px 0 24px}.footer-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:70px;align-items:start;padding-bottom:55px}.footer-top img{width:190px}.footer-top p{font-family:var(--display);font-size:1.2rem;color:rgba(255,255,255,.68)}.footer-top>div{display:flex;flex-direction:column;align-items:flex-end;gap:7px}.footer-top>div a{text-decoration:none;font-size:.75rem}.footer-bottom{border-top:1px solid var(--line-dark);padding-top:21px;display:flex;justify-content:space-between;gap:25px;font-size:.56rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.45)}.footer-bottom a{text-decoration:none}.wa-float{position:fixed;right:22px;bottom:22px;z-index:80;width:56px;height:56px;border-radius:50%;background:var(--acid);display:grid;place-items:center;box-shadow:0 12px 28px rgba(0,0,0,.25)}.wa-float img{width:28px}.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}
@media(max-width:1180px){.main-nav{gap:17px}.main-nav a{font-size:.64rem}.case-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.service-row{grid-template-columns:65px .85fr 1.25fr;gap:24px}.logo-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){:root{--shell:min(100% - 40px,800px)}.section-pad{padding:95px 0}.menu-toggle{display:block;order:2}.button-header{order:3}.brand{order:1}.main-nav{position:fixed;inset:65px 0 auto;background:var(--ink);padding:35px 20px 45px;display:flex;flex-direction:column;align-items:flex-start;gap:22px;transform:translateY(-130%);opacity:0;pointer-events:none;transition:.25s}.main-nav.open{transform:none;opacity:1;pointer-events:auto}.main-nav a{font-family:var(--display);font-size:1.8rem;text-transform:none;letter-spacing:0}.hero{height:auto;min-height:900px;padding:160px 0 115px}.hero-inner{padding-top:0}.hero-copy{margin-left:0}.metrics-grid{grid-template-columns:1fr 1fr;gap:25px 0}.metrics-grid>div:nth-child(3){border-left:0;padding-left:0}.section-intro,.about-grid,.faq-grid,.contact-grid{grid-template-columns:1fr;gap:50px}.pillars article{grid-template-columns:45px .8fr 1fr}.case-grid{grid-template-columns:1fr 1fr}.case-wide{grid-column:span 2}.service-row{grid-template-columns:55px 1fr}.service-body{grid-column:2}.method-list{grid-template-columns:1fr 1fr}.method-list li:nth-child(3){border-left:0;border-top:1px solid var(--line-dark)}.method-list li:nth-child(4){border-top:1px solid var(--line-dark)}.logo-grid{grid-template-columns:repeat(3,1fr)}.footer-top{grid-template-columns:1fr 1fr}.footer-top p{display:none}.footer-top>div{align-items:flex-start}}
@media(max-width:620px){:root{--shell:calc(100% - 32px)}.site-header{padding:12px 0}.brand img{width:138px}.button-header{font-size:0;width:44px;height:44px;padding:0;gap:0}.button-header span{font-size:1rem}.hero{min-height:790px;padding:130px 0 90px}.hero-wash{background:linear-gradient(90deg,rgba(15,22,24,.88),rgba(15,22,24,.48)),linear-gradient(0deg,rgba(15,22,24,.5),transparent)}.hero h1{font-size:clamp(2.8rem,13vw,4.2rem)}.hero-actions{align-items:flex-start;flex-direction:column}.metrics{padding:24px 0}.metrics-grid>div{padding:0 15px}.metrics strong{font-size:1.8rem}.metrics span{font-size:.57rem}.section-pad{padding:80px 0}.section-heading h2,.section-intro h2,.contact-copy h2{font-size:2.65rem}.section-intro{margin-bottom:48px}.pillars article{grid-template-columns:34px 1fr}.pillars p{grid-column:2}.about-media{margin-top:65px;height:78vw}.case-grid{grid-template-columns:1fr}.case-wide{grid-column:auto}.case-card img,.case-wide img{aspect-ratio:4/3}.service-row{grid-template-columns:1fr;gap:14px}.service-body{grid-column:1}.service-num{padding-top:0}.method-list{grid-template-columns:1fr}.method-list li,.method-list li:nth-child(3),.method-list li:nth-child(4){border-left:0;border-top:1px solid var(--line-dark);min-height:210px}.method-list li:first-child{border-top:0}.method-list h3{margin-top:55px}.logo-grid{grid-template-columns:1fr 1fr}.logo-grid figure{height:130px}.faq-list summary{font-size:1.12rem}.contact-form{grid-template-columns:1fr;padding:30px 20px}.contact-form label,.contact-form .full{grid-column:1}.contact-data li{grid-template-columns:75px 1fr}.footer-top{grid-template-columns:1fr;gap:35px}.footer-bottom{flex-direction:column;line-height:1.5}.wa-float{width:50px;height:50px;right:15px;bottom:15px}}
.case-grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row}
.case-grid .case-card{grid-column:span 3}
.case-grid .case-card img{aspect-ratio:1/1}
.case-grid .case-card:nth-child(1),.case-grid .case-card:nth-child(6),.case-grid .case-card:nth-child(11),.case-grid .case-card:nth-child(16),.case-grid .case-card:nth-child(21){grid-column:span 6}
.case-grid .case-card:nth-child(1) img,.case-grid .case-card:nth-child(6) img,.case-grid .case-card:nth-child(11) img,.case-grid .case-card:nth-child(16) img,.case-grid .case-card:nth-child(21) img{aspect-ratio:2/1}
.services-heading h2,.contact-copy h2{line-height:1.08}
.services-heading h2 mark,.contact-copy h2 mark{padding:.02em .13em .08em;line-height:1.18;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media(max-width:1180px){.case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.case-grid .case-card{grid-column:span 1}.case-grid .case-card img{aspect-ratio:4/3}}
@media(max-width:620px){.case-grid{grid-template-columns:1fr}.case-grid .case-card{grid-column:span 1}}
.service-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border:1px solid var(--line);background:var(--line)}
.service-row{display:grid;grid-template-columns:58px minmax(0,1fr);grid-template-rows:auto 1fr;gap:18px 22px;min-height:315px;padding:38px;background:var(--paper);border:0}
.service-num{grid-column:1;grid-row:1;padding-top:8px}
.service-head{grid-column:2;grid-row:1}
.service-body{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-items:flex-start}
.service-body>p{margin:0 0 18px}
.service-more{margin-top:auto}
.clients{padding-top:95px;padding-bottom:95px}
.clients .section-intro{margin-bottom:48px}
.clients .section-intro h2{font-size:clamp(2.6rem,3.7vw,4.1rem)}
.logo-grid{grid-template-columns:repeat(9,minmax(0,1fr))}
.logo-grid figure{height:108px;padding:15px 12px;gap:7px}
.logo-grid img{height:42px}
.logo-grid figcaption{font-size:.48rem}
.method-trigger{display:block;width:100%;color:inherit;border:0;background:none;text-align:left;cursor:default}
@media(max-width:1180px){.logo-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:900px){.case-grid{grid-template-columns:1fr}.case-grid .case-card{grid-column:span 1}.case-grid .case-card img{aspect-ratio:4/3}.logo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.service-rows{grid-template-columns:1fr}.service-row{min-height:0;padding:30px 24px}.method-list{display:block;border-bottom:1px solid var(--line-dark)}.method-list .method-item,.method-list .method-item:nth-child(3),.method-list .method-item:nth-child(4){min-height:0;padding:0;border-left:0;border-top:1px solid var(--line-dark);background:transparent;color:#fff}.method-list .method-item:first-child{border-top:0}.method-trigger{width:100%;display:grid;grid-template-columns:62px 1fr 24px;align-items:center;gap:12px;padding:22px 4px;color:#fff;border:0;background:transparent;text-align:left;cursor:pointer}.method-trigger:after{content:'+';font-size:1.4rem;font-weight:300;text-align:right;color:var(--acid)}.method-item.open .method-trigger:after{content:'−'}.method-list h3,.method-list .method-item:hover h3{font-size:1.65rem;margin:0;color:#fff}.method-list span,.method-list .method-item:hover span{color:var(--acid)}.method-list .method-item>p,.method-list .method-item:hover>p{max-height:0;overflow:hidden;margin:0;padding:0 42px 0 78px;opacity:0;color:rgba(255,255,255,.64);transition:max-height .3s ease,padding .3s ease,opacity .2s ease}.method-list .method-item.open>p{max-height:120px;padding-bottom:24px;opacity:1}.logo-grid{display:flex;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scroll-padding-inline:1px;gap:1px;border:0;background:var(--line);scrollbar-width:none}.logo-grid::-webkit-scrollbar{display:none}.logo-grid figure{flex:0 0 min(76vw,290px);height:145px;scroll-snap-align:start}.logo-grid img{height:58px}.clients{padding-top:75px;padding-bottom:75px}.clients .section-intro{margin-bottom:36px}}
.logo-grid{display:flex;grid-template-columns:none;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:none;gap:1px;border:0;background:var(--line);scrollbar-width:none;cursor:grab}
.logo-grid::-webkit-scrollbar{display:none}
.logo-grid:active{cursor:grabbing}
.logo-grid figure{flex:0 0 160px;height:100px;padding:14px 12px;gap:6px;background:var(--paper-2)}
.logo-grid img{height:38px}
.logo-grid figcaption{font-size:.46rem}
@media(hover:hover){.case-card{transition:background-color .25s ease,transform .25s ease}.case-card:hover{background:#2a3032;transform:translateY(-3px)}.service-row{transition:background-color .25s ease,transform .25s ease}.service-row:hover{background:#eeece5;transform:translateY(-2px)}.logo-grid figure{transition:background-color .25s ease}.logo-grid figure:hover{background:#fff}.button span,.case-card i,.service-more{transition:transform .22s ease}.button:hover span{transform:translate(3px,-3px)}.service-more:hover{transform:translateY(-2px)}}
@media(max-width:900px){
.case-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-auto-columns:0!important;grid-auto-flow:row!important}
.case-grid .case-card,.case-grid .case-card:nth-child(n),.case-grid .case-wide{grid-column:1/-1!important;width:100%;min-width:0}
.case-grid .case-card img,.case-grid .case-card:nth-child(n) img,.case-grid .case-wide img{aspect-ratio:4/3!important}
.main-nav{inset:64px 0 0;min-height:calc(100dvh - 64px);padding:clamp(55px,12vh,100px) 32px 45px;justify-content:flex-start;gap:15px;transform:translateY(-18px);clip-path:inset(0 0 100% 0);opacity:0;transition:clip-path .38s cubic-bezier(.22,1,.36,1),transform .38s cubic-bezier(.22,1,.36,1),opacity .24s ease}
.main-nav.open{transform:none;clip-path:inset(0);opacity:1}
.main-nav a{font-size:1.38rem;line-height:1.15;opacity:0;transform:translateY(14px);transition:opacity .28s ease,transform .34s cubic-bezier(.22,1,.36,1)}
.main-nav.open a{opacity:1;transform:none}
.main-nav.open a:nth-child(1){transition-delay:.08s}.main-nav.open a:nth-child(2){transition-delay:.12s}.main-nav.open a:nth-child(3){transition-delay:.16s}.main-nav.open a:nth-child(4){transition-delay:.20s}.main-nav.open a:nth-child(5){transition-delay:.24s}
.logo-grid figure{flex-basis:145px;height:92px;padding:12px 10px}
.logo-grid img{height:34px}
}
@media(max-width:620px){.case-card{padding-left:20px;padding-right:20px}.case-card img{width:calc(100% + 40px);margin-left:-20px;margin-right:-20px}.logo-grid figure{flex-basis:135px;height:88px}.logo-grid img{height:32px}.clients{padding-top:68px;padding-bottom:68px}}
@media(prefers-reduced-motion:reduce){.main-nav,.main-nav a,.case-card,.service-row,.logo-grid figure{transition:none!important}.logo-grid{scroll-behavior:auto}}
.hero h1{font-size:clamp(3.15rem,5vw,5.7rem);max-width:820px}
.hero-lead{max-width:650px}
.reveal{transform:translateY(42px) scale(.985);transition:opacity .85s ease,transform .85s cubic-bezier(.22,1,.36,1)}
.reveal.visible{transform:none}
@media(hover:hover){.about-media img,.case-card img,.proof-image img{transition-duration:.75s}.about-media:hover img,.case-card:hover img,.proof-image:hover img{transform:scale(1.045)}}
@media(hover:hover){.scroll-video:hover .scroll-video-fallback{transform:none}}
@media(prefers-reduced-motion:reduce){.scroll-video video{display:none}.scroll-video-fallback{opacity:1!important}}
@media(max-width:620px){.scroll-video video,.scroll-video-fallback{object-fit:cover;object-position:center center}}
@media(max-width:760px){.method-list .method-item,.method-list .method-item:hover,.method-list .method-item:active,.method-list .method-item:focus-within,.method-list .method-item.open,.method-list .method-item.open:hover{background:transparent!important;color:#fff!important}.method-list .method-item h3,.method-list .method-item:hover h3,.method-list .method-item:active h3,.method-list .method-item:focus-within h3,.method-list .method-item.open h3{color:#fff!important}.method-list .method-item span,.method-list .method-item:hover span,.method-list .method-item:active span,.method-list .method-item:focus-within span{color:var(--acid)!important}.method-list .method-item>p,.method-list .method-item:hover>p,.method-list .method-item:active>p,.method-list .method-item:focus-within>p,.method-list .method-item.open>p{color:rgba(255,255,255,.64)!important}.method-trigger,.method-trigger:hover,.method-trigger:active,.method-trigger:focus{background:transparent!important;color:#fff!important}.hero h1{font-size:clamp(2.65rem,11vw,3.65rem);line-height:1.01}.hero-lead{font-size:.95rem;line-height:1.55;max-width:430px}.hero-actions .button-primary{min-width:190px;padding:15px 18px}}
.home-industries{background:#eeece8;color:#1a1b1d}.retail-feature{display:grid;grid-template-columns:.82fr 1.18fr;min-height:610px;background:var(--ink-deep);color:#fff;overflow:hidden}.retail-feature-copy{padding:clamp(42px,6vw,92px);display:flex;flex-direction:column;justify-content:center}.retail-feature h2,.industry-summary h2{font-family:var(--display);font-size:clamp(2.75rem,5vw,5.8rem);line-height:.96;letter-spacing:-.05em}.retail-feature h2 em,.industry-summary h2 em{color:#858c8e;font-style:normal}.retail-feature-copy>p:not(.eyebrow){max-width:690px;margin:28px 0 34px;color:rgba(255,255,255,.7);font-size:1rem;line-height:1.65}.retail-feature-media{display:block;min-height:500px;overflow:hidden}.retail-feature-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}.retail-feature-media:hover img{transform:scale(1.045)}.industry-summary{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(50px,8vw,140px);margin-top:clamp(75px,9vw,135px)}.industry-summary-head>p:not(.eyebrow){max-width:740px;margin:28px 0 0;color:#596062;line-height:1.65}.industry-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid #d2d0ca}.industry-card-grid a{min-height:150px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid #d2d0ca;border-bottom:1px solid #d2d0ca;color:#1a1b1d;text-decoration:none;transition:background .25s,transform .25s}.industry-card-grid a:nth-child(2n){border-right:0}.industry-card-grid a:nth-last-child(-n+2){border-bottom:0}.industry-card-grid span{color:#8c9294;font-size:.62rem;letter-spacing:.1em}.industry-card-grid strong{font-family:var(--display);font-size:1.35rem}.industry-card-grid a:hover{background:var(--acid);transform:translateY(-3px)}
@media(min-width:1101px){.shared-footer-top{grid-template-columns:1.15fr .65fr .95fr 1.05fr .8fr}}
@media(max-width:900px){.retail-feature{grid-template-columns:1fr}.retail-feature-media{min-height:380px;order:-1}.industry-summary{grid-template-columns:1fr}.industry-card-grid{grid-template-columns:1fr}.industry-card-grid a,.industry-card-grid a:nth-child(2n),.industry-card-grid a:nth-last-child(-n+2){border-right:0;border-bottom:1px solid #d2d0ca}.industry-card-grid a:last-child{border-bottom:0}}
@media(max-width:620px){.retail-feature{margin-inline:-16px}.retail-feature-copy{padding:38px 24px}.retail-feature-media{min-height:300px}.retail-feature h2,.industry-summary h2{font-size:2.75rem}.industry-card-grid a{min-height:118px}.industry-summary{margin-top:72px}}
.market-note{margin:28px 0 0;padding:24px 0 0;border-top:1px solid var(--line);color:#555d5f;font-size:.94rem;line-height:1.7}
.service-row,.industry-card-grid a{position:relative;overflow:hidden}
.service-row::before,.industry-card-grid a::before{content:'';position:absolute;left:0;top:0;background:var(--card-accent,var(--acid))}
.service-row::before{width:4px;height:100%;transform:scaleY(.22);transform-origin:top;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.service-row:nth-child(1){--card-accent:var(--acid)}
.service-row:nth-child(2){--card-accent:#ff6b5e}
.service-row:nth-child(3){--card-accent:#8067ff}
.service-row:nth-child(4){--card-accent:#52c7c8}
.service-num{color:var(--card-accent,var(--muted))}
.industry-card-grid a::before{width:44px;height:4px}
.industry-card-grid a:nth-child(1),.industry-card-grid a:nth-child(5){--card-accent:#ff6b5e}
.industry-card-grid a:nth-child(2),.industry-card-grid a:nth-child(6){--card-accent:#8067ff}
.industry-card-grid a:nth-child(3){--card-accent:#52c7c8}
.industry-card-grid a:nth-child(4){--card-accent:var(--acid)}
.industry-card-grid a:hover{background:color-mix(in srgb,var(--card-accent) 18%,#fff)}
@media(hover:hover){.service-row:hover::before{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.service-row::before{transition:none}}
:root{--ui-acid:#FFE800;--ui-ink:#1a1b1d;--ui-line:rgba(255,255,255,.15);--ui-body:'Plus Jakarta Sans',sans-serif;--ui-display:'Funnel Display',sans-serif}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.mobile-menu-toggle{position:relative;z-index:1002}
.mobile-header-shortcut{display:none}
.mobile-menu-toggle span:not(.sr-only){transform-origin:center;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .2s ease}
.mobile-menu-toggle[aria-expanded=true] span:not(.sr-only):first-child{transform:translateY(3.5px) rotate(45deg)}
.mobile-menu-toggle[aria-expanded=true] span:not(.sr-only):nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.services-dropdown{position:relative;display:flex;align-items:center}.services-trigger{display:flex;align-items:center;gap:7px;border:0;background:none;color:rgba(255,255,255,.72);font:inherit;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:color .2s ease}.services-trigger:hover,.services-trigger:focus-visible,.services-trigger[aria-expanded=true]{color:var(--ui-acid)}.services-trigger-icon{display:inline-block;font-size:.85em;transition:transform .25s cubic-bezier(.22,1,.36,1)}.services-trigger[aria-expanded=true] .services-trigger-icon{transform:rotate(180deg)}.services-dropdown-panel{position:absolute;top:calc(100% + 18px);left:50%;z-index:1300;width:260px;padding:10px;background:#171d1e;border:1px solid rgba(255,255,255,.15);box-shadow:0 18px 50px rgba(0,0,0,.28);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-10px);transition:opacity .22s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility .22s}.services-dropdown-panel::before{content:"";position:absolute;inset:-19px 0 auto;height:19px}.services-dropdown-panel a{display:flex!important;align-items:center;justify-content:space-between;width:100%;padding:12px 13px!important;color:rgba(255,255,255,.76)!important;font-family:var(--ui-body)!important;font-size:.74rem!important;line-height:1.25!important;letter-spacing:.02em!important;text-align:left!important;text-decoration:none;text-transform:none!important;border-bottom:1px solid rgba(255,255,255,.08);transition:color .2s ease,background .2s ease,transform .2s ease!important}.services-dropdown-panel a:last-child{border-bottom:0}.services-dropdown-panel a::after{content:"↗";color:var(--ui-acid)}.services-dropdown-panel a:hover,.services-dropdown-panel a:focus-visible{color:#fff!important;background:rgba(255,255,255,.06);transform:translateX(3px)!important}.services-dropdown:hover .services-dropdown-panel,.services-dropdown:focus-within .services-dropdown-panel,.services-dropdown.open .services-dropdown-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
body.shared-menu-open,html.shared-menu-open{overflow:visible}
.shared-footer{background:var(--ui-ink);color:#fff;padding:72px 0 24px;border-top:3px solid var(--ui-acid)}
.shared-footer-shell{width:min(1660px,calc(100vw - 48px));margin-inline:auto}
.shared-footer-top{display:grid;grid-template-columns:minmax(250px,1.35fr) minmax(120px,.72fr) minmax(165px,1fr) minmax(190px,1fr) minmax(150px,.78fr);gap:clamp(26px,3vw,58px);align-items:start;padding-bottom:56px}
.shared-footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:24px}.shared-footer-logo{width:190px;height:auto}.shared-footer-copy{font-family:var(--ui-display);font-size:1.12rem;line-height:1.42;color:rgba(255,255,255,.67);max-width:390px;margin:0}
.shared-footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.shared-footer-links strong{margin-bottom:8px;color:var(--ui-acid);font-family:var(--ui-body);font-size:.61rem;letter-spacing:.13em;text-transform:uppercase}.shared-footer-links a{position:relative;font-family:var(--ui-body);font-size:.75rem;line-height:1.45;text-decoration:none;color:rgba(255,255,255,.76);transition:color .22s ease,transform .22s ease}.shared-footer-links a::after{content:'↗';display:inline-block;margin-left:7px;color:var(--ui-acid);opacity:0;transform:translate(-4px,3px);transition:opacity .22s ease,transform .22s ease}.shared-footer-links a:hover{color:#fff;transform:translateX(3px)}.shared-footer-links a:hover::after{opacity:1;transform:none}
.shared-footer-bottom{display:flex;justify-content:space-between;gap:24px;padding-top:22px;border-top:1px solid var(--ui-line);font-family:var(--ui-body);font-size:.58rem;line-height:1.6;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.48)}.shared-footer-bottom a{color:inherit;text-decoration:none}.shared-footer-bottom a:hover{color:var(--ui-acid)}
.wa-float{isolation:isolate;animation:wa-float 3.4s ease-in-out infinite}.wa-float::before{content:'';position:absolute;z-index:-1;inset:-1px;border:2px solid rgba(255,249,29,.68);border-radius:50%;animation:wa-ring 2.7s ease-out infinite;pointer-events:none}.wa-float:hover{animation-play-state:paused;transform:translateY(-4px) scale(1.06)}
@keyframes wa-float{0%,100%{transform:translateY(0) rotate(0)}48%{transform:translateY(-6px) rotate(-2deg)}56%{transform:translateY(-6px) rotate(2deg)}}
@keyframes wa-ring{0%{opacity:.8;transform:scale(.82)}75%,100%{opacity:0;transform:scale(1.55)}}
.cookie-banner{position:fixed;z-index:3000;left:50%;bottom:18px;width:min(720px,calc(100vw - 32px));padding:18px 20px;background:rgba(11,14,15,.97);color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 55px rgba(0,0,0,.42);transform:translate(-50%,calc(100% + 45px));opacity:0;transition:transform .48s cubic-bezier(.22,1,.36,1),opacity .3s ease;backdrop-filter:blur(14px)}
.cookie-banner.visible{transform:translate(-50%,0);opacity:1}.cookie-banner p{font-family:var(--ui-body);font-size:.75rem;line-height:1.55;color:rgba(255,255,255,.83)}.cookie-banner a{color:var(--ui-acid);font-weight:700}.cookie-actions{display:flex;gap:10px;margin-top:13px}.cookie-actions button{border:1px solid rgba(255,255,255,.25);padding:9px 15px;font-family:var(--ui-body);font-size:.68rem;font-weight:800;cursor:pointer}.cookie-accept{background:var(--ui-acid);border-color:var(--ui-acid)!important;color:#15191a}.cookie-reject{background:#4c5051;color:#fff}
@media(max-width:1100px) and (min-width:901px){.shared-footer-top{grid-template-columns:1.25fr 1fr 1fr;gap:38px 34px}}
@media(max-width:900px){
.site-header,.header{z-index:1200!important}
.site-header{position:fixed!important;inset:0 0 auto!important}
.brand,.header-logo,.header-actions,.header-cta,.header-inner>.button{position:relative;z-index:1002}
.header-nav{position:relative;z-index:1001!important}
.mobile-header-shortcut{display:none!important}
.mobile-menu-toggle{order:3;margin-left:auto;flex:0 0 44px}
[data-mobile-nav]{position:fixed!important;z-index:1000!important;inset:0!important;min-height:100dvh!important;margin:0!important;padding:clamp(105px,16vh,145px) 32px 45px!important;display:flex!important;flex-direction:column!important;align-items:flex-end!important;justify-content:flex-start!important;gap:14px!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch;touch-action:pan-y!important;background:rgba(28,34,36,.985)!important;list-style:none!important;text-align:right!important;clip-path:inset(0 0 100% 0)!important;opacity:0!important;transform:translateY(-16px)!important;pointer-events:none!important;transition:clip-path .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1),opacity .25s ease!important}
[data-mobile-nav].open{clip-path:inset(0)!important;opacity:1!important;transform:none!important;pointer-events:auto!important}
[data-mobile-nav] a{display:block!important;width:100%!important;text-align:right!important;font-family:var(--ui-display)!important;font-size:1.35rem!important;font-weight:500!important;line-height:1.1!important;letter-spacing:-.02em!important;text-transform:none!important;text-decoration:none!important;color:rgba(255,255,255,.78)!important;padding:9px 0!important;opacity:0;transform:translateY(20px);transition:color .2s ease,opacity .38s ease,transform .45s cubic-bezier(.22,1,.36,1)!important}
[data-mobile-nav].open a{opacity:1;transform:none}[data-mobile-nav].open a:nth-child(1){transition-delay:.08s!important}[data-mobile-nav].open a:nth-child(2){transition-delay:.13s!important}[data-mobile-nav].open a:nth-child(3){transition-delay:.18s!important}[data-mobile-nav].open a:nth-child(4){transition-delay:.23s!important}[data-mobile-nav].open a:nth-child(5){transition-delay:.28s!important}[data-mobile-nav].open a:nth-child(6){transition-delay:.33s!important}
[data-mobile-nav] a:hover,[data-mobile-nav] a:focus-visible{color:var(--ui-acid)!important;transform:translateX(-7px)!important}
[data-mobile-nav] .services-dropdown{display:flex!important;width:100%!important;flex-direction:column!important;align-items:flex-end!important}[data-mobile-nav] .services-trigger{display:flex!important;justify-content:flex-end;width:100%!important;padding:9px 0!important;color:rgba(255,255,255,.78)!important;font-family:var(--ui-display)!important;font-size:1.35rem!important;font-weight:500!important;line-height:1.1!important;letter-spacing:-.02em!important;text-transform:none!important;opacity:0;transform:translateY(20px);transition:color .2s ease,opacity .38s ease,transform .45s cubic-bezier(.22,1,.36,1)!important}[data-mobile-nav].open .services-trigger{opacity:1;transform:none;transition-delay:.23s!important}[data-mobile-nav] .services-dropdown-panel{position:static!important;width:100%!important;max-height:0;padding:0!important;background:transparent;border:0;border-right:1px solid rgba(255,249,29,.45);box-shadow:none;opacity:1;visibility:visible;overflow:hidden;pointer-events:none;transform:none!important;transition:max-height .38s cubic-bezier(.22,1,.36,1),padding .3s ease!important}[data-mobile-nav] .services-dropdown.open .services-dropdown-panel{max-height:260px;padding:3px 14px 9px 0!important;pointer-events:auto}[data-mobile-nav] .services-dropdown-panel::before{display:none}[data-mobile-nav] .services-dropdown-panel a{padding:9px 0!important;color:rgba(255,255,255,.6)!important;font-family:var(--ui-body)!important;font-size:.86rem!important;font-weight:500!important;letter-spacing:.01em!important;text-align:right!important;border-bottom:0;opacity:1!important;transform:none!important;transition:color .2s ease!important}[data-mobile-nav] .services-dropdown-panel a:hover,[data-mobile-nav] .services-dropdown-panel a:focus-visible{color:var(--ui-acid)!important;background:transparent;transform:none!important}
.shared-footer{padding:58px 0 22px}.shared-footer-shell{width:calc(100% - 32px)}.shared-footer-top{grid-template-columns:1.35fr 1fr;gap:34px 28px;padding-bottom:42px}.shared-footer-copy{font-size:1rem}.shared-footer-links{align-items:flex-start}.shared-footer-bottom{flex-direction:column;gap:12px}
}
@media(max-width:620px){.cookie-banner{bottom:10px;padding:15px}.cookie-banner p{font-size:.7rem}.cookie-actions button{flex:1}.shared-footer-logo{width:160px}.shared-footer-top{grid-template-columns:1fr;gap:28px}.shared-footer-links strong{margin-bottom:3px}}
@media(prefers-reduced-motion:reduce){.mobile-menu-toggle span,.cookie-banner,[data-mobile-nav],[data-mobile-nav] a,.services-dropdown-panel,.services-trigger,.services-trigger-icon,.shared-footer-links a{transition:none!important}.wa-float,.wa-float::before{animation:none!important}}
@media(max-width:900px){[data-mobile-nav] .industries-dropdown.open .services-dropdown-panel{max-height:390px}}
:root{
--vr-acid: var(--acid, #FFE800);
--vr-ink: var(--ink, #24292b);
--vr-paper: var(--paper, #f3f1eb);
--vr-paper-2: var(--paper-2, #e9e6de);
--vr-line: var(--line, rgba(36, 41, 43, .17));
--vr-shell: var(--shell, min(1660px, calc(100vw - 48px)));
--vr-section-space: 130px;
--vr-radius-xl: 11px;
--vr-radius-card: 8px;
--vr-radius-control: 6px;
--vr-gap: clamp(18px, 2vw, 30px);
--vr-shadow: 0 18px 48px rgba(18, 24, 25, .10);
--vr-shadow-hover: 0 28px 68px rgba(18, 24, 25, .16);
--vr-shadow-dark: 0 24px 64px rgba(0, 0, 0, .27);
--vr-line-soft: color-mix(in srgb, var(--vr-line) 55%, transparent);
--vr-surface: rgba(255, 255, 255, .78);
}
a, button, summary, input, select, textarea{-webkit-tap-highlight-color: transparent}
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
outline: 3px solid var(--vr-acid);
outline-offset: 4px;
}
.prose a:not(.button), .legal-block a, .story a, .semantic-expansion a:not(.button),
.semantic-industry-section a:not(.button){
text-decoration-thickness: 1px;
text-underline-offset: .22em;
transition: color .2s ease, text-decoration-color .2s ease;
}
.prose a:not(.button):hover, .legal-block a:hover, .story a:hover{
text-decoration-color: var(--vr-acid);
}
.button, .submit-button, .service-more, .button-header, .btn{
border-radius: var(--vr-radius-control) !important;
transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease,
background-color .25s ease, color .25s ease !important;
}
.button:hover, .submit-button:hover, .service-more:hover, .btn:hover{
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(18, 24, 25, .14);
}
.case-grid, .portfolio-grid{
gap: var(--vr-gap) !important;
border: 0 !important;
background: transparent !important;
}
.case-card, .portfolio-item, .portfolio-item-inner, .portfolio-tile{
border: 0 !important;
border-radius: var(--vr-radius-card) !important;
overflow: hidden !important;
box-shadow: var(--vr-shadow);
isolation: isolate;
transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease !important;
}
.portfolio-item-inner{
border-radius: inherit !important;
box-shadow: none;
}
.work .case-card, .system-section .case-card{box-shadow: var(--vr-shadow-dark)}
.case-card:hover, .portfolio-item:hover, .portfolio-tile:hover{
transform: translateY(-7px);
box-shadow: var(--vr-shadow-hover);
}
.case-card img, .portfolio-item img, .portfolio-tile img{
transition: transform .7s cubic-bezier(.22,1,.36,1), filter .45s ease !important;
}
.case-card:hover img, .portfolio-item:hover img, .portfolio-tile:hover img{
transform: scale(1.045);
}
.portfolio-filter, .filter-button{
border-radius: 999px !important;
border-color: var(--vr-line-soft) !important;
}
.strategic-grid, .system-steps, .service-links, .semantic-industry-grid,
.semantic-card-grid, .method-list, .service-rows{
gap: var(--vr-gap) !important;
border: 0 !important;
background: transparent !important;
}
.strategy-card, .system-step, .service-link, .semantic-industry-card,
.semantic-card, .service-row{
border: 0 !important;
border-radius: var(--vr-radius-card) !important;
overflow: hidden;
box-shadow: var(--vr-shadow);
transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease,
background-color .3s ease !important;
}
.strategy-card:hover, .system-step:hover, .service-link:hover,
.semantic-industry-card:hover, .semantic-card:hover, .service-row:hover{
transform: translateY(-5px);
box-shadow: var(--vr-shadow-hover);
}
.system-step{box-shadow: var(--vr-shadow-dark)}
.service-links{grid-template-columns: repeat(4, minmax(0, 1fr))}
.services-band{border-top: 0 !important}
.semantic-expansion, .semantic-industry-section{border-block: 0 !important}
.method-list{
display: grid;
padding: 0 !important;
}
.method-list li, .method-list li:nth-child(n){
border: 0 !important;
border-radius: var(--vr-radius-card);
background: rgba(255, 255, 255, .045);
box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
}
.logo-grid{
gap: clamp(10px, 1.25vw, 18px) !important;
border: 0 !important;
background: transparent !important;
}
.logo-grid figure{
border: 1px solid var(--vr-line-soft) !important;
border-radius: 8px;
background: rgba(255, 255, 255, .45);
box-shadow: 0 10px 28px rgba(18, 24, 25, .055);
overflow: hidden;
}
.faq-list, .svc-list, .check-list{
display: grid !important;
gap: 12px !important;
border: 0 !important;
background: transparent !important;
}
.faq-list details, .faq-item{
border: 0 !important;
border-radius: 8px;
background: var(--vr-surface);
box-shadow: 0 10px 28px rgba(18, 24, 25, .065);
overflow: hidden;
}
.faq-list summary{padding-inline: 22px !important}
.faq-list details p{padding-inline: 22px 55px !important}
.svc-list li, .check-list li{
border: 0 !important;
border-radius: 12px;
background: rgba(255, 255, 255, .62);
padding: 14px 18px 14px 34px !important;
}
.system-section .check-list li{background: rgba(255,255,255,.055)}
.contact-form{
border: 0 !important;
border-radius: var(--vr-radius-card) !important;
box-shadow: var(--vr-shadow-dark);
}
.contact-form{background: rgba(255, 255, 255, .035) !important}
.contact-form input, .contact-form select, .contact-form textarea{
border-radius: var(--vr-radius-control) !important;
border-color: rgba(127, 137, 140, .28) !important;
transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
border-color: var(--acid, #FFE800) !important;
box-shadow: 0 0 0 4px rgba(255, 242, 0, .12);
}
.cover, .gallery img{
border-radius: var(--vr-radius-card);
}
.gallery{gap: var(--vr-gap) !important}
.story{
display: grid;
gap: 18px;
}
.story section{
border: 0 !important;
border-radius: var(--vr-radius-card);
background: rgba(255, 255, 255, .62);
box-shadow: 0 12px 34px rgba(18, 24, 25, .065);
padding: clamp(26px, 3vw, 46px) !important;
}
.next-case{
border: 0 !important;
border-radius: var(--vr-radius-card);
box-shadow: var(--vr-shadow);
overflow: hidden;
}
.legal-nav{
gap: 8px;
border-top: 0 !important;
}
.legal-nav a, .legal-nav button{
border: 0 !important;
border-radius: 10px;
padding: 14px 16px !important;
background: rgba(255, 255, 255, .48) !important;
}
.legal-nav a:hover, .legal-nav button:hover{background: #fff !important}
.legal-block{
border: 0 !important;
border-radius: var(--vr-radius-card);
box-shadow: var(--vr-shadow);
}
.cookies-table{
border-collapse: separate !important;
border-spacing: 7px !important;
}
.cookies-table th, .cookies-table td{
border: 0 !important;
border-radius: 10px;
background: rgba(240, 238, 233, .72);
}
@media (max-width: 1100px){
.service-links{grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (max-width: 620px){
:root{
--vr-radius-xl: 9px;
--vr-radius-card: 7px;
--vr-gap: 16px;
}
.case-card:hover, .portfolio-item:hover, .portfolio-tile:hover,
.strategy-card:hover, .system-step:hover, .service-link:hover,
.semantic-industry-card:hover, .semantic-card:hover, .service-row:hover{
transform: none;
}
.service-links{grid-template-columns: 1fr}
.method-list li, .method-list li:nth-child(n){min-height: 190px}
.story section{padding: 24px 20px !important}
.faq-list summary{padding: 20px 18px !important}
.faq-list details p{padding: 0 48px 22px 18px !important}
}
@media (prefers-reduced-motion: reduce){
.case-card, .portfolio-item, .portfolio-tile, .strategy-card, .system-step,
.service-link, .semantic-industry-card, .semantic-card, .service-row,
.case-card img, .portfolio-item img, .portfolio-tile img{
transition: none !important;
transform: none !important;
}
}
:root{
--shell: min(1660px, calc(100vw - 48px));
}
.shell,
.wrap{
width: min(1660px, calc(100vw - 48px)) !important;
}
.header-inner{
width: var(--shell) !important;
max-width: none !important;
margin-inline: auto !important;
}
.header .header-inner,
.site-header .header-inner{
min-height: 72px !important;
}
.header-logo img,
.brand img{
width: 174px !important;
height: auto !important;
}
.nav-list,
.main-nav,
.site-header nav{
gap: clamp(18px, 1.6vw, 28px) !important;
}
.nav-list a,
.main-nav a,
.site-header nav > a,
.services-trigger,
.industries-trigger{
font-size: .7rem !important;
line-height: 1 !important;
letter-spacing: .08em !important;
}
.retail-feature{
border: 0 !important;
border-radius: var(--vr-radius-xl) !important;
box-shadow: var(--vr-shadow);
isolation: isolate;
overflow: hidden;
}
.industry-card-grid{
gap: var(--vr-gap) !important;
border: 0 !important;
background: transparent !important;
}
.industry-card-grid a{
border: 0 !important;
border-radius: var(--vr-radius-card) !important;
background: rgba(255, 255, 255, .72) !important;
box-shadow: var(--vr-shadow);
overflow: hidden;
transition: transform .32s cubic-bezier(.2, .8, .2, 1),
box-shadow .32s ease,
background-color .24s ease,
color .24s ease;
}
.logo-grid{
gap: 0 !important;
border: 0 !important;
background: transparent !important;
}
.logo-grid figure{
border: 0 !important;
border-left: 1px solid var(--line, rgba(20, 26, 27, .16)) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.logo-grid figure:first-child{border-left: 0 !important}
@media (hover: hover) and (min-width: 761px){
.industry-card-grid a:hover,
.industry-card-grid a:focus-visible,
.method-list li:hover,
.method-list li:focus-within{
background: var(--acid, #FFE800) !important;
color: #151a1b !important;
transform: translateY(-5px);
box-shadow: var(--vr-shadow-hover);
}
.industry-card-grid a:hover::before,
.industry-card-grid a:focus-visible::before{
background: #151a1b !important;
}
}
.faq-list details::details-content,
.faq-item::details-content{
block-size: 0;
opacity: 0;
overflow: hidden;
transition: block-size .38s cubic-bezier(.2, .8, .2, 1),
content-visibility .38s allow-discrete,
opacity .24s ease;
}
.faq-list details[open]::details-content,
.faq-item[open]::details-content{
block-size: auto;
opacity: 1;
}
.faq-list details[open] > :not(summary),
.faq-item[open] > :not(summary){
animation: vr-faq-answer-in .34s cubic-bezier(.2, .8, .2, 1) both;
}
.faq-list summary::after,
.faq-item summary::after{
transition: transform .28s ease, color .2s ease;
}
.faq-list details[open] summary::after,
.faq-item[open] summary::after{
transform: rotate(45deg);
}
@keyframes vr-faq-answer-in{
from{opacity: 0;transform: translateY(-8px)}
to{opacity: 1;transform: translateY(0)}
}
.service-cover{
border-radius: var(--vr-radius-xl) !important;
box-shadow: var(--vr-shadow);
overflow: hidden !important;
}
.service-cover video,
.service-cover img,
.service-cover picture{
display: block;
border-radius: inherit !important;
}
.page-hero-media{
padding: 0 !important;
border: 0 !important;
border-radius: var(--vr-radius-xl) !important;
overflow: hidden !important;
box-shadow: var(--vr-shadow) !important;
background: var(--vr-surface) !important;
}
.page-hero-media video,
.page-hero-media img{
display: block;
width: 100%;
border-radius: inherit !important;
}
.page-hero-media .cropmark{
display: none !important;
}
.svc-list li{
padding-left: 50px !important;
}
.svc-list li::before{
content: "" !important;
position: absolute !important;
left: 20px !important;
top: 50% !important;
width: 15px !important;
height: 2px !important;
background: var(--acid, #FFE800) !important;
transform: translateY(-50%) !important;
}
.faq-item summary{
padding: 22px 58px 22px 24px !important;
}
.faq-item summary::after{right: 24px !important}
.faq-item p{
padding: 0 58px 26px 24px !important;
}
main .next-case{
width: min(100%, 760px) !important;
margin-left: 0 !important;
margin-right: auto !important;
padding: 24px clamp(22px, 2.5vw, 36px) !important;
}
.case-main .next-case{
width: min(100%, 960px) !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 30px clamp(24px, 3vw, 44px) !important;
}
.industry-hero h1{
max-width: 13ch;
font-size: clamp(3rem, 4.9vw, 5.5rem) !important;
line-height: .94 !important;
}
.semantic-industry-section h2,
.semantic-industry-intro h2{
font-size: clamp(2.6rem, 4vw, 4.5rem) !important;
line-height: .98 !important;
}
@media (max-width: 900px){
:root{--shell: calc(100% - 40px)}
.shell,
.wrap{
width: calc(100% - 40px) !important;
}
.header .header-inner,
.site-header .header-inner{
min-height: 64px !important;
height: 64px !important;
}
.header-logo img,
.brand img{
width: 138px !important;
}
.nav-list{
top: 64px !important;
min-height: calc(100dvh - 64px);
padding: clamp(55px, 12vh, 100px) 32px 45px !important;
gap: 15px !important;
transform: translateY(-18px) !important;
clip-path: inset(0 0 100% 0);
opacity: 0;
transition: clip-path .38s cubic-bezier(.22, 1, .36, 1),
transform .38s cubic-bezier(.22, 1, .36, 1),
opacity .24s ease !important;
}
.nav-list.open{
transform: none !important;
clip-path: inset(0);
opacity: 1;
}
.nav-list a{
font-size: 1.38rem !important;
line-height: 1.15 !important;
letter-spacing: 0 !important;
opacity: 0;
transform: translateY(14px);
transition: opacity .28s ease, transform .34s cubic-bezier(.22, 1, .36, 1);
}
.nav-list.open a{opacity: 1;transform: none}
.nav-list.open li:nth-child(1) a{transition-delay: .08s}
.nav-list.open li:nth-child(2) a{transition-delay: .12s}
.nav-list.open li:nth-child(3) a{transition-delay: .16s}
.nav-list.open li:nth-child(4) a{transition-delay: .20s}
.nav-list.open li:nth-child(5) a{transition-delay: .24s}
.nav-list.open li:nth-child(6) a{transition-delay: .28s}
.industry-hero h1{
max-width: 14ch;
font-size: clamp(2.35rem, 9vw, 3.35rem) !important;
}
.semantic-industry-section h2,
.semantic-industry-intro h2{
font-size: clamp(2.15rem, 8vw, 3rem) !important;
}
}
@media (max-width: 620px){
:root{--shell: calc(100% - 32px)}
.shell,
.wrap{
width: calc(100% - 32px) !important;
}
.industry-card-grid{gap: 14px !important}
.industry-card-grid a{min-height: 168px !important}
.faq-item summary{padding: 20px 50px 20px 18px !important}
.faq-item summary::after{right: 18px !important}
.faq-item p{padding: 0 44px 22px 18px !important}
main .next-case,
.case-main .next-case{
width: 100% !important;
padding: 22px 20px !important;
}
}
@media (prefers-reduced-motion: reduce){
.faq-list details::details-content,
.faq-item::details-content,
.faq-list details[open] > :not(summary),
.faq-item[open] > :not(summary){
animation: none !important;
transition: none !important;
}
}
:root{
--t-d1: clamp(2.3rem, 1rem + 5vw, 5.25rem);
--t-d2: clamp(1.7rem, 1.05rem + 2.4vw, 3.6rem);
--t-d3: clamp(1.25rem, 1rem + .9vw, 1.92rem);
--t-d4: clamp(1rem, .9rem + .38vw, 1.26rem);
--t-lead: clamp(.9rem, .83rem + .3vw, 1.1rem);
--t-body: clamp(.9rem, .88rem + .12vw, .96rem);
--t-small: clamp(.81rem, .78rem + .13vw, .86rem);
--t-meta: clamp(.64rem, .62rem + .1vw, .68rem);
--lh-d1: .94;--lh-d2: .99;--lh-d3: 1.08;--lh-d4: 1.18;
--lh-lead: 1.6;--lh-body: 1.7;
--ls-d1: -.045em;--ls-d2: -.04em;--ls-d3: -.03em;
--ls-meta: .13em;
--u-shell: min(1660px, calc(100vw - 48px));
--u-section: clamp(64px, 6.8vw, 108px);
--u-block: clamp(36px, 3.7vw, 58px);
--u-card-pad: clamp(24px, 2.6vw, 42px);
--u-tile-pad: clamp(20px, 1.8vw, 28px);
--u-gap: clamp(15px, 1.6vw, 24px);
--u-measure: 68ch;
--u-header: 72px;
--brand-acid: #FFE800;
--acid: var(--brand-acid);
--ink: #24292b;
--ink-2: #303638;
--ink-deep: #1a1d1e;
--paper: #f3f1eb;
--paper-2: #eeebe4;
--surface: #ffffff;
--surface-2: #faf8f3;
--text-2: #555c5e;
--muted: #777e80;
--line: rgba(36, 41, 43, .17);
--line-dark: rgba(255, 255, 255, .14);
--white: #ffffff;
--font-display: 'Funnel Display', sans-serif;
--font-body: 'Plus Jakarta Sans', sans-serif;
--display: var(--font-display);
--body: var(--font-body);
--ui-acid: var(--acid);
--ui-ink: var(--ink-deep);
--ui-line: var(--line-dark);
--ui-display: var(--font-display);
--ui-body: var(--font-body);
--coral: #ff6b5e;
--violet: #8067ff;
--cyan: #52c7c8;
--blue: #5e79ff;
--amber: #ff8f42;
}
html{scroll-padding-top: calc(var(--u-header) + 18px)}
:root main :is(h1,h2,h3,h4) :is(em,i,mark,span,b,u,strong,small),
.section-heading h2 span,
.semantic-industry-section .section-heading h2 span,
.system-grid h2 span,
.related-heading h2 span,
.cta-inner h2 span,
.industry-hero h1 em,
.page-title mark,
.section-title mark,
.section-light .section-title mark,
.prose h2 mark,
.cta-band h2 mark{
color: inherit !important;
background: transparent !important;
font-style: normal !important;
font-weight: inherit !important;
font-size: inherit !important;
letter-spacing: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
padding: 0 !important;
-webkit-text-fill-color: currentColor;
}
:root main h1,
:root .industry-hero h1,
:root .page-hero h1,
:root .case-hero h1,
:root .hero h1{
font-family: var(--display, "Funnel Display", sans-serif);
font-size: var(--t-d1) !important;
font-weight: 600;
line-height: var(--lh-d1) !important;
letter-spacing: var(--ls-d1);
max-width: 20ch;
text-wrap: balance;
}
:root main h2,
:root .section-heading h2,
:root .section-intro h2,
:root .system-grid h2,
:root .related-heading h2,
:root .cta-inner h2,
:root .semantic-industry-section h2,
:root .semantic-expansion > h2,
:root .cta-band h2,
:root .section-title{
font-family: var(--display, "Funnel Display", sans-serif);
font-size: var(--t-d2) !important;
font-weight: 600;
line-height: var(--lh-d2) !important;
letter-spacing: var(--ls-d2);
max-width: 22ch;
text-wrap: balance;
}
:root main h3,
:root .strategy-card h3,
:root .semantic-industry-card h3,
:root .semantic-card h3{
font-family: var(--display, "Funnel Display", sans-serif);
font-size: var(--t-d3) !important;
font-weight: 600;
line-height: var(--lh-d3) !important;
letter-spacing: var(--ls-d3);
max-width: 26ch;
}
:root .statement{
font-family: var(--display, "Funnel Display", sans-serif);
font-size: var(--t-d3) !important;
font-weight: 500;
line-height: 1.3 !important;
letter-spacing: var(--ls-d3);
max-width: 34ch;
}
:root .case-card h3,
:root .system-step strong,
:root .service-link strong,
:root .faq-item summary,
:root .faq-list summary,
:root .story > section > h3,
:root .pillars h3,
:root main .next-case strong{
font-family: var(--display, "Funnel Display", sans-serif);
font-size: var(--t-d4) !important;
font-weight: 600;
line-height: var(--lh-d4) !important;
letter-spacing: -.02em;
max-width: none;
}
:root .hero-lead,
:root .page-lead,
:root .section-heading .intro,
:root .section-intro > div > p,
:root .semantic-intro,
:root .case-hero .lead,
:root .cta-inner > div > p:not(.eyebrow),
:root .cta-lead{
font-family: var(--body, "Plus Jakarta Sans", sans-serif);
font-size: var(--t-lead) !important;
font-weight: 400;
line-height: var(--lh-lead) !important;
letter-spacing: 0;
max-width: var(--u-measure);
}
:root .strategy-card p,
:root .semantic-industry-card p,
:root .semantic-card p,
:root .system-copy > p,
:root .faq-item p,
:root .faq-list details p,
:root .check-list li,
:root .svc-list li,
:root .semantic-related{
font-family: var(--body, "Plus Jakarta Sans", sans-serif);
font-size: var(--t-body);
line-height: var(--lh-body);
letter-spacing: 0;
max-width: var(--u-measure);
}
:root .eyebrow,
:root .kicker,
:root .card-label,
:root .breadcrumbs,
:root .breadcrumb,
:root .mono,
:root .semantic-kicker,
:root .case-card small,
:root .service-link small,
:root .system-step b,
:root .story > section > span,
:root .pillars span,
:root .facts dt,
:root .case-meta{
font-family: var(--body, "Plus Jakarta Sans", sans-serif);
font-size: var(--t-meta) !important;
font-weight: 700;
line-height: 1.2;
letter-spacing: var(--ls-meta);
text-transform: uppercase;
}
:root .industry-card-grid a strong{
font-size: var(--t-d4) !important;
line-height: var(--lh-d4);
}
:root .service-row .service-body p,
:root .facts dd,
:root .shared-footer-copy{font-size: var(--t-body) !important}
:root .metrics-grid strong{
font-size: clamp(1.5rem, .95rem + 2.35vw, 2.25rem) !important;
}
:root .shell,
:root .wrap,
:root .shared-footer-shell{
width: var(--u-shell) !important;
max-width: none !important;
margin-inline: auto;
}
:root main > .section,
:root main > .section-pad,
:root main > .services-band,
:root main > .cta-band,
:root main > .cta{
padding-block: var(--u-section) !important;
}
:root .section .section-heading{
display: grid;
grid-template-columns: minmax(140px, .34fr) 1.66fr;
gap: clamp(28px, 4.6vw, 104px);
align-items: start;
margin-bottom: 0;
}
:root .section .section-heading > .eyebrow{margin-bottom: 0}
:root .section .section-heading .intro{margin: clamp(20px, 2vw, 30px) 0 0}
:root .section > .shell > .section-heading + *,
:root .section > .shell > .related-heading + *,
:root .section > .shell > .semantic-industry-grid + .semantic-related{
margin-top: var(--u-block) !important;
}
:root .section > .shell > .related-heading{margin-bottom: 0}
:root .services-band > .shell > .eyebrow{margin-bottom: clamp(24px, 2.4vw, 34px)}
:root .strategy-card,
:root .semantic-industry-card,
:root .semantic-card{
padding: var(--u-card-pad) !important;
}
:root .system-step,
:root .service-link{
padding: var(--u-tile-pad) !important;
}
:root .strategy-card > :last-child,
:root .semantic-industry-card > :last-child,
:root .semantic-card > :last-child{margin-bottom: 0}
:root .strategic-grid,
:root .semantic-industry-grid,
:root .semantic-card-grid,
:root .case-grid,
:root .system-steps,
:root .service-links{
gap: var(--u-gap) !important;
}
:root .check-list,
:root .svc-list{
display: grid;
gap: 10px;
margin: clamp(22px, 2.2vw, 32px) 0;
padding: 0;
list-style: none;
}
:root .check-list li,
:root .svc-list li{
position: relative;
padding: 14px 18px 14px 42px !important;
border: 0 !important;
border-radius: 12px;
background: rgba(255,255,255,.62);
}
:root .check-list li::before,
:root .svc-list li::before{
content: "" !important;
position: absolute !important;
left: 20px !important;
top: 1.15em !important;
width: 12px !important;
height: 2px !important;
background: var(--card-accent, var(--section-accent)) !important;
color: transparent !important;
transform: none !important;
}
:root .system-section .check-list li,
:root .system-section .svc-list li{background: rgba(255,255,255,.055)}
.industry-hero-media video{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: var(--ink);
}
:root .industry-hero,
:root .hero{align-items: end}
:root .industry-hero-content,
:root .hero-inner{
align-self: end;
padding-block: clamp(90px, 11vh, 140px) clamp(48px, 6vh, 82px) !important;
}
:root .industry-hero-media::after,
:root .hero-wash{
background: linear-gradient(180deg,
rgba(9, 13, 14, .13) 0%,
rgba(9, 13, 14, .14) 26%,
rgba(9, 13, 14, .55) 54%,
rgba(9, 13, 14, .84) 100%) !important;
}
.semantic-related{
margin: 0;
color: #555d5f;
}
.semantic-related a{
color: inherit;
font-weight: 700;
text-decoration-thickness: 1px;
text-underline-offset: .22em;
text-decoration-color: var(--section-accent);
}
:root .shell.faq-grid,
:root .faq-grid{
display: grid;
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
gap: clamp(38px, 5.5vw, 110px);
align-items: start;
}
:root .shell.faq-grid > .section-heading{display: block}
:root .shell.faq-grid > .section-heading > .eyebrow{margin-bottom: 24px}
:root .shell.faq-grid > .section-heading .intro{margin: clamp(18px, 1.8vw, 26px) 0 0}
:root .section > .shell.faq-grid > .section-heading + *{margin-top: 0 !important}
:root .faq-list{
display: grid;
gap: 12px;
border-top: 0;
}
:root .faq-list > details,
:root .faq-item{
border: 0 !important;
border-radius: var(--vr-radius-card, 22px);
background: var(--vr-surface, rgba(255,255,255,.78));
box-shadow: 0 10px 28px rgba(18,24,25,.065);
overflow: hidden;
}
:root .faq-list summary,
:root .faq-item summary{
display: grid;
grid-template-columns: minmax(0, 1fr) 30px;
gap: 22px;
align-items: center;
padding: 22px 24px !important;
cursor: pointer;
list-style: none;
}
:root .faq-list summary::-webkit-details-marker,
:root .faq-item summary::-webkit-details-marker{display: none}
:root .faq-list summary > span,
:root .faq-item summary > span{
display: block;
font-family: var(--body, "Plus Jakarta Sans", sans-serif);
font-size: 1.05rem;
font-weight: 400;
line-height: 1;
text-align: right;
color: #6b7375;
transform-origin: center;
transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
:root .faq-list details[open] summary > span,
:root .faq-item[open] summary > span{transform: rotate(45deg)}
:root .faq-list details p,
:root .faq-item p{
margin: 0;
padding: 0 24px 26px !important;
max-width: var(--u-measure);
color: #5f6769;
}
.section.section-alt{background: #f7f6f3}
:root .case-hero{padding-block: var(--u-section) !important}
:root .case-main{padding-block: var(--u-section) !important}
:root .cover{margin-bottom: var(--u-block)}
:root .case-story{
display: grid;
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
gap: clamp(38px, 5.5vw, 110px);
align-items: start;
margin-bottom: var(--u-block);
}
:root .case-story-head .eyebrow{margin-bottom: 24px}
:root .story{
display: block;
max-width: none;
margin: 0;
border-top: 1px solid var(--line);
}
:root .story > section{
display: grid;
grid-template-columns: 54px minmax(0, .62fr) minmax(0, 1fr);
gap: clamp(18px, 1.8vw, 26px);
align-items: start;
padding: 26px 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--line) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
transform: none !important;
}
:root .story > section > span{padding-top: 5px}
:root .story > section > p{
margin: 0;
font-family: var(--body, "Plus Jakarta Sans", sans-serif);
font-size: var(--t-body) !important;
line-height: var(--lh-body) !important;
letter-spacing: 0;
color: var(--text-2);
max-width: 52ch;
}
:root .gallery{gap: var(--u-gap) !important}
:root main .next-case{margin-top: var(--u-block)}
:root .facts{margin-top: var(--u-block)}
:root main > .legal-hero{padding-block: var(--u-section) !important}
:root main > .legal-layout{padding-block: var(--u-section) !important}
:root .legal-hero-grid{
display: block;
}
:root .legal-hero-grid > .eyebrow{margin: 0 0 24px}
:root .legal-layout{
display: grid;
grid-template-columns: minmax(200px, .28fr) minmax(0, 1.72fr);
gap: clamp(28px, 4.6vw, 104px);
align-items: start;
}
:root .legal-stack{gap: var(--u-gap)}
:root .legal-block{padding: var(--u-card-pad) !important}
:root .legal-block h2{margin: 0 0 clamp(24px, 2.4vw, 34px)}
:root .legal-block h3{
font-family: var(--display, "Funnel Display", sans-serif);
font-size: var(--t-d4) !important;
font-weight: 600;
line-height: var(--lh-d4) !important;
letter-spacing: -.02em;
margin: clamp(28px, 2.8vw, 40px) 0 12px;
}
:root .legal-intro{
font-family: var(--body, "Plus Jakarta Sans", sans-serif);
font-size: var(--t-lead) !important;
line-height: var(--lh-lead) !important;
max-width: var(--u-measure);
}
:root .legal-block p,
:root .legal-block li{
font-size: var(--t-body);
line-height: var(--lh-body);
max-width: var(--u-measure);
}
:root .metrics-grid > div:first-child{
border-left: 1px solid rgba(36, 41, 43, .28);
padding-left: 36px;
}
:root .hero,
:root .industry-hero,
:root .case-hero,
:root .legal-hero,
:root .page-hero,
:root .system-section,
:root .section.system-section{background-color: var(--ink)}
:root .system-step{background-color: var(--ink-2) !important}
:root .site-header{background-color: color-mix(in srgb, var(--ink-deep) 97%, transparent)}
:root .shared-footer{background-color: var(--ink-deep)}
:root .semantic-industry-section,
:root .section.section-alt{background-color: var(--paper-2)}
:root .strategy-card,
:root .semantic-industry-card,
:root .semantic-card{background-color: var(--surface-2) !important}
:root .strategy-card:nth-child(2n),
:root .semantic-industry-card:nth-child(2n),
:root .semantic-card:nth-child(2n){background-color: var(--surface) !important}
:root .faq-list > details,
:root .faq-item,
:root .legal-block{background-color: var(--surface) !important}
:root .check-list li,
:root .svc-list li{background-color: var(--surface-2) !important}
:root .system-section .check-list li,
:root .system-section .svc-list li{background-color: rgba(255, 255, 255, .06) !important}
:root .strategy-card p,
:root .semantic-industry-card p,
:root .semantic-card p,
:root .semantic-intro,
:root .semantic-related,
:root .section-heading .intro,
:root .faq-list details p,
:root .faq-item p,
:root .legal-block p,
:root .legal-block li,
:root .check-list li,
:root .svc-list li,
:root .cta-lead{color: var(--text-2)}
:root .card-label,
:root .service-link small,
:root .case-card small,
:root .pillars p,
:root .pillars span,
:root .story > section > span{color: var(--muted)}
:root .story > section > p{color: var(--text-2)}
:root .eyebrow{
display: flex;
align-items: center;
gap: 12px;
}
:root .eyebrow::before{
content: "";
flex: 0 0 30px;
width: 30px;
height: 2px;
background: var(--acid);
}
:root .cta-inner{
display: grid;
grid-template-columns: 1.4fr .6fr;
gap: 40px;
align-items: end;
}
:root .cta-inner > div > p:not(.eyebrow){margin: 26px 0 0;max-width: 620px}
:root .cta-inner .eyebrow{margin: 0 0 24px !important}
:root .cta-inner .button{
justify-self: end;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 32px;
min-height: 54px;
padding: 0 22px;
border: 1px solid transparent;
border-radius: var(--vr-radius-control, 13px);
font-family: var(--body, "Plus Jakarta Sans", sans-serif);
font-size: .68rem;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
text-decoration: none;
transition: transform .28s cubic-bezier(.22, 1, .36, 1),
box-shadow .28s ease, background-color .25s ease, color .25s ease;
}
:root .cta-inner .button::after{content: "↗"}
:root .cta-inner .button:hover{
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(18, 24, 25, .18);
}
:root .cta-band .button{
background: var(--surface) !important;
border-color: var(--surface) !important;
color: var(--ink) !important;
}
:root .cta-band .button:hover,
:root .cta-band .button:focus-visible{
background: var(--ink) !important;
border-color: var(--ink) !important;
color: var(--surface) !important;
}
:root .cta-band-acid{
background: var(--acid);
color: var(--ink);
}
:root .cta-band-acid .eyebrow{color: var(--ink)}
:root .cta-band-acid .eyebrow::before{background: var(--ink)}
:root .cta-band-acid h2{color: var(--ink)}
:root .cta-band-acid .cta-inner > div > p:not(.eyebrow){color: #4b5254}
:root .cta-band-acid .button{
background: var(--ink) !important;
border-color: var(--ink) !important;
color: var(--surface) !important;
}
:root .cta-band-acid .button:hover,
:root .cta-band-acid .button:focus-visible{
background: var(--surface) !important;
border-color: var(--surface) !important;
color: var(--ink) !important;
}
:root .site-header{
position: sticky;
top: 0;
z-index: 1200;
padding: 0 !important;
color: #fff;
border-bottom: 1px solid var(--line-dark);
backdrop-filter: blur(16px);
}
:root .site-header .header-inner{
min-height: var(--u-header) !important;
height: var(--u-header) !important;
display: flex;
align-items: center;
gap: clamp(18px, 2vw, 32px);
}
:root .site-header .brand{margin-right: auto}
:root .site-header .mobile-menu-toggle{
display: none;
position: relative;
z-index: 1002;
width: 44px;
height: 44px;
padding: 12px;
flex-direction: column;
justify-content: center;
gap: 7px;
border: 1px solid var(--line-dark);
border-radius: 10px;
background: transparent;
cursor: pointer;
}
:root .site-header .mobile-menu-toggle span:not(.sr-only){
display: block;
width: 100%;
height: 2px;
margin: 0;
border-radius: 2px;
background: #fff;
}
:root .site-header .mobile-menu-toggle[aria-expanded="true"] span:not(.sr-only):first-child{
transform: translateY(4.5px) rotate(45deg) !important;
}
:root .site-header .mobile-menu-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(2){
transform: translateY(-4.5px) rotate(-45deg) !important;
}
@media(min-width:901px){
:root .site-header .main-nav,
:root .site-header nav[data-mobile-nav]{
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: clamp(18px, 1.6vw, 28px) !important;
}
:root .site-header .main-nav > a,
:root .site-header nav[data-mobile-nav] > a,
:root .site-header .services-trigger{
display: block;
padding: 0;
font-family: var(--body, "Plus Jakarta Sans", sans-serif) !important;
font-size: .7rem !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
white-space: nowrap;
}
:root .site-header .services-trigger{
display: flex;
align-items: center;
gap: 7px;
border: 0;
background: none;
cursor: pointer;
}
}
:root .hero{
height: auto;
min-height: calc(100svh - var(--u-header));
}
:root .hero-inner{padding-top: 0}
:root .main-nav > a,
:root .site-header nav > a,
:root .main-nav .services-dropdown{position: relative}
:root .main-nav > a::after,
:root .site-header nav > a::after,
:root .main-nav .services-dropdown::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -9px;
height: 2px;
background: var(--acid);
transform: scaleX(0);
transform-origin: left center;
transition: transform .3s cubic-bezier(.22, 1, .36, 1);
pointer-events: none;
}
:root .main-nav > a[aria-current="page"],
:root .site-header nav > a[aria-current="page"],
:root .services-dropdown[data-current] > .services-trigger{
color: var(--acid) !important;
}
:root .main-nav > a[aria-current="page"]::after,
:root .site-header nav > a[aria-current="page"]::after,
:root .main-nav .services-dropdown[data-current]::after{transform: scaleX(1)}
:root .shared-footer{
padding: clamp(58px, 6vw, 76px) 0 24px !important;
border-top: 3px solid var(--acid);
}
:root .shared-footer-top{
display: grid !important;
grid-template-columns:
minmax(0, 1.35fr) minmax(0, .7fr) minmax(0, 1fr)
minmax(0, 1.05fr) minmax(0, .85fr) !important;
gap: clamp(26px, 3vw, 58px) !important;
align-items: start !important;
padding-bottom: clamp(42px, 4.5vw, 56px) !important;
}
:root .shared-footer-bottom{
display: flex !important;
justify-content: space-between !important;
gap: 24px;
padding-top: 22px;
border-top: 1px solid var(--line-dark);
}
:root .shared-footer-copy{max-width: 390px}
:root .wa-float{
position: fixed !important;
right: 22px !important;
bottom: 22px !important;
z-index: 1600 !important;
width: 56px !important;
height: 56px !important;
display: grid !important;
place-items: center !important;
border-radius: 50% !important;
background: var(--acid) !important;
color: var(--ink) !important;
font-size: 0 !important;
text-decoration: none !important;
box-shadow: 0 12px 28px rgba(0, 0, 0, .25) !important;
}
:root .wa-float img{
display: block !important;
width: 28px !important;
height: 28px !important;
}
:root .hero-copy{
margin-left: 0 !important;
max-width: none;
}
:root .hero .eyebrow{margin: 0 0 24px}
:root .hero .hero-lead{margin: 30px 0 0}
:root .hero .hero-actions{margin-top: clamp(30px, 3.4vw, 44px)}
:root .eyebrow{margin-bottom: 24px}
:root .services-dropdown-panel a[aria-current="page"]{
color: var(--acid) !important;
background: rgba(255, 249, 29, .09);
}
@media(min-width:901px){
:root .site-header .services-trigger:hover,
:root .services-dropdown:hover > .services-trigger,
:root .services-dropdown:focus-within > .services-trigger{color: #fff}
:root .services-dropdown:hover .services-trigger-icon,
:root .services-dropdown:focus-within .services-trigger-icon,
:root .services-dropdown.open .services-trigger-icon{transform: rotate(180deg)}
:root .main-nav .services-dropdown{
--drop-pad: calc((var(--u-header) - 12px) / 2);
padding-block: var(--drop-pad);
margin-block: calc(-1 * var(--drop-pad));
}
:root .main-nav .services-dropdown::after{bottom: calc(var(--drop-pad) - 9px)}
:root .services-dropdown-panel{
top: calc(100% + 10px);
left: auto;
right: 0;
width: max-content;
min-width: 250px;
max-width: min(330px, calc(100vw - 48px));
padding: 8px;
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 8px;
background: color-mix(in srgb, var(--ink-deep) 84%, transparent);
backdrop-filter: blur(24px) saturate(1.6);
box-shadow: 0 28px 70px rgba(0, 0, 0, .48),
0 4px 14px rgba(0, 0, 0, .28);
transform: translateY(-8px) scale(.97);
transform-origin: top right;
transition: opacity .24s ease,
transform .42s cubic-bezier(.22, 1, .36, 1),
visibility .24s;
}
:root .services-dropdown-panel::before{inset: -11px 0 auto;height: 11px}
:root .services-dropdown-panel a{
gap: 14px;
padding: 11px 14px !important;
border-bottom: 0;
border-radius: 12px;
color: rgba(255, 255, 255, .72) !important;
opacity: 0;
transform: translateY(-7px);
transition: color .2s ease,
background-color .2s ease,
opacity .3s ease,
transform .42s cubic-bezier(.22, 1, .36, 1) !important;
}
:root .services-dropdown-panel a:nth-child(1){--i: 0}
:root .services-dropdown-panel a:nth-child(2){--i: 1}
:root .services-dropdown-panel a:nth-child(3){--i: 2}
:root .services-dropdown-panel a:nth-child(4){--i: 3}
:root .services-dropdown-panel a:nth-child(5){--i: 4}
:root .services-dropdown-panel a:nth-child(6){--i: 5}
:root .services-dropdown-panel a::after{
opacity: 0;
transform: translate(-5px, 4px);
transition: opacity .2s ease,
transform .32s cubic-bezier(.22, 1, .36, 1);
}
:root .services-dropdown-panel a:hover,
:root .services-dropdown-panel a:focus-visible{
color: #fff !important;
background: rgba(255, 255, 255, .08);
transform: none !important;
}
:root .services-dropdown-panel a:hover::after,
:root .services-dropdown-panel a:focus-visible::after,
:root .services-dropdown-panel a[aria-current="page"]::after{
opacity: 1;
transform: none;
}
:root .services-dropdown:hover .services-dropdown-panel,
:root .services-dropdown:focus-within .services-dropdown-panel,
:root .services-dropdown.open .services-dropdown-panel{
transform: none;
}
:root .services-dropdown:hover .services-dropdown-panel a,
:root .services-dropdown:focus-within .services-dropdown-panel a,
:root .services-dropdown.open .services-dropdown-panel a{
opacity: 1;
transform: none;
transition-delay: calc(var(--i, 0) * 32ms);
}
@media(prefers-reduced-motion:reduce){
:root .services-dropdown-panel,
:root .services-dropdown-panel a,
:root .services-dropdown-panel a::after{
transform: none !important;
transition: none !important;
}
:root .services-dropdown-panel a{opacity: 1}
:root .services-dropdown-panel a::after{opacity: 1}
}
}
@media(max-width:1100px){
:root .section .section-heading,
:root .story > section,
:root .legal-hero-grid{grid-template-columns: 1fr;gap: 26px}
:root .shell.faq-grid,
:root .faq-grid,
:root .case-story{grid-template-columns: 1fr;gap: clamp(30px, 4vw, 48px)}
:root .legal-layout{grid-template-columns: 1fr;gap: 34px}
:root .story > section{grid-template-columns: 46px minmax(0, .8fr) minmax(0, 1fr)}
:root .shared-footer-top{
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 38px 34px !important;
}
}
@media(max-width:900px){
:root{--u-shell: calc(100% - 40px);--u-header: 64px}
:root .site-header .mobile-menu-toggle{
display: flex;
order: 3;
margin-left: auto;
flex: 0 0 44px;
}
:root .hero{
height: auto;
min-height: 100svh;
padding: 0 !important;
}
:root [data-mobile-nav] > a,
:root [data-mobile-nav] .services-trigger{
font-family: var(--ui-display, "Funnel Display", sans-serif) !important;
font-size: 1.22rem !important;
font-weight: 500 !important;
line-height: 1.15 !important;
letter-spacing: -.02em !important;
text-transform: none !important;
}
:root [data-mobile-nav] .services-dropdown-panel a{
font-family: var(--ui-body, "Plus Jakarta Sans", sans-serif) !important;
font-size: .8rem !important;
font-weight: 500 !important;
line-height: 1.4 !important;
letter-spacing: .01em !important;
text-transform: none !important;
}
:root .main-nav > a::after,
:root .site-header nav > a::after,
:root .main-nav .services-dropdown::after{display: none}
:root .story > section{grid-template-columns: 40px minmax(0, 1fr)}
:root .story > section > p{grid-column: 2;max-width: none}
:root .industry-hero-media::after,
:root .portfolio-hero::before,
:root .hero-wash{
background: linear-gradient(180deg,
rgba(9, 13, 14, .14) 0%,
rgba(9, 13, 14, .18) 24%,
rgba(9, 13, 14, .62) 50%,
rgba(9, 13, 14, .88) 100%) !important;
}
:root .shared-footer-top{
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important;
gap: 34px 28px !important;
}
:root .shared-footer-bottom{flex-direction: column !important;gap: 12px}
:root .cta-inner{grid-template-columns: 1fr;gap: 32px}
:root .cta-inner .button{justify-self: start}
:root .metrics-grid > div:nth-child(3){
border-left: 1px solid rgba(36, 41, 43, .28);
padding-left: 36px;
}
:root main h1,
:root .industry-hero h1,
:root .page-hero h1,
:root .case-hero h1,
:root .hero h1{max-width: 16ch}
:root main h2,
:root .section-heading h2,
:root .section-intro h2,
:root .system-grid h2,
:root .related-heading h2,
:root .cta-inner h2,
:root .semantic-industry-section h2,
:root .semantic-expansion > h2,
:root .cta-band h2,
:root .section-title{max-width: 20ch}
}
@media(max-width:760px){
:root main h1,
:root .industry-hero h1,
:root .hero h1,
:root .case-hero h1,
:root .legal-hero h1{
font-size: clamp(2rem, 1.24rem + 3.27vw, 2.5rem) !important;
line-height: .98 !important;
letter-spacing: -.04em;
max-width: none;
}
:root .method-list .method-item{
min-height: 0 !important;
padding: 0 !important;
overflow: hidden;
}
:root .method-list .method-trigger{
padding: 20px 18px !important;
grid-template-columns: 62px 1fr 24px;
}
:root .method-list .method-item > p{
max-height: 0;
padding: 0 18px 0 92px !important;
}
:root .method-list .method-item.open > p{
max-height: 220px;
padding-bottom: 20px !important;
}
:root .hero-brk{display: none}
:root .retail-feature{margin-inline: 0 !important}
}
@media(max-width:620px){
:root{--u-shell: calc(100% - 32px)}
:root .faq-list summary,
:root .faq-item summary{padding: 20px 18px !important;gap: 16px}
:root .faq-list details p,
:root .faq-item p{padding: 0 18px 22px !important}
:root .metrics-grid > div:first-child,
:root .metrics-grid > div:nth-child(3){padding-left: 15px}
:root .shared-footer-top{grid-template-columns: 1fr !important;gap: 28px !important}
:root .wa-float{
right: 15px !important;
bottom: 15px !important;
width: 50px !important;
height: 50px !important;
}
:root .wa-float img{width: 25px !important;height: 25px !important}
}
@media(min-width:901px){
:root .industry-hero,
:root .hero{align-items: center}
:root .industry-hero-content,
:root .hero-inner{
align-self: center;
padding-block: clamp(80px, 9vh, 120px) !important;
}
:root .industry-hero h1,
:root .hero h1,
:root .case-hero h1,
:root .legal-hero h1{
overflow-wrap: normal;
word-break: normal;
hyphens: manual;
text-wrap: wrap;
}
:root .industry-hero h1{max-width: 13.79ch}
:root .industry-hero .hero-lead,
:root .hero .hero-lead,
:root .case-hero .lead,
:root .legal-hero .legal-intro{max-width: min(42vw, 62ch)}
:root .hero h1{max-width: 15.7ch}
:root .industry-hero-media::after,
:root .hero-wash{
background: linear-gradient(90deg,
rgba(9, 13, 14, .92) 0%,
rgba(9, 13, 14, .60) 30%,
rgba(9, 13, 14, .16) 60%,
rgba(9, 13, 14, .04) 100%) !important;
}
}
:root .work .case-card{
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: clamp(360px, 27vw, 470px);
padding: clamp(22px, 2.2vw, 32px) !important;
background: var(--ink);
overflow: hidden !important;
isolation: isolate;
}
:root .work .case-grid .case-card:nth-child(1),
:root .work .case-grid .case-card:nth-child(6),
:root .work .case-grid .case-card:nth-child(11),
:root .work .case-grid .case-card:nth-child(16),
:root .work .case-grid .case-card:nth-child(21){
min-height: clamp(400px, 31vw, 540px);
}
:root .work .case-card img{
position: absolute;
inset: 0;
z-index: 0;
width: 100% !important;
height: 100% !important;
max-width: none;
margin: 0 !important;
aspect-ratio: auto !important;
object-fit: cover;
filter: none !important;
transform: scale(1.015);
transition: transform 1.05s cubic-bezier(.22, 1, .36, 1) !important;
}
:root .work .case-card::before{
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg,
rgba(8, 11, 12, 0) 38%,
rgba(8, 11, 12, .48) 66%,
rgba(8, 11, 12, .88) 100%);
transition: opacity .5s ease;
}
:root .work .case-card > *{position: relative;z-index: 2}
:root .work .case-card p{
color: rgba(255, 255, 255, .74);
min-height: 0;
}
:root .work .case-card i{z-index: 3}
@media(hover:hover){
:root .work .case-card:hover img{transform: scale(1.075)}
:root .work .case-card:hover::before{opacity: .82}
:root .work .case-card:hover{background: var(--ink);transform: none}
}
:root .case-grid .case-card{
min-height: clamp(380px, 32vw, 560px);
}
:root .case-card img{filter: none !important}
:root .case-card::after{
background: linear-gradient(180deg,
rgba(8, 11, 12, 0) 40%,
rgba(8, 11, 12, .48) 68%,
rgba(8, 11, 12, .9) 100%);
transition: opacity .5s ease;
}
@media(hover:hover){
:root .case-grid .case-card:hover img{transform: scale(1.075)}
:root .case-grid .case-card:hover::after{opacity: .85}
}
:root .gallery img{
height: clamp(420px, 42vw, 660px);
transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}
@media(hover:hover){
:root .gallery img:hover{transform: scale(1.03)}
}
:root .cover{
max-height: clamp(520px, 56vw, 820px);
}
:root .site-header{
transition: background-color .35s ease,
border-color .35s ease,
backdrop-filter .35s ease;
}
:root .site-header:not(.is-scrolled){
background: transparent;
border-bottom-color: transparent;
backdrop-filter: none;
}
:root .site-header.is-scrolled{
background: color-mix(in srgb, var(--ink-deep) 80%, transparent);
border-bottom-color: rgba(255, 255, 255, .10);
backdrop-filter: blur(20px) saturate(1.5);
}
:root .site-header:has([data-mobile-nav].open),
:root .site-header.nav-open{
background: var(--ink-deep) !important;
backdrop-filter: none !important;
}
:root .reveal{opacity: 1;transform: none}
html.anim-ready .reveal{
opacity: 0;
transform: translateY(28px);
transition: opacity .75s cubic-bezier(.22, 1, .36, 1),
transform .85s cubic-bezier(.22, 1, .36, 1);
}
html.anim-ready .reveal.visible{opacity: 1;transform: none}
html.anim-ready [data-stagger] > *{opacity: 0}
html.anim-ready [data-stagger].in > *{
opacity: 1;
animation: gt-rise .8s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms) both;
}
@keyframes gt-rise{
from{opacity: 0;transform: translateY(24px) scale(.988)}
to{opacity: 1;transform: none}
}
html.anim-ready .case-grid[data-stagger].in > *,
html.anim-ready .gallery[data-stagger].in > *{
animation-name: gt-rise-strong;
animation-duration: .95s;
}
@keyframes gt-rise-strong{
from{opacity: 0;transform: translateY(40px) scale(.972)}
to{opacity: 1;transform: none}
}
@media(prefers-reduced-motion:reduce){
html.anim-ready .reveal,
html.anim-ready [data-stagger] > *{
opacity: 1 !important;
transform: none !important;
transition: none !important;
animation: none !important;
}
:root .site-header{transition: none}
}
:root .site-header{
position: fixed;
inset: 0 0 auto;
}
:root .hero,
:root .industry-hero{
min-height: 100svh;
}
:root .work{overflow-x: clip}
:root .work .case-grid{
--gal-inset: clamp(23px, 23px + (100vw - 1710px) * .09, 60px);
width: auto;
max-width: none;
margin-inline: calc(50% - 50vw + var(--gal-inset));
}
body{--section-accent: var(--accent, var(--acid))}
:root .semantic-industry-section{--section-accent: inherit}
:root .service-link[href*="packaging.html"]{--card-accent: var(--cyan)}
:root .service-link[href*="branding.html"]{--card-accent: var(--coral)}
:root .service-link[href*="3d.html"]{--card-accent: var(--violet)}
:root .service-link[href*="interactivo.html"]{--card-accent: var(--blue)}
:root .strategy-card,
:root .system-step,
:root .service-link{position: relative}
:root .strategy-card::before,
:root .system-step::before,
:root .service-link::before{
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--card-accent, var(--section-accent));
transform: scaleX(.22);
transform-origin: left center;
transition: transform .35s cubic-bezier(.22, 1, .36, 1);
pointer-events: none;
}
@media(hover:hover){
:root .strategy-card:hover::before,
:root .system-step:hover::before,
:root .service-link:hover::before{transform: scaleX(1)}
}
:root .card-label{
display: flex;
align-items: center;
gap: 10px;
color: var(--text-2);
}
:root .card-label::before{
content: "";
flex: 0 0 18px;
width: 18px;
height: 2px;
background: var(--card-accent, var(--section-accent));
}
:root .check-list li::before,
:root .svc-list li::before{
top: calc(16px + (1.45em - 7px) / 2) !important;
width: 7px !important;
height: 7px !important;
border-radius: 2px !important;
background: var(--card-accent, var(--section-accent)) !important;
}
:root .faq-list > details,
:root .faq-item{position: relative}
:root .faq-list > details::before,
:root .faq-item::before{
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--section-accent);
transform: scaleY(0);
transform-origin: top center;
transition: transform .35s cubic-bezier(.22, 1, .36, 1);
pointer-events: none;
}
:root .faq-list > details[open]::before,
:root .faq-item[open]::before{transform: scaleY(1)}
@media(hover:hover){
:root .faq-list > details:hover::before,
:root .faq-item:hover::before{transform: scaleY(1)}
}
:root .system-step b{
display: flex;
align-items: center;
gap: 10px;
color: var(--section-accent);
}
:root .system-step b::before{
content: "";
flex: 0 0 18px;
width: 18px;
height: 2px;
background: var(--section-accent);
}
:root .strategy-card .button{
background: var(--section-accent) !important;
border-color: var(--section-accent) !important;
color: var(--ink) !important;
}
:root .strategy-card .button:hover,
:root .strategy-card .button:focus-visible{
background: var(--ink) !important;
border-color: var(--ink) !important;
color: var(--surface) !important;
}
:root .service-link small{
color: var(--text-2);
font-weight: 700;
}
:root .semantic-related a{text-decoration-color: var(--section-accent)}
:root .semantic-industry-card:nth-child(4n+1){--card-accent: var(--acid)}
:root .semantic-industry-card:nth-child(4n+2){--card-accent: var(--cyan)}
:root .semantic-industry-card:nth-child(4n+3){--card-accent: var(--coral)}
:root .semantic-industry-card:nth-child(4n+4){--card-accent: var(--violet)}
@media(prefers-reduced-motion:reduce){
:root .strategy-card::before,
:root .system-step::before,
:root .service-link::before,
:root .faq-list > details::before,
:root .faq-item::before{transition: none}
}
:root body,
:root .about,
:root .clients,
:root .home-industries,
:root .services,
:root .page-industry .industry-hero-sequence > .section,
:root .section-alt,
:root .semantic-industry-section{
background-image: url("../images/background-grain.webp");
background-blend-mode: overlay;
background-attachment: fixed;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
:root .work,
:root .method,
:root .case-hero,
:root .page-service main > .industry-hero + .section,
:root .system-section{--tex-base: var(--ink)}
:root .contact{--tex-base: #171b1c}
:root .shared-footer{--tex-base: var(--ink-deep)}
:root .work,
:root .method,
:root .case-hero,
:root .page-service main > .industry-hero + .section,
:root .system-section,
:root .contact,
:root .shared-footer{
background-image:
linear-gradient(color-mix(in srgb, var(--tex-base) 65%, transparent),
color-mix(in srgb, var(--tex-base) 65%, transparent)),
url("../images/background-grain.webp");
background-blend-mode: normal, soft-light;
background-attachment: fixed;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
:root .about-media.scroll-video{
contain: none;
}
:root .scroll-video-sticky::after{
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background-image:
linear-gradient(rgba(255, 255, 255, .88), rgba(255, 255, 255, .88)),
url("../images/background-grain.webp");
background-attachment: scroll;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
mix-blend-mode: darken;
}
@media print{
:root .scroll-video-sticky::after{display: none}
}
@media print{
:root body,
:root .about,
:root .clients,
:root .home-industries,
:root .services,
:root .page-industry .industry-hero-sequence > .section,
:root .section-alt,
:root .semantic-industry-section,
:root .work,
:root .method,
:root .page-service main > .industry-hero + .section,
:root .system-section,
:root .contact,
:root .shared-footer{background-image: none}
}
:root .industry-hero-media::before{
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: .13;
background-image:
linear-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .18) 1px, transparent 1px);
background-size: 80px 80px;
-webkit-mask-image: linear-gradient(90deg, #000, transparent 72%);
mask-image: linear-gradient(90deg, #000, transparent 72%);
}
:root .about.section-pad{padding-bottom: 0 !important}
:root .scroll-video-fallback{
object-fit: contain;
object-position: center;
filter: none;
}
@media(max-width:620px){
:root .scroll-video-fallback{
object-fit: cover;
object-position: center center;
}
}
@media(max-width:520px){
:root .facts{
grid-template-columns: 1fr 1fr;
gap: 22px 16px;
}
:root .facts div{padding-right: 8px}
}
@keyframes industry-hero-zoom{
from{transform: scale(1.025)}
to{transform: scale(1.07)}
}
:root .page-industry .industry-hero-sequence > .industry-hero{
position: sticky;
top: 0;
z-index: 0;
isolation: isolate;
}
:root .page-industry .industry-hero-media img{
animation: industry-hero-zoom 20s cubic-bezier(.2,.55,.25,1) both;
transform-origin: center center;
will-change: transform;
}
:root .page-industry .industry-hero-sequence > .section{
position: relative;
z-index: 1;
background-color: var(--paper);
box-shadow: 0 -22px 44px rgba(9,13,14,.08);
}
@media(prefers-reduced-motion:reduce){
:root .page-industry .industry-hero-sequence > .industry-hero{
position: relative;
top: auto;
}
:root .page-industry .industry-hero-media img{
animation: none;
transform: none;
will-change: auto;
}
}
:root .about .pillars p,
:root .about .market-note{
font-size: var(--t-body) !important;
line-height: var(--lh-body);
}
:root .about-media.scroll-video{
--scroll-video-travel: clamp(1400px, 220svh, 2200px);
position: relative;
height: calc(100svh - var(--u-header) + var(--scroll-video-travel));
min-height: 0;
overflow: visible;
isolation: auto;
background: #eeece8;
}
:root .scroll-video-sticky{
position: sticky;
top: var(--u-header);
height: calc(100svh - var(--u-header));
overflow: hidden;
isolation: isolate;
contain: paint;
background: #eeece8;
will-change: transform;
}
:root .scroll-video.is-static{
height: calc(100svh - var(--u-header));
}
:root .scroll-video.is-static .scroll-video-sticky{
position: relative;
top: auto;
will-change: auto;
}
@media (max-width: 620px){
:root .about-media.scroll-video{
--scroll-video-travel: clamp(1200px, 190svh, 1800px);
}
}
@media (prefers-reduced-motion: reduce){
:root .about-media.scroll-video{
height: calc(100svh - var(--u-header));
}
:root .scroll-video-sticky{
position: relative;
top: auto;
will-change: auto;
}
}
@media print{
:root .about-media.scroll-video,
:root .scroll-video-sticky{
height: auto;
min-height: 480px;
position: relative;
top: auto;
}
}
:root .facts.facts-compact{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
:root .gallery .case-media{
position: relative;
overflow: hidden;
background: #e8e5df;
border-radius: var(--vr-radius-card, 22px);
}
:root .gallery .case-media video{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
background: #e8e5df;
border-radius: inherit;
}
:root .gallery .case-media-square{
height: clamp(420px, 42vw, 660px);
aspect-ratio: auto;
}
:root .gallery .case-media-wide{
grid-column: 1 / -1;
aspect-ratio: 16 / 9;
}
@media (max-width: 520px){
:root .facts.facts-compact{
grid-template-columns: 1fr;
}
:root .gallery .case-media-wide{
grid-column: auto;
}
}
:root .interactive-video-showcase{
margin-top: clamp(64px, 7vw, 112px);
padding-top: clamp(48px, 5vw, 80px);
border-top: 1px solid rgba(255,255,255,.14);
}
:root .interactive-video-heading{
display: grid;
grid-template-columns: minmax(180px, .75fr) minmax(0, 1.55fr);
gap: clamp(32px, 5vw, 88px);
align-items: start;
margin-bottom: clamp(34px, 4vw, 58px);
}
:root .interactive-video-heading h2{
max-width: 820px;
margin: 0 0 18px;
color: #fff;
font-family: var(--display);
font-size: clamp(2rem, 3.35vw, 4rem);
line-height: 1.02;
letter-spacing: -.045em;
}
:root .interactive-video-heading p:not(.eyebrow){
max-width: 760px;
margin: 0;
color: rgba(255,255,255,.68);
line-height: 1.65;
}
:root .interactive-video-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(24px, 3vw, 42px);
}
:root .interactive-video-card{
overflow: hidden;
background: rgba(255,255,255,.075);
border: 1px solid rgba(255,255,255,.1);
border-radius: var(--vr-radius-card, 22px);
}
:root .interactive-video-thumb{
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden;
aspect-ratio: 16 / 9;
border: 0;
background: #111719;
cursor: pointer;
}
:root .interactive-video-thumb img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .55s ease, filter .35s ease;
}
:root .interactive-video-thumb::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 45%, rgba(5,9,10,.38));
pointer-events: none;
}
:root .interactive-video-thumb:hover img,
:root .interactive-video-thumb:focus-visible img{
transform: scale(1.025);
filter: brightness(.9);
}
:root .interactive-video-thumb:focus-visible{
outline: 3px solid var(--acid, #FFE800);
outline-offset: 4px;
z-index: 1;
}
:root .interactive-play{
position: absolute;
z-index: 2;
left: 50%;
top: 50%;
display: grid;
place-items: center;
width: clamp(58px, 5vw, 76px);
height: clamp(58px, 5vw, 76px);
padding-left: 4px;
border-radius: 50%;
color: #171c1e;
background: var(--acid, #FFE800);
box-shadow: 0 18px 44px rgba(0,0,0,.34);
transform: translate(-50%, -50%);
transition: transform .25s ease;
}
:root .interactive-video-thumb:hover .interactive-play{
transform: translate(-50%, -50%) scale(1.08);
}
:root .interactive-video-copy{
padding: clamp(22px, 2.5vw, 34px);
}
:root .interactive-video-meta{
margin: 0 0 12px;
color: var(--acid, #FFE800);
font-size: .72rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
}
:root .interactive-video-copy h3{
margin: 0 0 12px;
color: #fff;
font-family: var(--display);
font-size: clamp(1.35rem, 2vw, 2rem);
line-height: 1.08;
letter-spacing: -.025em;
}
:root .interactive-video-copy > p:not(.interactive-video-meta){
margin: 0;
color: rgba(255,255,255,.68);
line-height: 1.65;
}
:root .interactive-video-modal[hidden]{
display: none !important;
}
:root .interactive-video-modal{
position: fixed;
z-index: 10000;
inset: 0;
display: grid;
place-items: center;
padding: clamp(18px, 4vw, 60px);
background: rgba(4, 7, 8, .94);
}
:root .interactive-video-dialog{
position: relative;
width: min(1180px, 100%);
overflow: hidden;
background: #111719;
border: 1px solid rgba(255,255,255,.16);
border-radius: var(--vr-radius-card, 22px);
box-shadow: 0 32px 100px rgba(0,0,0,.56);
}
:root .interactive-video-dialog.is-portrait{
width: min(480px, calc((100vh - 150px) * .5625), 100%);
}
:root .interactive-video-close{
position: absolute;
z-index: 3;
top: 14px;
right: 14px;
display: grid;
place-items: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
padding: 0 0 4px;
border: 1px solid rgba(255,255,255,.3);
border-radius: 50%;
color: #fff;
background: rgba(10,14,15,.72);
backdrop-filter: blur(8px);
font-size: 2rem;
line-height: 1;
cursor: pointer;
}
:root .interactive-video-close:hover,
:root .interactive-video-close:focus-visible{
color: #111719;
background: var(--acid, #FFE800);
border-color: var(--acid, #FFE800);
}
:root .interactive-video-dialog video{
display: block;
width: 100%;
max-height: calc(100vh - 150px);
aspect-ratio: 16 / 9;
background: #000;
}
:root .interactive-video-dialog.is-portrait video{
aspect-ratio: 9 / 16;
object-fit: contain;
}
:root body.interactive-modal-open{
overflow: hidden;
}
@media (max-width: 760px){
:root .interactive-video-heading,
:root .interactive-video-grid{
grid-template-columns: 1fr;
}
:root .interactive-video-heading{
gap: 20px;
}
:root .interactive-video-modal{
padding: 12px;
}
:root .interactive-video-dialog video{
max-height: calc(100vh - 100px);
}
}
@media (prefers-reduced-motion: reduce){
:root .interactive-video-thumb img,
:root .interactive-play{
transition: none;
}
}
:root .ia-motion-showcase .interactive-video-grid{
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(18px, 2vw, 28px);
}
:root .ia-motion-showcase .interactive-video-thumb{
aspect-ratio: 9 / 16;
}
:root .ia-motion-showcase .interactive-video-copy{
padding: 16px clamp(16px, 1.6vw, 22px) 20px;
}
:root .ia-motion-showcase .interactive-video-copy h3{
font-size: clamp(1.2rem, 1.55vw, 1.55rem);
}
@media (max-width: 1100px){
:root .ia-motion-showcase .interactive-video-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px){
:root .ia-motion-showcase .interactive-video-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
:root .ia-motion-showcase .interactive-video-copy{
padding: 12px 12px 16px;
}
:root .ia-motion-showcase .interactive-video-meta{
margin: 0;
font-size: .56rem;
line-height: 1.35;
letter-spacing: .07em;
}
:root .ia-motion-showcase .interactive-play{
width: 48px;
height: 48px;
font-size: .8rem;
box-shadow: 0 10px 24px rgba(0,0,0,.34);
}
}
:root{
--space-topic: clamp(28px, 3vw, 48px);
--space-section: clamp(82px, 8vw, 130px);
--space-major: clamp(110px, 11vw, 170px);
}
:root .section-pad{padding-block: var(--space-section)}
:root .home-featured-grid{
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
grid-auto-flow: row !important;
}
:root .home-featured-grid .case-card,
:root .home-featured-grid .case-card:nth-child(n){grid-column: span 1 !important}
:root .home-featured-grid .case-card:nth-child(6n + 1),
:root .home-featured-grid .case-card:nth-child(6n),
:root .home-featured-grid .case-card:nth-last-child(2),
:root .home-featured-grid .case-card:last-child{grid-column: span 2 !important}
:root .work .home-featured-grid .case-card:nth-child(n){
min-height: clamp(410px, 31vw, 540px);
}
:root .home-featured-grid .case-card img,
:root .home-featured-grid .case-card:nth-child(n) img{aspect-ratio: 1 / 1 !important}
:root .portfolio-full-cta{display: flex;justify-content: center;margin-top: var(--space-topic)}
:root .portfolio-hero{
position: relative;
isolation: isolate;
display: flex;
align-items: center;
min-height: clamp(660px, 78vh, 860px);
overflow: hidden;
padding-top: clamp(150px, 13vw, 210px);
padding-bottom: clamp(72px, 7vw, 110px);
background: var(--ink);
color: #fff;
}
:root .portfolio-hero-media,
:root .portfolio-hero::before,
:root .portfolio-hero::after{
position: absolute;
inset: 0;
}
:root .portfolio-hero-media{z-index: 0}
:root .portfolio-hero-media img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.015);
}
:root .portfolio-hero::before{
content: "";
z-index: 1;
background:
linear-gradient(90deg, rgba(10,14,15,.91) 0%, rgba(10,14,15,.76) 42%, rgba(10,14,15,.34) 72%, rgba(10,14,15,.18) 100%),
linear-gradient(180deg, rgba(10,14,15,.56) 0%, transparent 34%, rgba(10,14,15,.34) 100%);
}
:root .portfolio-hero::after{
content: "";
z-index: 2;
background: url("../images/background-grain.webp") center / cover fixed no-repeat;
mix-blend-mode: soft-light;
opacity: .22;
pointer-events: none;
}
:root .portfolio-hero-content{
position: relative;
z-index: 3;
}
:root .portfolio-hero h1{
max-width: 1080px;
margin-top: 22px;
font-family: var(--display);
font-size: clamp(2.8rem, 5.4vw, 5.6rem);
font-weight: 600;
line-height: .94;
letter-spacing: -.055em;
color: #fff;
text-shadow: 0 3px 30px rgba(0,0,0,.34);
}
:root .portfolio-lead{
max-width: 880px;
margin-top: 32px;
color: rgba(255,255,255,.82);
font-size: clamp(1rem, 1.35vw, 1.25rem);
line-height: 1.7;
}
:root .portfolio-hero .eyebrow{color: rgba(255,255,255,.72)}
:root .portfolio-hero .eyebrow span{color: var(--acid)}
:root .portfolio-work{
--tex-base: var(--ink);
padding-top: clamp(76px, 7vw, 112px);
background-color: var(--ink);
color: #fff;
}
:root .portfolio-case-grid{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-flow: row;
gap: var(--vr-gap, 24px);
--gal-inset: clamp(23px, 23px + (100vw - 1710px) * .09, 60px);
width: auto;
max-width: none;
margin-inline: calc(50% - 50vw + var(--gal-inset));
background: transparent;
border: 0;
}
:root .portfolio-case-grid .case-card:nth-child(6n + 1),
:root .portfolio-case-grid .case-card:nth-child(6n){
grid-column: span 2;
}
:root .portfolio-case-grid .case-card:nth-last-child(2),
:root .portfolio-case-grid .case-card:last-child{
grid-column: span 2;
}
:root .portfolio-case-grid .case-card{
min-height: clamp(410px, 31vw, 540px);
}
:root .portfolio-case-grid .case-card img{aspect-ratio: 1 / 1}
:root .shared-footer-group{min-width: 0}
:root .shared-footer-group summary{display: none}
:root .shared-footer-group > .shared-footer-links{display: flex !important}
@media (min-width: 1101px){
:root .shared-footer-brand{grid-column: 1}
:root .shared-footer-group:nth-of-type(3){grid-column: 2;grid-row: 1}
:root .shared-footer-group:nth-of-type(1){grid-column: 3;grid-row: 1}
:root .shared-footer-group:nth-of-type(2){grid-column: 4;grid-row: 1}
:root .shared-footer-contact{grid-column: 5;grid-row: 1}
}
@media (max-width: 1199px) and (min-width: 768px){
:root .portfolio-case-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
:root .portfolio-case-grid .case-card:nth-child(n){grid-column: span 1}
:root .home-featured-grid{grid-template-columns: repeat(2, minmax(0, 1fr)) !important}
:root .home-featured-grid .case-card:nth-child(n){grid-column: span 1 !important}
}
@media (max-width: 767px){
:root{
--space-topic: 28px;
--space-section: 68px;
--space-major: 92px;
}
:root .section-pad{padding-block: var(--space-section)}
:root .home-featured-grid,
:root .portfolio-case-grid{grid-template-columns: minmax(0, 1fr) !important}
:root .home-featured-grid .case-card,
:root .portfolio-case-grid .case-card{min-height: 0}
:root .portfolio-case-grid .case-card:nth-child(n){grid-column: span 1}
:root .work .home-featured-grid .case-card:nth-child(n),
:root .work .portfolio-case-grid .case-card:nth-child(n){
grid-column: span 1 !important;
min-height: 0;
aspect-ratio: 1 / 1;
}
:root .portfolio-hero{
min-height: 720px;
padding-top: 128px;
padding-bottom: 58px;
}
:root .portfolio-hero-media img{object-position: 42% center}
:root .portfolio-hero::before{
background:
linear-gradient(90deg, rgba(10,14,15,.88), rgba(10,14,15,.56)),
linear-gradient(180deg, rgba(10,14,15,.52) 0%, rgba(10,14,15,.14) 34%, rgba(10,14,15,.72) 100%);
}
:root .portfolio-hero h1{font-size: clamp(2.8rem, 13vw, 4.1rem)}
:root .portfolio-lead{margin-top: 24px;font-size: .98rem}
:root .portfolio-work{padding-top: 58px}
:root body:not(.page-portfolio) .services .service-rows{
display: flex;
grid-template-columns: none;
gap: 12px;
margin-inline: -16px;
padding-inline: 16px;
padding-top: 12px;
padding-bottom: 28px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: 16px;
overscroll-behavior-inline: contain;
scrollbar-width: none;
border-inline: 0;
background: transparent;
}
:root body:not(.page-portfolio) .services .service-rows::-webkit-scrollbar{display: none}
:root body:not(.page-portfolio) .services .service-row{
flex: 0 0 86%;
min-height: 390px;
padding: 30px 24px;
scroll-snap-align: start;
border: 1px solid var(--line);
background: #f5f3ee;
}
:root .industry-card-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
:root .industry-card-grid a,
:root .industry-card-grid a:nth-child(2n),
:root .industry-card-grid a:nth-last-child(-n+2){
min-height: 106px;
padding: 16px;
border-right: 1px solid #d2d0ca;
border-bottom: 1px solid #d2d0ca;
}
:root .industry-card-grid a:nth-child(2n){border-right: 0}
:root .industry-card-grid a:nth-last-child(-n+2){border-bottom: 0}
:root .industry-card-grid strong{font-size: 1rem;line-height: 1.15}
:root .service-links{grid-template-columns: repeat(2, minmax(0, 1fr)) !important;gap: 1px}
:root .service-links .service-link{min-height: 118px;padding: 20px 16px}
:root .service-links .service-link strong{font-size: 1rem;line-height: 1.2}
:root .cta-band.section{padding-block: 48px !important}
:root .cta-band .cta-inner{gap: 22px}
:root .cta-band h2{font-size: clamp(2rem, 9.5vw, 2.8rem)}
:root .cta-band p{margin-top: 14px}
:root .shared-footer{padding-top: 48px}
:root .shared-footer-top{display: flex;flex-direction: column;gap: 0;padding-bottom: 34px}
:root .shared-footer-brand{margin-bottom: 28px}
:root .shared-footer-contact{order: 2;margin-bottom: 25px}
:root .shared-footer-group{order: 3;width: 100%;border-top: 1px solid var(--ui-line)}
:root .shared-footer-group:last-of-type{border-bottom: 1px solid var(--ui-line)}
:root .shared-footer-group summary{
display: flex;
align-items: center;
justify-content: space-between;
padding: 17px 0;
color: var(--ui-acid);
font-family: var(--ui-body);
font-size: .64rem;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
cursor: pointer;
list-style: none;
}
:root .shared-footer-group summary::-webkit-details-marker{display: none}
:root .shared-footer-group summary span{font-size: 1rem;transition: transform .2s ease}
:root .shared-footer-group[open] summary span{transform: rotate(45deg)}
:root .shared-footer-group:not([open]) > .shared-footer-links{display: none !important}
:root .shared-footer-group[open] > .shared-footer-links{display: flex !important;padding: 0 0 18px}
}
@media (max-width: 900px){
:root .portfolio-hero{
min-height: 100svh;
align-items: end;
padding-top: 145px;
padding-bottom: 50px;
}
}
:root .services{background-color: #eeece8}
@media (max-width: 900px){
:root body:not(.page-portfolio) .services .service-rows{
overflow-y: hidden;
border-top: 0;
}
}
@media (max-width: 900px){
:root .system-steps{
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px !important;
}
:root .system-step{min-height: 0}
}
@media (max-width: 767px){
:root .system-step{padding: 16px 14px !important}
:root .system-step b{
margin-bottom: 14px;
gap: 7px;
font-size: .62rem;
}
:root .system-step b::before{
flex-basis: 12px;
width: 12px;
}
:root .system-step strong{
margin-bottom: 6px;
font-size: 1.02rem;
line-height: 1.2;
}
:root .system-step p{
font-size: .76rem;
line-height: 1.45;
}
}
@media (max-width: 900px){
:root .semantic-industry-grid,
:root .case-grid:not(.home-featured-grid):not(.portfolio-case-grid){
display: flex !important;
grid-template-columns: none !important;
grid-auto-flow: row !important;
gap: 12px !important;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
scroll-snap-type: x mandatory;
margin-inline: -16px;
padding-inline: 16px;
scroll-padding-inline: 16px;
padding-top: 12px;
padding-bottom: 28px;
scrollbar-width: none;
border: 0;
background: transparent;
}
:root .semantic-industry-grid::-webkit-scrollbar,
:root .case-grid:not(.home-featured-grid):not(.portfolio-case-grid)::-webkit-scrollbar{
display: none;
}
:root .semantic-industry-grid > .semantic-industry-card{
flex: 0 0 86%;
scroll-snap-align: start;
}
:root .case-grid:not(.home-featured-grid):not(.portfolio-case-grid) > .case-card{
flex: 0 0 80%;
min-height: 340px;
scroll-snap-align: start;
}
:root .related-heading{
display: grid;
gap: 16px;
margin-bottom: 24px;
}
}
@media (min-width: 768px) and (max-width: 900px){
:root .semantic-industry-grid,
:root .case-grid:not(.home-featured-grid):not(.portfolio-case-grid){
margin-inline: -20px;
padding-inline: 20px;
scroll-padding-inline: 20px;
}
}
:root .ia-motion-showcase .interactive-video-copy{display: none}
:root .ia-motion-showcase .interactive-video-card{
background: transparent;
border: 0;
}
:root .ia-motion-showcase [data-video-crop="1"]{overflow: hidden}
:root .ia-motion-showcase [data-video-crop="1"] img{
transform: scale(1.0257);
}
:root .ia-motion-showcase [data-video-crop="1"]:hover img,
:root .ia-motion-showcase [data-video-crop="1"]:focus-visible img{
transform: scale(1.0513);
}
:root .interactive-video-dialog.is-cropped{overflow: hidden}
:root .interactive-video-dialog.is-cropped video{
transform: scale(1.0257);
}
@media (prefers-reduced-motion: reduce){
:root .ia-motion-showcase [data-video-crop="1"]:hover img,
:root .ia-motion-showcase [data-video-crop="1"]:focus-visible img{
transform: scale(1.0257);
}
}
@media (max-width: 900px){
:root main > .legal-hero{
margin-top: -62px;
padding-top: 110px !important;
}
}
html.anim-ready :is(.hero, .industry-hero, .portfolio-hero,
.legal-hero, .case-hero) .reveal{
opacity: 1;
transform: none;
transition: none;
}
:root .industry-card-grid a::after{
content: "";
position: absolute;
right: 14px;
top: 14px;
width: 50px;
height: 50px;
background: center / contain no-repeat;
opacity: .14;
pointer-events: none;
transition: opacity .3s ease, transform .3s ease;
}
@media (min-width: 621px) and (max-width: 767px){
:root .industry-card-grid a::after{top: 10px}
}
@media (min-width: 1360px){
:root .industry-card-grid a::after{
right: 18px;
top: 18px;
width: 62px;
height: 62px;
}
}
:root .industry-card-grid a:nth-child(1)::after{background-image: url("../images/industries/01.webp")}
:root .industry-card-grid a:nth-child(2)::after{background-image: url("../images/industries/02.webp")}
:root .industry-card-grid a:nth-child(3)::after{background-image: url("../images/industries/03.webp")}
:root .industry-card-grid a:nth-child(4)::after{background-image: url("../images/industries/04.webp")}
:root .industry-card-grid a:nth-child(5)::after{background-image: url("../images/industries/05.webp")}
:root .industry-card-grid a:nth-child(6)::after{background-image: url("../images/industries/06.webp")}
@media (hover: hover){
:root .industry-card-grid a:hover::after{
opacity: .26;
transform: scale(1.07);
}
}
@media (max-width: 559px){
:root .industry-card-grid a::after{
right: 13px;
top: 13px;
width: 72px;
height: 72px;
opacity: .17;
}
}
@media (prefers-reduced-motion: reduce){
:root .industry-card-grid a::after{transition: none}
:root .industry-card-grid a:hover::after{transform: none}
}
:root .page-service main > .industry-hero + .section{
background-color: var(--ink);
color: #fff;
}
:root .page-service main > .industry-hero + .section .section-heading h2,
:root .page-service main > .industry-hero + .section .strategy-card h3{color: #fff}
:root .page-service main > .industry-hero + .section .section-heading h2 span,
:root .page-service main > .industry-hero + .section .section-heading h2 em{color: rgba(255, 255, 255, .48)}
:root .page-service main > .industry-hero + .section .eyebrow{color: rgba(255, 255, 255, .63)}
:root .page-service main > .industry-hero + .section .section-heading .intro{color: rgba(255, 255, 255, .72)}
:root .page-service main > .industry-hero + .section .strategy-card{
background-color: rgba(255, 255, 255, .045) !important;
}
:root .page-service main > .industry-hero + .section .strategy-card:nth-child(2n){
background-color: rgba(255, 255, 255, .075) !important;
}
:root .page-service main > .industry-hero + .section .strategy-card .card-label{color: rgba(255, 255, 255, .5)}
:root .page-service main > .industry-hero + .section .strategy-card p{color: rgba(255, 255, 255, .72)}
:root .page-service main > .industry-hero + .section .check-list li,
:root .page-service main > .industry-hero + .section .svc-list li{
background-color: rgba(255, 255, 255, .07) !important;
color: rgba(255, 255, 255, .78);
}
:root .page-service main > .industry-hero + .section .strategic-grid{
background-color: rgba(255, 255, 255, .13);
border-color: rgba(255, 255, 255, .13);
}
:root .interactive-play{
width: clamp(52px, 4.4vw, 66px);
height: clamp(52px, 4.4vw, 66px);
padding: 0;
border: 1.5px solid rgba(255, 255, 255, .85);
color: transparent;
font-size: 0;
background: rgba(12, 16, 17, .3);
backdrop-filter: blur(7px);
box-shadow: 0 10px 30px rgba(0, 0, 0, .26);
transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
:root .interactive-play::before{
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 0;
height: 0;
transform: translateX(1.5px);
border-style: solid;
border-width: 7.5px 0 7.5px 13px;
border-color: transparent transparent transparent #fff;
transition: border-color .25s ease;
}
:root .interactive-video-thumb:hover .interactive-play,
:root .interactive-video-thumb:focus-visible .interactive-play{
background: rgba(255, 255, 255, .94);
border-color: rgba(255, 255, 255, .94);
}
:root .interactive-video-thumb:hover .interactive-play::before,
:root .interactive-video-thumb:focus-visible .interactive-play::before{
border-left-color: #171c1e;
}
:root .interactive-video-close{
width: 40px;
height: 40px;
padding: 0;
border: 1px solid rgba(255, 255, 255, .28);
color: transparent;
font-size: 0;
background: rgba(10, 14, 15, .55);
transition: background .25s ease, border-color .25s ease;
}
:root .interactive-video-close::before,
:root .interactive-video-close::after{
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 15px;
height: 1.5px;
border-radius: 2px;
background: rgba(255, 255, 255, .92);
transition: background .25s ease;
}
:root .interactive-video-close::before{transform: rotate(45deg)}
:root .interactive-video-close::after{transform: rotate(-45deg)}
:root .interactive-video-close:hover,
:root .interactive-video-close:focus-visible{
color: transparent;
background: rgba(255, 255, 255, .16);
border-color: rgba(255, 255, 255, .7);
}
:root .interactive-video-close:hover::before,
:root .interactive-video-close:hover::after,
:root .interactive-video-close:focus-visible::before,
:root .interactive-video-close:focus-visible::after{background: #fff}
@media (prefers-reduced-motion: reduce){
:root .interactive-play,
:root .interactive-play::before,
:root .interactive-video-close,
:root .interactive-video-close::before,
:root .interactive-video-close::after{transition: none}
}
@media (max-width: 767px){
:root .work .portfolio-case-grid{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px;
}
:root .work .portfolio-case-grid .case-card:nth-child(n){
grid-column: span 1 !important;
min-height: 0;
aspect-ratio: 1 / 1;
padding: 18px;
}
:root .work .portfolio-case-grid .case-card:nth-child(5n + 1){
grid-column: span 2 !important;
aspect-ratio: 4 / 3;
padding: 22px;
}
}
@media (max-width: 559px){
:root .work .portfolio-case-grid .case-card:nth-child(n){padding: 13px}
:root .work .portfolio-case-grid .case-card:nth-child(5n + 1){padding: 22px}
:root .work .portfolio-case-grid .case-card:not(:nth-child(5n + 1)) p,
:root .work .portfolio-case-grid .case-card:not(:nth-child(5n + 1)) i{
display: none;
}
:root .work .portfolio-case-grid .case-card:not(:nth-child(5n + 1)) .case-meta{
font-size: .5rem !important;
letter-spacing: .07em;
line-height: 1.25;
}
:root .work .portfolio-case-grid .case-card:not(:nth-child(5n + 1)) h3{
margin: 5px 0 0 !important;
font-size: 1rem !important;
line-height: 1.12 !important;
}
:root .work .portfolio-case-grid .case-card:not(:nth-child(5n + 1))::before{
background: linear-gradient(180deg,
rgba(8, 11, 12, 0) 24%,
rgba(8, 11, 12, .52) 58%,
rgba(8, 11, 12, .9) 100%);
}
}
:root .page-service main > .industry-hero + .section{
padding-bottom: 0 !important;
}
:root .page-service main > .industry-hero + .section > .shell::after{
content: "";
display: block;
height: 0;
margin-top: var(--u-section);
border-top: 1px solid rgba(255, 255, 255, .14);
}
:root .system-step{
background-color: rgba(255, 255, 255, .045) !important;
}
:root :is(.page-service, .page-industry) .services-band .service-link,
:root :is(.page-service, .page-industry) .semantic-industry-section .semantic-industry-card,
:root .page-industry main > .industry-hero + .section .strategy-card,
:root .page-industry .industry-hero-sequence > .section .strategy-card,
:root :is(.page-service, .page-industry) .faq-list > details,
:root :is(.page-service, .page-industry) .faq-item,
:root main > .services .service-row,
:root main > .home-industries .industry-card-grid > a,
:root main > .faq .faq-list > details{
background-color: transparent !important;
border: 0 !important;
box-shadow: var(--vr-shadow, 0 18px 48px rgba(18, 24, 25, .1));
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
:root :is(.page-service, .page-industry) .semantic-industry-section .semantic-industry-card{
background-color: rgba(255, 255, 255, .55) !important;
-webkit-backdrop-filter: blur(7px) saturate(1.08);
backdrop-filter: blur(7px) saturate(1.08);
}
@media (hover:hover){
:root :is(.page-service, .page-industry) .services-band .service-link:hover,
:root :is(.page-service, .page-industry) .semantic-industry-section .semantic-industry-card:hover,
:root .page-industry main > .industry-hero + .section .strategy-card:hover,
:root .page-industry .industry-hero-sequence > .section .strategy-card:hover,
:root :is(.page-service, .page-industry) .faq-list > details:hover,
:root :is(.page-service, .page-industry) .faq-item:hover,
:root main > .services .service-row:hover,
:root main > .faq .faq-list > details:hover{
background-color: #fff !important;
}
}
@media (prefers-reduced-transparency: reduce){
:root :is(.page-service, .page-industry) .services-band .service-link,
:root :is(.page-service, .page-industry) .semantic-industry-section .semantic-industry-card,
:root .page-industry main > .industry-hero + .section .strategy-card,
:root .page-industry .industry-hero-sequence > .section .strategy-card,
:root :is(.page-service, .page-industry) .faq-list > details,
:root :is(.page-service, .page-industry) .faq-item,
:root main > .services .service-row,
:root main > .home-industries .industry-card-grid > a,
:root main > .faq .faq-list > details{
background-color: #f8f7f3 !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
:root main > .home-industries .industry-card-grid > a::before{
right: 0;
width: auto;
transform: scaleX(.22);
transform-origin: left center;
transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
@media (hover:hover) and (min-width:761px){
:root main > .home-industries .industry-card-grid > a:hover,
:root main > .home-industries .industry-card-grid > a:focus-visible{
background-color: #fff !important;
color: var(--ink, #24292b) !important;
transform: translateY(-5px);
box-shadow: var(--vr-shadow-hover, 0 28px 68px rgba(18, 24, 25, .16));
}
:root main > .home-industries .industry-card-grid > a:hover::before,
:root main > .home-industries .industry-card-grid > a:focus-visible::before{
background: var(--card-accent, var(--acid)) !important;
transform: scaleX(1);
}
}
@media (prefers-reduced-motion:reduce){
:root main > .home-industries .industry-card-grid > a::before{
transition: none;
}
}